Colorblindly

Colorblindly es una extensión para el navegador Google Chrome que simula diferentes tipos de ceguera al color:

Simulates colorblindness in your web browser.
Colorblindly is an extension that helps developers create websites for the people with colorblindness by allowing them to simulate the experience those users have on websites.
There are 8 different settings to experience:
-Blue Cone Monochromacy / Achromatomaly
-Monochromacy / Achromatopsia
-Green-Weak / Deuteranomaly
-Green-Blind / Deuteranopia
-Red-Weak / Protanomaly
-Red-Blind / Protanopia
-Blue-Weak / Tritanomaly
-Blue-Blind / Tritanopia

Herramientas para medir el riesgo de epilepsia por fotosensibilidad de un vídeo

El criterio 2.3.1 de WCAG 2.1 dice:

2.3.1 Umbral de tres destellos o menos: Las páginas web no contienen nada que destelle más de tres veces en un segundo, o el destello está por debajo del umbral de destello general y de destello rojo. (Nivel A)

Nota: En la medida en que cualquier contenido que no satisfaga este criterio puede interferir con la capacidad del usuario para emplear la página en su conjunto, todo contenido de la página web (tanto si satisface o no otros criterios de conformidad) debe satisfacer este criterio.

En Comprender 2.3.1: Umbral de tres destellos o menos se explica la razón de este criterio:

La intención de este Criterio de Conformidad es permitir a los usuarios un acceso completo al sitio sin provocarle convulsiones a causa de la fotosensibilidad. 

Los usuarios que sufren de desórdenes convulsivos por fotosensibilidad pueden sufrir ataques debido al contenido que destella varias veces con cierta frequencia. Algunas personas son aún más sensibles a los destellos rojos que a otros colores, por lo tanto se proporciona una prueba especial para los destellos con rojo saturado. Estas pautas estan basadas en la pautas para la industria televisiva adaptada a las pantallas de computadoras, donde el contenido es observado desde una menor distancia (con un mayor ángulo de visión).

Dos herramientas para medir el riesgo por fotosensibilidad y comprobar si un vídeo cumple con este criterio:

• Harding test.
• Photosensitive Epilepsy Analysis Tool (PEAT).

Nueva herramienta de accesibilidad de Firefox

Las herramientas de desarrollador del navegador Firefox han incorporado una nueva opción, Accessibility Inspector.

Esta herramienta permite acceder a la información de una página web que es expuesta a los productos de apoyo con los lectores de pantalla.

Simuladores en línea de daltonismo (ceguera de color)

Hace un par de meses se publicó en microsiervos el artículo Simuladores en línea de ceguera de colores. En el artículo se comentan dos simuladores:

• Vischeck
• Coblis

Y también un simulador de visión de bebé, Tiny Eyes.

PAVE: crea documentos PDF accesibles

PAVE es una herramienta gratuita que analiza la accesibilidad de los documentos PDF. En algunos casos es capaz de corregir automáticamente los problemas encontrados.

Herramienta para medir la legibilidad de un texto en inglés

Readability Grader es una herramienta que mide la legibilidad de un texto en inglés. Por ejemplo:

My tailor is rich and I am happy because I am poor.

Es un texto muy sencillo, su nivel de lectura es muy bajo, 2.36.

Sin embargo, este texto:

This theory rapidly became a significant and necessary tool for theorists and experimentalists in the new fields of atomic physics, nuclear physics, and quantum mechanics.

No lo entiende nadie, su nivel de lectura es 11.41.

YouDescribe y Amara

YouDescribe y Amara son dos herramientas muy útiles para lograr que los vídeos sean accesibles.

YouDescribe permite añadir una audiodescripción a cualquier vídeo publicado en YouTube. Por ejemplo (si no funciona el contenido embebido, navega a The Quiet Man - Kiss Scene):



Que se corresponde al vídeo:



