La accesibilidad web se refiere a la capacidad de acceso a la Weby a sus contenidos por todas las personas independientemente de la discapacidad (física, intelectual o técnica) que presenten.
Hace unos días, tuvimos la necesidad de realizar una web accesible, en la cual, teníamos que permitir al usuario, aumentar o disminuir el tamaño del texto a su antojo, así como de ofrecerle una segunda versión de la web en blanco y negro (versión monocromo).
Esto, en realidad, es muy simple de realizar, y a la vez muy útil para mucha gente, por lo que a los desarrolladores no nos costaría trabajo, y a la vez ayudaríamos a que nuestra web fuera accesible para todo el mundo.
Primero voy a explicar como, con un script, permitimos al usuario aumentar o disminuir el tamaño del texto:
<script type=”text/javascript”>
var min=8;
var reset=14;
var max=22;
function increaseFontSize() {
var p = document.getElementsByTagName(‘p’);
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace(“px”,”"));
} else {
var s = reset;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+”px”
}
}
function defaultFontSize() {
var p = document.getElementsByTagName(‘p’);
for(i=0;i<p.length;i++) {
p[i].style.fontSize = reset+”px”
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName(‘p’);
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace(“px”,”"));
} else {
var s = reset;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+”px”
}
}
</script>
Simplemente añadiendo esto entre las etiquetas head de nuestra página, obtenemos tres funciones, una para disminuir el texto, una para aumentarlo, y otra para dejarlo en su tamaño original.
Los valores del tamaño del texto podemos modificarlos a nuestro gusto en estas líneas:
var min=8; (valor mínimo)
var reset=14; (valor por defecto)
var max=22; (valor máximo)
Ahora solo necesitamos algo que llame a nuestras funciones, por ejemplo, tres enlaces que llamen a esas tres funciones:
<a href=”javascript:{}” onclick=”decreaseFontSize();”>Disminuir</a>
<a href=”javascript{}” onclick=”defaultFontSize();”>Restaurar</a>
<a href=”javascript{}” onclick=”increaseFontSize();”>Aumentar</a>
Ahora cada vez que pulsemos en el enlace, se realizará la acción que corresponda.
Puedes descargar cambiar-fuente.js, con las funciones por si quieres incluirlo directamente
Ahora imaginad que queremos que, al pulsar un botón, nuestra web cambie a blanco y negro o con otro determinado diseño, para ello tenemos la siguente solución:
Creamos dos enlaces de la siguiente forma, para que al pulsarlos se vean de una forma u otra:
<a href=”?color=1″ id=”color”>COLOR</a>
<a href=”?monocromo=1″ id=”monocromo”>BLANCO Y NEGRO</a>
Como vemos, cada uno apunta a una dirección, y añade a nuestra URL un parámetro (por ejemplo ?monocromo=1).
Bien pues ahora, con PHP vamos a hacer que nuestro código compruebe la URL de nuestra web, y en caso de que sea monocromo, añada un nuevo archivo ‘.css’ en el que sustituiremos los estilos de nuestras clases e ids por los nuevos. Insertamos este código entre las etiquetas head de nuestro documento:
<?php
if($_GET["monocromo"]==1 || ( $_SESSION["monocromo"]==”1″ && $_GET["color"]!=1 ) ){
$_SESSION["monocromo"]=1;
echo ‘<link rel=”stylesheet” href=”monocromo.css” type=”text/css”>’;
}else{
$_SESSION["monocromo"]=0;
}
?>
Si hemos pulsado el enlace ‘BLANCO Y NEGRO’, se habrá añadido a nuestro documento el archivo de estilos ‘monocromo.css’, el cual habremos creado anteriormente, y habremos establecido nuevos estilos para nuestra web, que sustituirán a los anteriores.
Esto tiene un problema, y es que cuando cambiemos entre secciones de nuestra página, si estamos en la versión blanco y negro, volverá a la versión en color, así que para ello debemos crear una sesión con PHP.
Para ello añadimos al comienzo de todo nuestro código (antes incluso que la etiqueta html) lo siguiente:
<?php session_start(); ?>
Gracias a esto, conseguimos que la variable que almacena el valor monocromo=1 cuando pulsamos el enlace, persista mientras nos cambiamos de sección.
Esta técnica para añadir hojas de estilo mediante un botón, no solo sirve para webs en blanco y negro y accesibilidad, si no que se pueden hacer muchas cosas más, así que si se os ocurre algo, ¡¡contádnoslo!!
<< Post Anterior | Post Siguiente >>Webs Accesibles fue posteado el agosto 13, 2012 a las 17:29 en Usabilidad y. fue modificado el agosto 13, 2012 at 20:19. Puedes seguir cualquier respuesta a esta entrada a través de la RSS 2.0 feed. Puedes dejar una respuesta o hacer un trackback desde tu web.
Comentarios recientes