Automatización de Pruebas de Accesibilidad con axe-core

La accesibilidad no debería ser un afterthought. Con las herramientas adecuadas, podemos detectar el 30% de problemas WCAG automáticamente.

Setup con Cypress

npm install --save-dev cypress-axe axe-core

// cypress/support/commands.js
import 'cypress-axe';

// cypress/e2e/a11y.cy.js
describe('Accessibility tests', () => {
  beforeEach(() => {
    cy.visit('/');
    cy.injectAxe();
  });

  it('Has no detectable a11y violations on load', () => {
    cy.checkA11y();
  });

  it('Has no violations after modal opens', () => {
    cy.get('[data-testid="open-modal"]').click();
    cy.checkA11y('.modal-content', {
      rules: {
        'aria-dialog-name': { enabled: true }
      }
    });
  });
});

Qué detecta axe-core

• Color contrast: Texto con contraste insuficiente
• ARIA: Roles, estados y propiedades incorrectos
• Form labels: Inputs sin labels asociados
• Focus management: Elementos focusables sin foco visible

Limitaciones

Solo detecta el ~30% de issues WCAG. Para el resto necesitas:

• Testing manual con teclado
• Screen readers (NVDA, VoiceOver)
• Validación cognitiva con usuarios reales

Conclusión

Automatizar accesibilidad es el primer paso. Nunca sustituye el testing con usuarios, pero previene regresiones costosas.