En España lo padecen en alguna medida cerca del 10% de los hombres, y menos del 1% de mujeres. Por lo que un segmento importante de la población, queda olvidada y discriminada en la Web.

Logo de google tal y como lo vería un daltónico, más amarillento de lo habitual.

La forma más común de esta enfermedad, consiste en percibir como gris de distinta intensidad los colores rojo, verde y amarillo. Sin embargo, en algunos casos, los daltónicos pueden ver más matices del color violeta que las personas de visión normal. También hay casos en los que la incidencia de la luz puede hacer que varíe el color que ve el daltónico.

Algunos consejos:

El contraste es lo más importante para un daltónico

Hay que diferenciar en todo lo posible el primer plano y colores de fondo. Para asegurar la mejor legibilidad a tu sitio, la mejor opción es utilizar letras negras con fondo blanco. Usar fondos azules o verdes disminuye y degrada la legibilidad. De ser posible no uses el color rojo de fondo, puesto que disminuye la legibilidad sin importar el color de las letras. El uso de azules ligeros y grises claros, aumenta el stress óptico de muchos daltónicos.

Intenta Utilizar el contraste recomendado por herramientas de comprobación de color. Contrast Analyser es una estupenda herramienta, que comprueba si el contraste de nuestros sitios se ajusta a las pautas de accesibilidad. Además incorpora una funcionalidad para simular las condiciones visuales del daltonismo.

Transcribo las palabras de Daniel Flück, de cuya página hablaremos más tarde para clarificar lo importante que es el contraste para un daltónico:

“Me gustaría añadir mi lista personal de colores que a menudo no pueden distinguir. Y también me gustaría añadir algunos ejemplos para ellos, así alguien con visión normal podrá ser capaz de imaginar un poco que se siente al ser daltónico

• Contraste de color rojo oscuro a negro: Si recibo un correo electrónico con las palabras resaltadas en rojo, no puedo verlas.
• Contraste de verde hierva a naranja: no puedo detectar una naranja que caiga por el suelo de mi jardín.
• Contraste de verde hoja a rojo: para mí no hay ni flores ni manzanas rojas en los árboles.
• Contraste de verde claro a amarillo: no puedo ver si es un plátano maduro o no.
• Contraste de violeta a azul oscuro: nunca sabré cuál es la diferencia.
• Contrate de cian a gris: todos los tonos de azul-verde son incoloros para mí.
• Contrate de verde a marrón o a rojo: Por favor, no me hables de animales rojos en el bosque.”

Cuidado con los enlaces

Los vínculos no deben depender exclusivamente de un color, o por lo menos que este no sea ni rojo ni verde. Es recomendable marcar los enlaces de alguna forma, como por ejemplo con subrayado, cursiva, negrita…ect

El problema de los formularios

En un formulario se suelen incluir elementos gráficos que le indican al usuario si algún campo está incompleto y que es necesario rellenarlo. El mecanismo más utilizado es añadir un texto de aviso con letras rojas para indicar qué campos es obligatorio rellenar. Recuerda que a un daltónico le puede resultar casi imposible distinguir una letra roja de una negra, por lo tanto no van a tener forma de saber cuales campos son obligatorios.

Una buena solución seria incluir alguna forma de identificación, o un simple asterisco junto al campo que es obligatorio rellenar.

Pero la regla más importante es:

Nunca, nunca utilices el color únicamente para indicar, comunicar o diferenciar algo. Para complementar el color puedes utilizar otros elementos como formas, patrones, de texto, iconos, sonidos o incluso fotos.

Ejemplos prácticos:

We are Colorblind, es una página escrita por Daniel Flück, que se ha convertido en la referencia en cuanto al daltonismo en diseño web se refiere. En esta página, nos podemos encontrar con unos cuantos ejemplos, donde podemos aprender cómo interacciona un daltónico ante ciertos diseños. Además nos propone soluciones para evitar estas dificultades. He querido recoger aquí algunos ejemplos:

Los gráficos de líneas estadísticas:

