Reviewing the Accessibility Findings in the Tests
Previous7. Writing Accessibility Tests with Cypress AxeNextTesting Specific Elements with Cypress Axe
Last updated
Was this helpful?
Last updated
Was this helpful?
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
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.
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.
En la siguiente imagen podemos visualizar cual es la regla de accesibilidad que no se está cumpliendo dentro de la consola DevTools.
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.
Esta sección le permite al tester conocer la cantidad final de errores de accesibilidad encontrados durante las pruebas automáticas de Cypress.
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.
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.
