Webs Accesibles

13 agosto 2012

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.

Tamaño de letra variable

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

Versión Monocromo

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!!

|
Otros artículos de
Jose Luis Collado López

3 Comments

canadian pharmacy on 09/20/2017 at 17:11.

General Low-down Fro this outcome

Responder

canadian pharmacy on 09/17/2018 at 21:30.

Non-specific Information Here this product

Responder

Robertvussy on 11/04/2018 at 22:27.

forex

Responder

Deja tu comentario

Tranquilo, tu email no será publicado o compartido.
Rellena los campos obligatorios marcados con *

Puedes utilizar etiquetas HTML con sus correspondientes atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


*


Utilizamos cookies propias y de terceros para mejorar nuestros servicios, facilitar su uso y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información en este enlace.
Aceptar