Pruebas y auditorías automatizadas de accesibilidad

La accesibilidad en diseño de productos y servicios digitales es una disciplina que se encuentra dentro del paraguas que es la Experiencia de Usuario. La accesibilidad es cómo hacemos más usables los productos y servicios que diseñamos para personas que tienen capacidades visuales, auditivas, de habla, motrices o cognitivas limitadas o inexistentes.

Igual que con la usabilidad, en accesibilidad debemos ser capaces de medir y analizar su implementación de manera cuantitativa para poder comparar con otros sitios y para establecer metas de calidad en un diseño.

Se puede hacer una revisión sencilla del nivel de accesibilidad de una página web utilizando herramientas de análisis automatizado, como Lighthouse, que viene incluida en Google Chrome:

1. Abre Google Chrome en tu computadora y abre una página ya existente que desees evaluar.
2. Da doble clic en el menú de opciones en la esquina superior del navegador, ve a la opción “Más herramientas” y después elige “herramientas de desarrollador”. 
3. Al abrirse la ventana con opciones de desarrollo, da clic en la flecha en el menú superior y da clic a la opción “Lighthouse”
4. Aquí es donde se encuentran las auditorías que puede realizar esta herramienta. Quita todas excepto “Accesibilidad”. Observa que puedes elegir correr la prueba para dispositivos móviles o para computadora de escritorio, porque tienen contextos de accesibilidad diferentes. 
5. Da clic en “Generar Reporte” y espera a que termine de analizar la página.
6. La herramienta dará un resultado numérico en el rango de cero a cien, indicando una estimación de la accesibilidad de la página, y algunas recomendaciones sobre cómo mejorarla para llegar al 100. 

Esta es una prueba sencilla, pero no es definitiva. Para hacer una auditoría completa de accesibilidad necesitamos ir a mayor profundidad.

Guías de Contenido Web Accesible

A diferencia de la usabilidad, la accesibilidad tiene reglas bien definidas que podemos evaluar durante el proceso de diseño de un producto o una vez que está terminado. Para sitios web, la principal referencia son las Guías de Contenido Web Accesible o Web Content Accessibility Guidelines que produjo el World Wide Web Consortium (la máxima autoridad en la web), también conocidas por sus siglas WCAG.

La guía de WCAG provee los criterios para hacer evaluaciones y auditorías de accesibilidad para sitios web y en general para cualquier producto digital. WCAG separa los criterios en cuatro categorías:

1. Percibible: La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de manera que puedan percibirlos con sus sentidos disponibles.
2. Operable: Los componentes de la interfaz de usuario y la navegación deben ser operables con los controles y medios disponibles al usuario.
3. Entendible: La información y el funcionamiento de la interfaz de usuario deben ser comprensibles para todos los usuarios.
4. Robusto: El contenido debe ser lo suficientemente sólido como para que pueda ser interpretado por una amplia variedad de clientes por el usuario, incluidas las tecnologías de asistencia de accesibilidad.

Los criterios de accesibilidad de WCAG se clasifican además en tres niveles de aceptación para satisfacer las necesidades de diferentes grupos de usuarios y de diferentes situaciones: A es el más bajo, AA es de rango medio y AAA es el más alto. 

El nivel A establece un nivel mínimo de accesibilidad y no logra una accesibilidad amplia para muchas situaciones. Por esta razón, se recomienda la conformidad con el nivel AA para sitios y aplicaciones que estén en la web.

Las guías de WCAG no recomiendan que se aplique de manera rigurosa con el Nivel AAA de accesibilidad para sitios completos porque es muy difícil satisfacer todos los criterios de éxito del Nivel AAA para algunos contenidos.

Para poder realizar una auditoría de accesibilidad en un sitio web, es decir, medir su nivel de implementación de las recomendaciones de WCAG y hacer recomendaciones para hacerla más accesible, primero es necesario entender qué es lo que estamos buscando en el análisis para cada uno de los criterios.

Perceptible

Para revisar que un sitio cumple los criterios de ser perceptible debemos preguntarnos:

