¿Cómo usar la herramienta de validación automática axe DevTools?

Introducción

aXe es una herramienta de comprobación automática de accesibilidad de páginas web que se integra al navegador mediante una extensión o que se integra en varios framework de prueba como Karma, Jasmine, Mocha, Qunit, etc. Los resultados de la evaluación son inmediatos y no presenta límite de uso diario.
aXe define reglas que son las que evalúa y las mismas están asociadas a los criterios definidos por la WCAG 2.1
Instalación

Para descargar la extensión desde Chrome te sugerimos ingresar a la página de Deque, acceder a la sección aXe y seleccionar la opción “Download axe”.

Para instalarla desde el navegador Firefox te sugerimos acceder al siguiente enlace: https://addons.mozilla.org/es/firefox/addon/axe-devtools/

axe DevTools

Una vez instalada la extensión de aXe en nuestro navegador, podemos acceder a la misma desde la ventana de “Herramientas de desarrolladores”. Para visualizarla seleccionamos la opción F12 desde nuestro teclado y quedaría visible el acceso en una nueva pestaña llamada “axe” que simplemente incluye el botón “Analyze” para verificar la página que estás visualizando.

El reporte de resultados de la evaluación automática se visualizan en inglés pero el mismo cuenta con una información muy detallada y documentación adicional que nos permite conocer como solucionar el problema detectado, criticidad del mismo y el tipo de situación de discapacidad que se ve afectado por el error.Los resultados se muestran de la siguiente forma:

En la zona izquierda se incluye el listado de errores y, por cada uno de ellos, el número de veces que se ha encontrado en la página.

Al pulsar en un tipo de error del listado izquierdo, en la zona derecha se muestra la descripción del error que consta de los siguientes elementos:

1. Paginación: Esta opción te permite navegar a través de los errores que se repiten en la página.
2. Impacto del error y Leer más: Cada tipo de error tiene asignado por defecto un nivel de criticidad y a través del link “Learn More” se puede acceder a la página de “Deque University” y consultar más detalles sobre su criticidad, que tipos de discapacidades se ven afectadas y alternativas para solucionar el error en la aplicación.
3. Descripción del error: Se visualiza una breve descripción del error detectado en la opción “Issue description”. Se indica donde se encuentre ubicado el elemento en la página desde la opción “Element location” y la fuente del elemento la podemos consultar desde la opción “Element source”.
4. Normativa: Se especifica la categoría en la que se encuentra el error detectado como: “name-role-value”, “color”, “forms”. El nive de conformidad se indica como “wcag2a” que significa WCAG 2.0 criterio de conformidad A y el criterio de conformidad se indica por ejemplo como “wcag242” que significa que se incumple con el criterio 2.4.2. Además se hace referencia a la pauta que se está incumpliendo relacionada a la “Section 508”.
5. Recomendaciones para solucionar el error: Para solucionar el error detectado se especifican las posibles soluciones que se pueden tomar en consideración, esto lo podemos visualizar desde la sección “To solve this violation, you need to:”.
6. Botón “Inspect Node”: Permite abrir la pestaña “Elements” de la “Herramienta de desarrolladores” quedando visualizado en el código el elemento que presenta el error.
7. Botón Highlight: Resalta en la interfaz de la aplicación el error detectado por la herramienta.

Conclusiones

aXe aboga porque sus pruebas automáticas no devuelvan falsos positivos, es decir que en la herramienta no se informen en los resultados de la evaluación automática errores que realmente no lo son. Existen muchas herramientas de evaluación automática que presentan este tipo de problemas y nos reportan errores que realmente no son válidos. Les recomendamos realizar una validación manual o apoyarse en otras aplicaciones de revisión automática ante cualquier duda que pueda surgir para comprobar si efectivamente es un error o un falso positivo.