El problema surge cuando no hay un método claro de relacionar dos o más colores de las líneas, con sus valores correspondientes y los nombres de categoría en la leyenda. Esto confunde a los daltónicos, lo que a veces hace imposible la utilización de la tabla.

Solución 1: Incorporación de una leyenda al gráfico

Al colocar las leyendas de la tabla junto a las líneas correspondientes, los daltónicos tienen una mejor conexión visual entre la tabla y los datos. El daltónico ahora puede contar con algo más que un color para entenderlo mejor.

Solución 2: Uso de diferentes formas e iconos

Mediante la inserción de formas o iconos en los trazados de las líneas, el daltónico mejorará su experiencia. Esta solución no funciona para todas las estadísticas, ya que algunas no utilizan líneas.

Iconos de status

los iconos de status tienen una amplia variedad de usos, por lo general se suelen utilizar para comunicar el estado de algo en un sitio web.

Problemas

• El problema surge cuando el color se utiliza para comunicar el estado de los iconos. El Pitch Dark de Firefox, es una herramienta ideal para usuarios daltónicos, pero aun así, la mayoría de los iconos contienen rojo y verde, lo que, en ojos daltónicos, los hace casi invisibles.
• Los Iconos aislados, sin otros cercanos para su comparación, no parecen tener un color claro. Un icono verde puede parecer de color rojo o naranja a una persona daltónica.
• Los Iconos con muy poca diferencia en la forma también son confusos. Un daltónico tendría que mirar de cerca para detectar la diferencia en la forma

Solución 1: Usa iconos que describan la acción o el estado

Eso podrá ayudar a los daltónicos a comprender los iconos, sin tener que confiar sólo en el color.

Solución 2: Usa leyendas

A veces no es posible describir una acción o estado con un simple icono. Puede que el espacio disponible sea limitado o la acción es demasiado compleja para describirla. Si la forma de los iconos no puede explicarse fácilmente, una buena solución puede ser poner una leyenda junto al icono.

Solución 3: Usa colores fáciles de distinguir

El uso de colores muy claros y con buen contraste ayuda a que se comprendan mucho mejor por personas con daltonismo. Por encima de todo, hay que tratar de evitar contrastes inapropiados.

Herramientas

Existe una herramienta llamada Colorblind Web Page Filter que nos ofrece la posibilidad de navegar por Internet a través de los ojos de un daltónico, permitiéndonos reproducir los colores de las distintas web tal y como los vería cualquier persona con daltonismo.

Desde Grupo de Trabajo de Aseguramiento de la Calidad del W3C. Dónde nos enseña un método que es válido para sitios Web de cualquier dimensión; satisfará tus necesidades tanto si gestionas un sitio Web personal, de un pequeño negocio o de una gran corporación.

Este documento nos guíará a través de pasos individuales, cada uno de los cuales serás capaz de completar individualmente, desde el análisis de tu sitio Web actual hasta la organización de tu nuevo sitio Web. Cada uno de estos pasos ha sido diseñado de forma separada, y puede ser emprendido en diferentes ocasiones, diferentes niveles o por diferentes personas, con independencia de su nivel de conocimientos, pero de acuerdo a un flujo de trabajo Ordenados en los siguientes pasos:

• Decide qué es lo que probarás
• Analiza tu sitio Web
• Organiza el trabajo
• ¿Cómo puedes mejorar tu sitio?
• Revisa
• Mantén el nivel de calidad

Este documento o artículo seguramente muchos sepan de estas cosas, pero aquí también nos explica como hacerlo de forma organizada y con detalle, os dejo con un enlace para leer el artículo completo:

Leer artículo completo W3C

Para “alcanzar” el nivel de accesibilidad de los portales sobre la nueva recomendación de W3C, se desarrollado una nueva versión del analizador de accesibilidad TAW. Actualmente es una beta, pero funciona bastante bien