1. ¿Todas las imágenes importantes tienen atributos de texto alternativo?
   Las imágenes importantes que transmiten contenido o información importante deben tener el atributo de contenido alternativo (o alt) que comunica el mismo contenido o información que la imagen en forma escrita. Imágenes como iconos o decorativas no necesitan tener atributos alt ext. Este criterio afecta a personas con discapacidades visuales o auditivas.

2. ¿El contenido de video tiene subtítulos cerrados, subtítulos abiertos o una transcripción disponible?
   Todos los subtítulos o transcripciones deben transmitir toda la información y el contenido incluido en el video. Este criterio afecta a personas con discapacidades visuales o auditivas.

3. ¿Se usa solo el color para transmitir significado o información?
   El color por sí solo nunca debe usarse para transmitir significado o información.  Este criterio afecta a personas con discapacidades visuales.

4. ¿Tiene el sitio una relación de contraste de al menos 5: 1 entre el color del texto y el color de fondo?
   Es necesaria una relación de contraste de al menos 5:1 para que los usuarios con discapacidad visual parcial puedan leer el texto y distinguir el contenido. Existen herramientas gratuitas para evaluar el contraste en una imagen. Utilizando la herramienta de validación de contraste de a11y.com realiza una evaluación de los colores de un sitio web ya existente que estés evaluando. ¿Qué resultados te da? ¿Qué recomendaciones harías para ajustar los colores y hacer la página más accesible?

5. ¿El contenido de video y audio está configurado para que no se reproduzca automáticamente?
   El contenido de video y audio que se reproduce automáticamente puede distraer a algunos usuarios con deterioro cognitivo. Para otros usuarios puede ser una distracción molesta.

6. ¿El contenido no está restringido a una sola orientación?
   El contenido debe poder verse vertical u horizontalmente sin pérdida de información o impacto al utilizar dispositivos que ajustan la pantalla con el movimiento, particularmente dispositivos móviles. Este criterio afecta a personas con discapacidades motrices.

Operable

Los criterios que debemos revisar para que el sitio sea operable incluyen:

1. ¿Es posible navegar a todos los enlaces en una página usando solo el teclado?
   Pasar las pruebas de navegación con el teclado es un umbral importante para aquellos con problemas de motricidad fina habilidades. Este criterio afecta a personas con discapacidades motrices.

2. Para las páginas con un formulario de búsqueda, ¿es posible navegar a todos los campos del formulario de búsqueda y enviar un buscar usando solo el teclado?
   Pasar las pruebas de navegación con el teclado es un umbral importante para aquellos con problemas de motricidad fina habilidades. Este criterio afecta a personas con discapacidades físicas.

3. ¿Los atajos de teclado -o shortcuts- están configurados adecuadamente para la navegación y las ventanas modales?
   Pasar las pruebas de navegación con el teclado es un umbral importante para aquellos con problemas de motricidad fina habilidades. Este criterio afecta a personas con discapacidades motrices.

4. ¿Hay algún contenido intermitente en el sitio?
   El contenido intermitente puede presentar un riesgo de convulsiones y no se considera una buena práctica de UX en ningún caso. El contenido intermitente debe evitarse en todas las circunstancias en consideración de los usuarios con deterioro cognitivo.

5. ¿Hay formas de desactivar la activación por movimiento o métodos alternativos para activar la funcionalidad disponible mediante accionamiento por movimiento?
   Es posible que las personas con temblores o función motora limitada no puedan aprovechar esta funcionalidad, o puede desencadenarla inadvertidamente, por ejemplo, movimientos involuntarios del ratón o doble presión de las teclas de teclado. Este criterio afecta a personas con discapacidades motrices.

Comprensible

Los criterios para que el sitio sea Comprensible:

1. ¿El sitio contiene términos, palabras inusuales, acrónimos o abreviaturas sin proporcionar una manera para identificarlas y definirlas?
   Estos elementos pueden ser difíciles de entender y comprender para aquellos con discapacidades de aprendizaje u otras discapacidades cognitivas, como pérdida de la memoria a corto plazo. Si se utilizan estos términos, se debe agregar una manera de definir el significado de cada uno, por ejemplo, agregar un enlace a una definición en un diccionario.

