Al lanzar el plugin nos mostrará una página html con la comprobación de  todos los colores de nuestros textos con sus respectivos fondos donde nos marcara en amrillo las combinaciones que no sean corectas y no superen el test de accesibilidad.

Una de esas cosas que no podemos saber es el grado de deficiencia visual que tienen nuestros usuarios o simplemente que tanto por ciento de nuestros usuarios son daltónicos. Sean cuales sean esas cifras es nuestra obligación ofrecer una correcta legibilidad a los usuarios de nuestro site.

No obstante sabiendo que en España hay más de 46 millones de personas, de estas usan gafas o lentillas más de 20 millones y el daltonismo afecta a más de 2 millones, en su mayoría hombres, podemos encontrar motivos suficientes para hacer una web accesible y legible para todos.A menos que el diseñador sea daltónico difícilmente pensará en las deficiencias visuales y los problemas que esto conlleva a estos usuarios por lo que es fácil cometer errores de este tipo que luego afectan al diseño de la web. Antes de lanzarse a diseñar es necesario plantearse lo siguiente:

• Usar letras negras en un fondo blanco.
• Usar ayudas visuales en los gráficos y mapas. A los daltónicos les puede costar discernir los colores, pero las flechas, textos o lineas pueden ayudarles a entender mejor la imagen.
• Prueba a usar tonos magenta en lugar de rojos. El magenta tiene la misma proporción de rojo que de azul. Un daltónico rojo-verde no podrá ver el rojo, pero si el azul.
• Si usas magenta, no uses el azul.
• No usar fondos azules, verdes o rojos. Los fondos azules o verdes dificultan la legibilidad. Los fondos rojos degradan la legibilidad sea cual sea el color de las letras.
• Los azules claros y grises, independientemente del fondo, degrada la usabilidad y aumenta el estrés óptico de muchos daltónicos.
• En los formularios se suele usar el rojo para alertar al usuario que no ha cumplimentado correctamente con los campos. Un daltónico no distinguirá entre el negro y el rojo por lo que es recomendable acompañar el mensaje de algún símbolo que pueda identificar.

Los problemas de legibilidad no son solo exclusivos de las personas que padecen dáltonismo, las personas mayores o con la vista cansada tambien pueden encontrar muchos problemas ante un diseño erróneo.

Muchas veces el problema de los colores no tiene nada que ver con los propios colores y es meramente un problema de brillo de la pantalla. Lo que vemos perfectamente en nuestro monitor no tiene porque verse igual en otro. Es más a veces el cambio sorprende, como puede ser un rosa que no se ve o un naranja que parece rosa. Muchas veces esto puede ser también porque con el tiempo el monitor ha perdido su brillo o no esta calibrado correctamente, proceso el cual desconocen muchos usuarios.

A todo esto no es suiciente con que cuidemos los colores, es indispensable realizar las pruebas de usabilidad y accesibilidad en varios monitores de diferentes resoluciones y formatos para comprobar la correcta legibilidad de nuestros sites.

Los mejores consejos que se pueden dar para hacer una web accesible tal vez se puedan resumir en dos:

• Usar el sentido común
• Validar el código XHTML y las hojas de estilo CSS según los estándares del W3C

Lo difícil es seguir estos dos consejos pero esta claro que no todo queda aquí y probablemente no tengamos ni medios ni dinero para hacer pruebas de usabilidad y accesibilidad satisfactorias.

Voy a evitar lo obvio, como separar el código de los aspectos visuales no usar contenido dinámico ni efectos JavaScript, etc. Todo esto ya lo sabemos. Por eso os propongo una serie de claves para lograr una web accesible.

Tipografía

1. Usar tamaños de fuentes legibles. Algunos dicen mínimo 11px. Yo te diría 12 o incluso 13px.
2. Usar tamaños relativos (em) y nuca pixeles (px).
3. Mejor no usar el elemento small. Remplazalos por un span y usa CSS

Maquetación

1. Usa tablas solo para mostra datos tabulares. Y no uses tablas dentro de tablas.
2. No te olvides de poner un sumario a la tablas, usa pare ello el atributo summary en el elemento table.
3. Pon un titulo a las tablas, usa el elemento caption dentro de la tabla antes de la cabeceras.
4. Usa correctamente los títulos h1, h2, h3, etc. Y con sentido lógico, no pongas un h3 si antes no has puesto un h2. Encontrarás quien te diga que solo puede haber un h1, yo creo que eso depende del formato de la web. Si se trata de un documento tiene sentido, pero no si se trata de un blog, que cada entrada tiene un titulo.
5. No anides elementos de bloque (p, noframes, table, blockquote, ul, ol, dl, h1-h6, etc.) dentro de elementos que no lo son (strong, em, a, etc.)
6. Evita los elementos vacíos como divs o p. Sin embargo, no te aparecerán warnings cuando usas un div con una clase, típico caso cuando usas la clase clearfix: <div class=”clearfix”></div>.
7. No te olvides delos alt en las imágenes y usa también el atributo title.
8. Tampoco te olvides del title en los links.
9. No uses el atributo target en los elementos a.
10. En los links, no uses el mismo texto para el titulo que para el propio texto.
11. No te inventes atributos, si hay gente que lo hace.
12. No uses popups ni efectos de Javascript. Si lo usas asegúrate que la página funciona bien con el Javascript deshabilitado.
13. Proporciona contenido alternativos a los objetos multimedia, object.

Formularios

1. Pon los campos dentro de los elementos label. Y usa el atributo for del elemento label para relacionarlo con el campo, usando como referencia el id del elemento.
2. Siempre que puedas pon valores por defecto a los campos de entrada.
3. Valida los campos del formulario simpre desde el lado del servidor. Los scripts son un añadido para dar más usabilidad, el formulario debe funcionar correctamente sin ellos.
4. No pidas datos inecesarios.
5. Captchas y accesibilidad hoy por hoy son dos cosas incompatibles. El W3C es conciente de los problemas de accesibilidad generados por los captchas.

A todo esto seguro que te preuntarás que si no podemos usar poups, JavaScript, ni el atributo target con el valor  _blank para abrir un link en otra ventana ¿como lo hacemos para poner el link de “Acepto los condiciones legales…”, “He leido..”, etc. sin que el usuario pierda todo lo que ha introducido? Yo mismo me lo he preguntado muchas veces, pero eso lo vermos más adeletante.