Reviewing the Accessibility Findings in the Tests

En el capítulo anterior aprendimos cómo crear y ejecutar un proyecto de pruebas automáticas de accesibilidad.

Ahora vamos a comprender como leer los hallazgos de accesibilidad detectados por Cypress-Axe

A11y Error!

Despues de ejecutar el Cypress Runner, se abre una ventana del navegador donde se ejecuta automáticamente las pruebas. Lo primero que vamos a encontrar al lado izquierdo es el Test Body de ejecución de las pruebas, y así mismo se presenta visualmente los errores encontrados durante la ejecución de las pruebas.

Axe-Core ejecuta internamente las reglas de accessibilidad y presenta luego un informe de errores de accesibilidad encontrados llamado a11y error.

Como testers, debemos comprender qué significan estas diferentes infracciones para poder explicárselo a nuestro equipo de desarrollo con mayor claridad. ✅

Lo bueno de Cypress-Axe es que brindan más información sobre estas diferentes infracciones, y podemos hacerlo abriendo la consola DevTools para desarrolladores, que mostraré en breve.

Ejecución de las pruebas de accesibilidad usando Cypress-Axe

Hagamos clic en el primer error de accesibilidad, que está relacionada con el nombre del botón. (a11y error! button-name)

Como puede notar, después de hacer clic en el error, se imprimen registros adicionales en la consola.

Para visualizar la descripción del error de accesibilidad, vamos a hacer click derecho sobre el error e inspeccionamos el elemento abriendo la consola de DevTools para desarrolladores. 🛠️

En la siguiente imagen podemos visualizar cual es la regla de accesibilidad que no se está cumpliendo dentro de la consola DevTools.

Información de la consola en DevTools sobre los errores de accesibilidad

Como se puede observar en la imagen arriba, en este caso se trata de garantizar que haya suficiente información sobre el error de accesibilidad para que sea revisado por los desarrolladores a través de los tags de Id, Impact, Tags, Description, Help, Helpurl. Toda esta información relevante son caracteristicas de Axe-Core que le permite al tester tener datos sobresalientes para la solución del problema.

Assertion Error

Esta sección le permite al tester conocer la cantidad final de errores de accesibilidad encontrados durante las pruebas automáticas de Cypress.

7 accessibility violations were detected: expected 7 to equal 0

Axe-Core también proporciona una URL de ayuda, en la que puede hacer clic directamente, y esto debería redirigirlo a la página oficial de ayuda, que contiene información relevante de cómo solucionar el problema.

https://dequeuniversity.com/rules/axe/4.3/button-name?application=axeAPI