2. ¿El contenido de la página está escrito a no más de un nivel de lectura de escuela secundaria?
   Haz una revisión del contenido del sitio web. Si el nivel de legibilidad no lo podría entender un estudiante de secundaria es necesario actualizar el contenido reduciendo el número de palabras por oración y el número de oraciones por párrafo.  Este criterio afecta a personas con discapacidades cognitivas.

3. ¿Los formularios tienen etiquetas, instrucciones y un buen manejo de errores?
   Es necesario que el diseño de un formulario sea el adecuado para facilitar su uso a usuarios con ciertas discapacidades de aprendizaje.

4. ¿Se proporciona contenido de ayuda?
   El contenido de ayuda es necesario para facilitar el uso de determinadas dificultades de aprendizaje. Este criterio afecta principalmente a personas con discapacidades cognitivas.

Robusto

El último criterio es que el contenido sea robusto:

1. ¿El destino y el contexto de cada enlace son claros cuando se leen fuera de contexto?
   El texto de los enlaces debe ser descriptivo del destino y el contenido para facilitar su uso con lectores de pantalla que convierten el texto digital en audio y otra tecnología de apoyo para usuarios con impedimentos visuales y físicos.

2. ¿El contenido de cada sección está claramente definido con un encabezado que tiene sentido cuando se lee el contenido?
   Muchos lectores de pantalla y tecnología de apoyo permiten realizar navegación saltando desde un encabezado a otro. Cada sección de contenido debe tener un encabezado que describa el contenido cuando se lee fuera de contexto.  Este criterio afecta a usuarios con discapacidades visuales y físicas.

3. ¿Tienen sentido las dos primeras oraciones de cada párrafo cuando se leen fuera de contexto? 
   Muchos lectores de pantalla y la tecnología de apoyo permiten la navegación saltando de un párrafo a otro. Cada párrafo de contenido debe tener oraciones temáticas sólidas que describan el contenido del párrafo cuando se lee fuera de contexto. 

4. ¿Los botones se utilizan solo para completar una acción, como enviar un formulario? 
   Los botones solo deben utilizarse para completar acciones y nunca para la navegación. 

5. ¿Los enlaces que solo se utilizan para la navegación?
   Los enlaces nunca deben usarse para completar una tarea. Esto puede causar errores en los navegadores web con lectores de voz o tecnología de apoyo que utilizan personas con discapacidades visuales y físicas.

La organización Web AIM hizo una versión de estos criterios en forma de una lista, agregando los criterios de aceptación A, AA y AAA. Puedes revisarlos en su sitio web.

Por supuesto, es posible hacer una revisión manual de cada uno de estos criterios, pero sería en extremo tardado. Una manera más sencilla es usar una herramienta automatizada como WAVE, también creado por Web AIM.

Para hacer un análisis a profundidad de una página web ya existente con WAVE:

1. Ve al sitio web de WAVE en https://wave.webaim.org/ 
2. Escribe la dirección de un sitio web ya existente en la caja de texto y avanza
3. WAVE mostrará una vista previa de la página con varios iconos sobrepuestos, indicando un tema de a11y a revisar. El panel a la izquierda tiene más información sobre la evaluación de los criterios de contenido accesible.
4. Al dar clic en uno de los iconos, se colocará sobre él una caja indicando que tipo de problema de accesibilidad ha detectado. Al dar clic en “Referencia” se mostrará en el panel de la izquierda qué es lo que este error significa, por qué es importante y una sugerencia sobre cómo arreglarlo para mejorar la accesibilidad de la página. Al final del texto se encuentra una referencia a la recomendación específica a la que hace referencia.
5. La opción de “encender” o “apagar” los estilos nos da una idea más clara de como “ve” un lector de pantalla el contenido. Así podemos revisar si el flujo del contenido tiene sentido sin el diseño de interfaz.

Por supuesto, hay muchas más herramientas para hacer una evaluación de accesibilidad de un sitio web o de apps para móviles. En el sitio de W3C de Herramientas para Evaluación de Accesibilidad sobre hay una lista de muchas otras herramientas, plugins y aplicaciones que se pueden usar para hacer diferentes análisis y evaluaciones de a11y.

Date tiempo de revisarla, entre más uses estas herramientas mejor comprenderás los conceptos y las posibles soluciones para hacer páginas más accesibles para todos.