Herramientas de accesibilidad para diseñadores
Accesibilidad aplicada al diseño de producto digital significa que estamos diseñando y desarrollando productos que pueden ser utilizados por cualquier tipo de usuario, independientemente de si tiene discapacidades visuales, motrices, de habla o cognitivas.
Hay muchos mitos alrededor del diseño accesible, pero destacan dos. El primero, que es demasiado costoso y, el segundo, que limita la creatividad porque hay que tener en cuenta muchos parámetros.
El tema es que ninguno de las dos es cierto. Diseñar de forma accesible es lo que deberíamos estar haciendo todos los diseñadores, ya que si un producto no es accesible, entonces no será usable.
Por mucho que nos pongamos cabezon@s.
En este artículo he recopilado las herramientas que más utilizo para comprobar si lo que se ha diseñado es accesible y se implementa correctamente.
Accesibility Developer Tools (Chrome)
Google Chrome ofrece de forma nativa un panel que te dará información sobre la accesibilidad de una página web.
Al igual que te permite hacer Auditorías de rendimiento, SEO… ahora también te dará datos sobre la accesibilidad.
Simplemente entra en cualquier página web, haz clic encima de cualquier elemento con el botón secundario del botón y selecciona «Inspeccionar». En el panel de la derecha te saldrá la opción de «Accesibilidad».
WAVE
Esta extensión la he utilizado bastante, ya que muestra de una forma muy clara dónde no se está cumpliendo con las pautas de accesibilidad, qué no se está cumpliendo y cómo se podría resolver.
El único fallo que le encuentro es que a veces la explicación de la solución es poco concreta y no permite tomar acción inmediata.
Naturalmente, algunos aspectos sólo se corresponden a la parte de desarrollo, pero también te dará información sobre el contraste de colores y diseño de los enlaces.
aXe
Es otra extensión parecida a WAVE. La interfaz es un poco más agradable y está mucho más integrado con el inspector del navegador.
Con aXe podrás ver qué pauta no se cumple, si es grave o no (es decir, si hay que corregirlo “ya” o “en algún momento”) y cómo solucionarlo. Esta vez sí, de forma clara.
WCAG Contrast checker
Si quieres centrarte exclusivamente en solucionar los problemas de contraste de color, esta extensión cumplirá tus expectativas.
Disponible para Chrome y Firefox, instalando WCAG Contrast Checker podrás comprobar si hay suficiente contraste entre fondo y tipografía .
Color Contrast Analyzer
Esta extensión también ofrece información sobre el contraste, pero lo hace mostrando una previsualización que muestra claramente qué elemento tiene suficiente contraste y cuáles no.
La ventaja respecto a otras extensiones es que también te permitirá evaluar un documento PDF si lo abres con Chrome.
La información que te da esta página es sencilla: si se muestra el perfil y las tipografías en blanco, es que tienen suficiente contraste.
NoCoffee
Debo reconocer que la primera vez que probé esta extensión aluciné. No era consciente de la cantidad de problemas de visión que se pueden tener y cómo afectan realmente a la percepción de los elementos.
Con NoCoffee podrás simular prácticamente cualquier discapacidad visual, desde visión “un poco borrosa” a daltonismo, cataratas o baja agudeza visual. Esta última te hará ver lo problemáticos que son los “enlaces pequeños” o las áreas interactivas pequeñas.
Lectores de pantalla del sistema
Una de las formas de simular cómo una persona con discapacidad visual interactúa con una página web es utilizando los lectores de pantalla.
- Mac y iOS > VoiceOver (actívalo con CMD + F5)
- Windows > Narrator (logo de Windows + Control + Intro)
Una vez lo tengas activo, navega por la página web utilizando exclusivamente los controles que las herramientas te permiten.
Comprenderás cómo es navegar por una página web utilizando solo el tabulador y cómo de importante es que los titulares (h1, h2, h3…) estén bien estructurados en el código y los textos tengan sentido por sí solos.
