Tu primera verificación de accesibilidad con Cypress

La accesibilidad, a menudo abreviada como a11y (porque hay once caracteres entre la "a" y la "y" en la palabra en inglés "accessibility"), trata de garantizar que un producto pueda ser usado por personas con una amplia gama de discapacidades: visuales, auditivas, motoras, del habla, cognitivas y neurológicas.

Importa desde el punto de vista ético, porque excluir a personas de un servicio es un daño real. También importa comercial y legalmente: la accesibilidad amplía tu público y ayuda a cumplir con regulaciones como las Pautas de Accesibilidad para el Contenido Web (WCAG), el Americans with Disabilities Act (ADA) y el European Accessibility Act (EAA).

¿Qué tan comunes son las fallas de accesibilidad?

Muy comunes. El estudio WebAIM Million, que analiza automáticamente las páginas de inicio del millón de sitios más visitados todos los años, encuentra de forma consistente que alrededor del 98% de las páginas de inicio tienen fallas de accesibilidad detectables. Y seis tipos de fallas representan la gran mayoría de ellas, las mismas seis en torno a las cuales se construyó este curso.

Lo que las pruebas automatizadas pueden (y no pueden) detectar

Vamos a detectar estas fallas con axe-core, un motor de accesibilidad que inspecciona una página renderizada y reporta violaciones de reglas. En este curso lo accionamos desde Cypress, vía el plugin cypress-axe.

👨🏻‍🏫 Las verificaciones automatizadas son una red de seguridad, no la historia completa. Según la documentación de axe-core, en promedio se puede encontrar cerca del 57% de las fallas de WCAG automáticamente. También señala algunos elementos como "incompletos", donde un humano necesita revisar. Las pruebas con lectores de pantalla, la navegación por teclado y el juicio de personas reales siguen importando. La automatización es un excelente punto de partida, no un reemplazo.

Tu primera verificación con Cypress y cypress-axe

Con cypress-axe, una verificación de accesibilidad tiene tres pasos: visitar la página, inyectar el motor de axe y luego ejecutar la verificación.

Visión general de los comandos 📖

describe

Agrupa casos de prueba relacionados en una suite de pruebas.

Sintaxis:

describe(name, callbackFn)

Ejemplo:

describe('Accessibility', () => {
  // test cases go here.
})

beforeEach

Ejecuta el callback informado antes de cada prueba (bloque it) dentro del mismo describe. Úsalo para configuraciones compartidas, como visitar la página, para que cada prueba comience desde el mismo estado limpio y predecible.

Sintaxis:

beforeEach(callbackFn)

Ejemplo:

beforeEach(() => {
  cy.visit('/')
})

it

Define un único caso de prueba dentro de una suite de pruebas.

Sintaxis:

it(name, callbackFn)

Ejemplo:

it('reports no violations', () => {
  // test implementation here.
})

cy.injectAxe()

Inyecta el motor axe-core en la página bajo prueba. Llámalo después de visitar la página y antes de cualquier verificación de accesibilidad.

Sintaxis:

cy.injectAxe()

Ejemplo:

cy.visit("/")
cy.injectAxe()

cy.checkA11y()

Ejecuta un análisis de accesibilidad en la página (o en parte de ella) y falla la prueba si se encuentra alguna violación.

Sintaxis:

cy.checkA11y(context, options)

Ejemplo:

// Check the whole page.
cy.checkA11y()

// Check only a region of the page.
cy.checkA11y(".page")

👨🏻‍🏫 Ambos argumentos son opcionales. Sin argumentos, cy.checkA11y() verifica la página entera. Pasar un selector como primer argumento restringe la verificación a esa región, lo que es útil cuando quieres enfocarte en un componente.

Contenido sugerido 📚

• cypress-axe en npm
• Descripciones de las reglas de axe-core
• El reporte WebAIM Million

Ejercicio 🎯

Con el servidor local ejecutándose, crea el spec cypress/e2e/a11y.cy.js y escribe una primera prueba que visite la aplicación Banco Simulado en su estado predeterminado (modo accesible apagado) y ejecute cy.checkA11y().

Ejecuta la prueba y lee la salida. Como el modo accesible está apagado, la verificación debería fallar y listar varias violaciones. No corrijas nada todavía, el objetivo de esta lección es simplemente ver las seis fallas reportadas por primera vez.

👨🏻‍🏫 Con las DevTools abiertas (pestaña Console) en el navegador de la Cypress App, haz clic en una de las entradas de error individuales del log de comandos (por ejemplo, a11y error! html-has-lang on 1 Node) para imprimir sus detalles en la consola:

Description:  Ensure every HTML document has a lang attribute
Help:         <html> element must have a lang attribute
Helpurl:      https://dequeuniversity.com/rules/axe/4.13/html-has-lang?application=axeAPI

Si la Cypress App no está abierta, usa el comando npx cypress open para abrirla.

Muéstrale al mundo lo que aprendiste 🌎

Para mostrarle a tu red profesional lo que aprendiste en esta lección, publica lo siguiente en LinkedIn.

Empecé el curso "Los 6 Problemas de Accesibilidad Más Comunes" con @Bruno Pulis en la escuela @Talking About Testing, donde ejecuté mi primera verificación automatizada de accesibilidad con cypress-axe y axe-core. #TalkingAboutTesting #TATSchool #A11yTesting #Cypress

👨🏻‍🏫 Recuerda mencionarme en tu publicación. Aquí está mi perfil de LinkedIn.