La accesibilidad ha cogido mucho protagonismo, especialmente en los últimos años, en el campo del diseño web. Ello no debería ser signo de sorpresa ya que cada vez predomina más población con discapacidad auditiva o visual, entre otras tantas. Precisamente los diseñadores juegan un papel fundamental a la hora de encontrar contenidos web que puedan ser consumidos por cualquier persona, independientemente de si tiene o no discapacidad.

Hoy queremos ayudaros en el camino hacia el diseño web accesible. Os presentamos distintas herramientas para ejecutar auditorías o test de accesibilidad web sencillos en tus portales y contenidos.

Herramientas para medir la accesibilidad web:

Youtube Closed Captioning

En la actualidad hay muy pocas herramientas que autorizan a los diseñadores y desarrolladores a acceder aspectos auditivos de contenido web. Pese a que la misma no es una herramienta de evaluación, Youtube de forma nativa ofrece un recurso que puede ayudar a aumentar la accesibilidad dentro de tu contenido de vídeo. Igualmente, el subtitulado opcional permite mostrar tu contenido de video a un público más amplio, específicamente para aquellos con problemas de audición, o aquellos que hablan idiomas distintos. Además, si utilizas YouTube para alojar o insertar contenido de video, puedes aprovechar la transcripción manual y funcionalidades de subtítulos dentro de Video Manager.

Color Contrast Analyzer for Sketch

Esta te permitirá poner a prueba la accesibilidad de tus diseños para los usuarios que son daltónicos, mientras trabajas directamente dentro de Sketch. La herramienta te da la capacidad de calcular la relación de contraste de color de dos capas (o una sola capa contra el área de diseño) y evaluarlo contra las normas WCAG. Después de completar la prueba, el plugin te dará resultados positivos o negativos de calificación basados en los requisitos WCAG AAA y AA de contraste de color.

Proof Setup in Adobe

Es una herramienta muy parecida a la anterior con la cual Adobe ha tomado medidas necesarias para incluir pruebas de accesibilidad para daltónicos dentro de su software de Ilustrator o de Photoshop. Sus filtros permiten ver cómo será el diseño para los usuarios de distinto daltonismo, protanopía y sobre todo deuteranopía.  Si queréis simular daltonismo, en el diseño, accede al menú, pulsa “Ver > configuración Proof > Color Blindness” y selecciona protanopía o deuteranopía. Una vez más, otra gran solución para la evaluación de la accesibilidad de tu diseño a medida que trabajas.

‘Wave’

Otra herramienta gratuita diseñada para facilitar la revisión de la accesibilidad web proporcionando a los desarrolladores una representación visual de problemas directamente en su página. Respecto a las pruebas integrales, estas evalúan varios problemas de accesibilidad, que incluye el contraste de colores a los atributos ARIA y se basan en las normas de cumplimiento tanto de WCAG como la Sección 508. Esta herramienta basada en el navegador evalúa el contenido de la página después de aplicar CSS, pero no evalúa ninguna fuente de Javascript. Si tu sitio tiene una gran cantidad de contenido dinámico a partir de secuencias de comandos, puedes optar por la extensión WAVE para Chrome, que también cuenta con el 100% de seguridad y presentación de informes, es ideal para la evaluación de sitios protegidos por contraseñas, como portales de comercio e intranets.

NoCoffee

Se trata de una extensión gratis de Google Chrome que se puede utilizar para simular una amplia gama de problemas visuales entre los cuales se encuentran el daltonismo, la baja agudeza, la baja sensibilidad al contraste, los campos visuales obstruídos y otros tantos. Hay que mencionar que NoCoffee no necesariamente evaluará y calificará tu sitio web como otras herramientas, aunque sí te proporcionará una perspectiva única de la experiencia que tienen los usuarios con discapacidades visuales con tu sitio.

ACheker

Una herramienta de revisión de accesibilidad integral que usa HTML para evaluar el contenido de una sola página. Puedes poner a prueba tu página web insertando la URL, subiendo un archivo HTML o pegando el código fuente directamente en la herramienta. Después de enviar tu página, AChecker escanea el código HTML de forma rápida y genera un informe que identifica posibles problemas de accesibilidad. Existen algunas consultas adicionales que pueden funcionar en ‘AChecker’, incluyendo validadores de HTML y CSS, pero encontrarás mucho sobre la accesibilidad de tu sitio mediante la ejecución del procedimiento de diagnóstico estándar.

Photosensitive Epilepsy Analysis Tool

Herramienta gratuita beta que permite probar el contenido para identificar el riesgo de convulsiones usando un motor de análisis construido por Trace Center de la universidad de Wisconsin Madison. El proceso ayuda a determinar si las animaciones o videos que se utilizan dentro de tu contenido web son susceptibles a causar convulsiones a los usuarios con epilepsia. Si estás en busca de más herramientas, Trace Center tiene otros recursos para ayudar a los desarrolladores a evaluar la accesibilidad de su trabajo.

Accesibility Developer Tools

Es una extensión de Google Chrome. Este agrega una auditoría de accesibilidad integral y el panel de la barra lateral dentro de las herramientas de desarrollo de Google (Google Developer Tools GDT). La misma tiene que instalar la barra GDT para ejecutar la auditoría, pero es un proceso sencillo: solo tienes que tener tu página abierta en Chrome, ir al panel de accesibilidad en Developer Tools y dar clic en ejecutar. La auditoría te ayudará a identificar errores de accesibilidad, incluyendo la falta de atributos ARIA, valores de contraste de color y mucho más. Puedes leer la lista completa de las normas de auditoría o sugerir nuevas características mediante la revisión de extensiones github.

Color Oracle

Esta aplicación gratuita simula diversas formas de daltonismo mediante la adición de un filtro de pantalla completa a través de tu sistema operativo (sí, funciona con Windows, Mac OS y Linux). Las opciones de filtro muestran las formas más graves del daltonismo: deuteranopía, protanopía y tritanopia. Si el diseño pasa con estos filtros, entonces sabrás que también será fácilmente legible por las personas con daltonismo. Considerando que se puede activar estos filtros sobre la marcha, esta es la herramienta perfecta para los diseñadores visuales que quieren evaluar sus diseños a medida que trabajan.

Para los desarrolladores de contenido digital, de cara a incluir el componente de accesibilidad en sus productos, os recomendamos estas simples herramientas. Y si quieres ir un paso más adelante os invitamos a que visitéis:

• Explorar las listas de chequeo creadas por Vox Media que permiten realizar un chequeo de accesibilidad según tu rol en el proyecto.
• Visitar el sitio web de Web Accesibility Initiative de la W3C que explica en profundidad esta temática, comparte buenas prácticas y ofrece ejemplos útiles sobre la accesibilidad web.
• Conoce la herramienta Rastreador OAW, una aplicación de código abierto desarrollada por el gobierno de España que permite analizar el nivel de accesibilidad de una página web.
• Descubre como mejorar la Accesibilidad Web de un ecommerce