Su uso es mucho más sencillo, ya que el informe que genera la herramienta ofrece cuatro tipos de vistas: Resumen, Vista Marcada, Detalle y Listado. Lo mejor es instalarlo o usarlo a través de su Web para comprobar su funcionamiento y sus características.

Acceder a la herramienta TAW

También podemos descargar el complemento para Firefox que actualmente verifica las pautas WCAG 1.0, hasta que se lance la versión TAW con las 2.0 oficial.

• Técnicas WCAG 2.0 asociadas a la implementación de formularios accesibles
• Guía rápida de normas de accesibilidad WCAG 2.0 para formularios
• Checklist para validar formularios de acuerdo con las WCAG 2.0
• Ejemplo de formulario usable y accesible
• Documentación de interés

En las nuevas pautas nos daremos cuenta de que, exiten muchas técnicas (Techniques for WCAG 2.0) referidas a los formularios.

Ver artículo: Formularios Accesibles según las WCAG 2.0

Métodos para proporcionar una descripción más larga

Hay varias maneras de proporcionar una descripción más larga para las imágenes. Estas opciones se listan a continuación, en orden de mayor a menor preferencia:

• Proporcionar la descripción larga en el contexto del propio documento.
• Proporcionar un enlace a una descripción más larga a través de un enlace de texto normal.
• Proporcionar un enlace a una descripción más larga a través de la atributo longdesc.

Aquellos que están familiarizados con las técnicas de la accesibilidad puede sorprenderse al encontrar que el atributo longdesc está en la parte final de preferencia de la lista. La razón de esto es que es un método “invisible”. El atributo longdesc es invisible (e inaccesible en algunos navegadores) a personas que no utilizan lectores de pantalla. La forma más sencilla de hacer accesibles las descripciones largas es que sean obvias y al alcance de todos, independientemente si tienen una discapacidad o no.

EN EL CONTEXTO DEL PROPIO DOCUMENTO

Al poner la descripción larga en el contexto del documento donde se encuentra el gráfico se produce, que está siendo visible a todo el mundo, no sólo las personas con discapacidad. Todo el mundo podrá leer la descripción larga y beneficiarse de ella. Aquí os dejo un ejemplo de cómo podría llevarse a cabo con una imagen de un gráfico:

En el ejemplo anterior, los datos aparecen después de la imagen, y es accesible para todos.

UN VÍNCULO DE TEXTO NORMAL

La segunda mejor manera de proporcionar una descripción más larga es simplemente un enlace. Sólo sería añadir un enlace a una página con una descripción más larga, como en el ejemplo siguiente:

La información está disponible a todo el mundo a través de este método, a pesar de que tiene que hacer clic en un vínculo para acceder a ella. El vínculo es evidente para todos. Pueden optar por seguir el enlace o no.

EL ATRIBUTO LONGDESC

El atributo longdesc que se puede añadir a un <img> no hace más que proporcionar un vínculo a una página aparte con una descripción más larga. Funciona de la misma manera que el ejemplo anterior, excepto que el enlace es invisible a los lectores videntes. El siguiente ejemplo vemos la misma gráfica con el atributo longdesc añadido:

Marcado para el atributo longdesc

Seguro que os habéis dado cuenta de que no vemos ningun tipo de texto o indicación cuando usamos el atributo longdesc. Las únicas personas que pueden acceder al atributo longdesc fácilmente son los que utilizan lectores de pantalla modernos. Los lectores de pantalla antiguos no apoyan este atributo. Incluso entre aquellos que utilizan la última versión del lector de pantalla, hay muchos que no están familiarizados con el atributo longdesc (ya que se utiliza con poca frecuencia), y no saben cómo acceder a la descripción a pesar de que su lector de pantalla lo soporta.

Veamos tambíen el longdesc según las pautas de la WCAG 2.0: Ver referencia

La mayoría de ellas son muy interesantes y útiles para hacer pruebas y mejoras de accesibilidad web en el desarrollo de nuestros proyectos.

Simuladores de personas con discapacidades cognitivas