Amara permite añadir subtítulos a cualquier vídeo publicado en YouTube. Por ejemplo, el siguiente vídeo tiene subítulos en 10 idiomas (si no funciona el contenido embebido, navega a  Honest Trailers - El Hombre de Acero):

Nueve herramientas para probar la accesibilidad de un sitio web

El artículo 9 herramientas para probar la accesibilidad de un sitio web comenta nueve herramientas que pueden ayudar a mejorar la accesibilidad de un sitio web:

• AChecker
• Color Oracle
• Photosensitive Epilepsy Analysis Tool
• NoCoffee
• Accessibility Developer Tools by Google
• Color Contrast Analyzer for Sketch
• Proof Setup in Adobe
• WAVE
• YouTube Closed Captioning

Herramienta para analizar el riesgo de epilepsia por fotosensibilidad

Hace un tiempo comenté una pauta de las Pautas de accesibilidad para el Contenido Web 2.0 (WCAG 2.0) que es un poco "extraña":

Pauta 2.3 Convulsiones: No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.

En mi entrada No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones comenté el famoso caso de la serie de dibujos animados Pokemon.

Álvaro, un lector de este blog, me ha avisado de la existencia de Photosensitive Epilepsy Analysis Tool (PEAT), una herramienta gratuita que evalúa el riesgo de producir ataques de epilepsia por fotosensibilidad en el contenido web.

Complemento para simular problemas visuales

NoCoffee Vision Simulator es un excelente complemento para Google Chrome que permite simular diferentes problemas de vision.

Por ejemplo, esta es la simulación de vista borrosa:

Y esta la simulación de bajo contraste:

Bookmarklets para evaluar la accesibilidad web

En Accessibility Bookmarklets hay una recuperación de bookmarklets (o favlets) que se pueden emplear para analizar la accesibilidad de una página web.

El siguiente vídeo explica su uso:

Herramienta para generar informes de accesibilidad

WCAG-EM Report Tool es una herramienta del W3C para generar informes de análisis de la accesibilidad web.

Emplea el formato empleado en Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0.

Lanzado Claws

En la Universidad de Alicante hemos desarrollado un complemento para Mozilla Firefox que emula (o simula) el comportamiento de un lector de pantallas como JAWS o NVDA.

Este complemento está inspirado en Fangs: Fangs Screen Reader Emulator

Fangs está muy bien, pero no ha sido actualizado desde hace años. El complemento que hemos desarrollado, Claws, tiene en cuenta las nuevas etiquetas de HTML5: Claws

Además, hemos incorporado algunas opciones que no posee Fangs.

Os animo a que lo probéis y nos indiquéis los errores y mejoras que podemos incorporar. Cualquier comentario me lo podéis enviar a sergio.lujan arroba ua.es

Extensión de Google para mejorar el contraste

Contraste alto (o Alto contraste) es una extensión oficial para Google Chrome que permite modificar el contraste de una página web. Desarrollada por Google Accessibility, permite aplicar diferentes combinaciones de contraste a un sitio web; esta extensión almacena la selección para cada sitio web, de forma que no se tiene que elegir cada vez que se visite un sitio web.

Este complemento se puede activar y desactivar fácilmente pulsando Mays+F11.

En la versión actual ofrece las siguientes combinaciones:

MODO NORMAL

CONTRASTE AUMENTADO

ESCALA DE GRISES

COLOR INVERTIDO

ESCALA DE GRISES INVERTIDA

AMARILLO SOBRE NEGRO

Análisis del contraste con Accessibility Developer Tools

En el artículo Easy Color Contrast Testing se explica cómo se puede emplear Accessibility Developer Tools, un complemento para el navegador Google Chrome para comprobar el contraste que existe entre los colores de una página web.

Herramientas de validación

Algunas herramientas online que permiten la validación de páginas web:

• W3C Markup Validation Service: el oficial del W3C, el de toda la vida.
• W3C Nu Markup Validation Service: un validador no basado en DTD como el oficial del W3C.
• Validator.nu: el validador original que sirve de motor del anterior.
• Nu Markup Validation Service Bookmarklets: un bookmarklet para el navegador que permite utilizar Validator.nu desde cualquier página que se esté visualizando.