• Distractability Simulation
• Dyslexia simulation
• Flicker Rate Test for Gif Images
• Misunderstood Minds
• PEAT (Photosensitive epilepsy analysis tool)
• Readability Index calculator
• Readability Test

Simuladores de personas con problemas de visión

• aDesigner
• Daltonize
• Fangs
• Graybit
• Low-Vision Simulation
• Lynx Viewer Text-Only Simulator
• Screen Reader Simulation
• VisCheck
• Visual Impairment Simulator
• Web Page Backward Compatibility Viewer

El summary es útil cuando la tabla tiene una estructura compleja (por ejemplo, cuando hay varios conjuntos de encabezados de columna o fila, o cuando hay varios grupos de columnas o filas). También puede ser útil para tablas de datos simples que contienen varias columnas o filas de datos.

El atributo summary puede utilizarse o no dependiendo de la complejidad y volumen de información de la tabla. También sabemos que la tabla tambien dispone de un título llamado caption. Si se usan ambas cosas (summary y caption) nunca se deberá duplicar su contenido. A continuación vemos unos ejemplos de uso:

Ejemplos

Ejemplo 1: Una tabla de datos con summary y sin caption

Este ejemplo muestra un horario de autobús. El número de Línea y la dirección se incluyen en el summary junto con información sobre cómo utilizar el horario.

  …


Estación 1
Estación 2
Estación 3
Estación central

4:00
4:05
4:11
4:19

Ejemplo 2: Una tabla de datos con summary y caption

En este ejemplo, el caption identifica la Línea de autobús. El summary ayuda a los usuarios que son ciegos a comprender cómo utilizar el programa. Los lectores de pantalla leen el caption seguido por el summary.

…

Línea 7 Centro Ciudad (Horario)

Fuente: Techniques for WCAG 2.0 de W3C

Ver el Estudio de Preferencias de Usuarios con Lectores de Pantalla

Conclusiones

Tal vez la conclusión más significativa que podemos hacer de estos resultados de la encuesta es que no existe el “usuario típico” que usa un lector de pantalla. Como desarrolladores, solemos usar algún lector de pantalla como JAWS accesibilidad o Window Eyes o VoiceOver (o cualquier otro). Esta encuesta pone de manifiesto que la accesibilidad en lectores de pantalla es sobre la gente real y sobre las personas que tienen diferentes habilidades y preferencias. Como desarrolladores, debemos hacer todo lo posible para acomodar las necesidades de este diverso grupo.

En general, estos resultados sugieren que, a raíz de las directrices y normas de accesibilidad, el uso de tecnologías que apoyan los altos niveles de accesibilidad, y proporcionar a los usuarios distintas alternativas es lo más importante. La amplia gama de respuestas de los usuarios hace que sea difícil dar recomendaciones definitivas para muchas cosas.

También puede ser interpretado que algunas cosas (como las diferencias relativamente insignificantes en la variante de texto o la redacción de “saltar” enlace). Esto la verdad es que afecta muy poco en los usuarios que usan lector de pantalla. Por otro lado, el estudio también indica un alto nivel de dificultad con el contenido de Flash.

Esperamos que estos resultados den una idea a los desarrolladores para analizar mejor las opciones de desarrollo que hacemos para los usuarios que usan lectores de pantalla.

Mayormente usamos otras aplicaciones para evaluar la accesbilidad Web de una página. Pero esta es relamente muy útil, práctica y gratuita. Y lo mejor es que podemos integrarla como un complemento de Firefox

La barra de herramientas WAVE para Firefox provee un mecanismo para procesar páginas web directamente en Firefox. La barra de herramientas realiza todo el proceso dentro de su navegador, ninguna información es enviada al servidor de WAVE. Esto garantiza que sus reportes de accesibilidad sean 100% seguros y privados. Dado que la barra de WAVE para Firefox evalúa la versión final de su página tal como la muestra el navegador, ésta puede evaluar los estilos locales y las páginas con contenido dinámico generado por secuencias de comando o AJAX. Esta herramienta también dispone de su versión en español.

Descargar la barra WAVE para Firefox