Y un par de herramientas de validación que se han quedado un poco antiguas, pero que ofrecen algunas características interesantes:

• Validome
• WDG HTML Validator

Chromanope, otra herramienta para simular el daltonismo

Chromanope es un herramienta online que permite simular diferentes tipos de daltonismo.

Su funcionamiento es muy sencillo, simplemente se introduce la URL del sitio web que se quiere analizar y sólo hay que esperar unos segundos para ver la simulación.

Por ejemplo, aquí tenemos la simulación de una página de la Bolsa de Madrid:

Y aquí el detalle de las cuatro imágenes, podemos ver cómo los colores rojo y verde (el daltonismo más común, pero no el único) se confunden en algunas simulaciones, por lo que si las variaciones de precio no estuvieran también indicadas con un signo, sería imposible para una persona daltónica percibir la variación de un título de la bolsa.

Normal Vision:

Protanope:

Deuteranope:

Tritanope: (el rojo y el verde se pueden distinguir, tienen problemas con el azul)

FireEyes

FireEyes es una herramienta de evaluación que se instala como una extensión para el navegador Mozilla Firefox.

Es una herramienta muy interesante que está especialmente orientada a realizar test de accesibilidad con usuarios, ya que permite grabar la interacción que realiza un usuario con una página web. Por ejemplo, con esta herramienta podemos saber los eventos que se disparan y el contenido que cambia de forma dinámica (por ejemplo, con JavaScript y AJAX) en una página web cuando un usuario la está utilizando.

Además, permite realizar un análisis del contraste de los colores de la página y verificar el orden de lectura de la página.

La instalación es un poco compleja: no funciona con todas las versiones de Firefox y requiere tener instalado Firebug.

A continuación, un vídeo en el que se explican las características básicas de esta herramienta:

Accessibility Developer Tools

Accessibility Developer Tools es una extensión experimental para el navegador Google Chrome. Esta extensión añade algunas herramientas al Chrome Developer Tools. Básicamente, esta extensión añade dos opciones:

• Accessibility audit: verifica si se cumplen una serie de reglas sobre accesibilidad web.
• Accessibility sidebar: permite inspeccionar fácilmente las propiedades de un elemento de la página que son especialmente importantes de cara a la accesibilidad web.

Como es experimental, antes de instalarla hay que activar un flag especial en chrome://flags para que se pueda instalar.

Chrome Daltonize!

El daltonismo o ceguera al color es un defecto genético que afecta principalmente a los hombres y que produce como resultado una incapacidad para distinguir algunos colores entre sí. Aunque el problema principal y más conocido es la imposibilidad para distinguir el rojo y el verde, también existen otros tipos de combinaciones, aunque mucho más raras.

Chrome Daltonize! es una excelente extensión para el navegador Google Chrome que permite simular diferentes tipos de daltonismo sobre la página web que se está visualizando. Ofrece un menú muy sencillo en el que se puede seleccionar el tipo de ceguera al color y si se desea que se simule esa ceguera o si se desea que se filtren los colores para que una persona con esa deficiencia los pueda distinguir correctamente.

Por ejemplo, aquí tenemos la página del periódico El Mundo, con "la roja", y la bandera de Italia que es muy apropiada para comprobar el daltonismo, ya que tiene rojo y verde:

Cuando se simula el daltonismo, se obtiene este imagen:

El cambio es evidente: en la bandera de Italia es imposible distinguir el rojo y el verde, y "la roja", ya no es "la roja". Este simulador no logra cambiar todos los colores de la página, parece que sólo actúa sobre las imágenes.

Además, tiene un modo para ayudar a las personas daltónicas a distinguir mejor los colores que les puede producir confusión. Por ejemplo, esta es la misma página con los colores rojo y verde diferenciados para una persona daltónica: