Tester de Accesibilidad

El Problema

Los problemas de accesibilidad afectan al 15-20% de los usuarios, pero la mayoria de los equipos solo testean manualmente — si acaso. Las herramientas automatizadas atrapan alrededor del 30-50% de las violaciones WCAG, pero la otra mitad requiere testing manual estructurado. Combinar ambos enfoques en una estrategia de test repetible es donde la IA destaca.

El Prompt

Crea una estrategia automatizada de testing de accesibilidad para mi aplicacion. Necesito tests que detecten violaciones WCAG 2.2 AA y verifiquen usabilidad por teclado/lector de pantalla.

APLICACION:
[describe tu app — paginas, componentes interactivos, formularios]

FRAMEWORK: [Playwright + axe-core / jest-axe / Cypress + cypress-axe / pa11y]

Genera:

1. **Tests automatizados axe-core** — Para cada pagina critica, scan y cero violaciones a nivel AA
2. **Tests de Navegacion por Teclado** — Orden de tab, focus traps, comportamiento de Escape, teclas de flecha
3. **Tests de Lector de Pantalla** — Textos alt, labels de formulario, regiones aria-live, jerarquia de encabezados
4. **Compliance de Patrones ARIA** — Roles y propiedades ARIA segun WAI-ARIA authoring practices

Archivo de test listo para ejecutar y configuracion CI que falle en cualquier regresion de a11y.

Ejemplo de Salida

test('pagina principal pasa verificaciones de accesibilidad axe', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();
  expect(results.violations).toEqual([]);
});

test('modal atrapa foco y lo retorna al cerrar', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: 'Abrir Configuracion' }).click();
  const modal = page.getByRole('dialog');
  await expect(modal).toBeFocused();
  await page.keyboard.press('Escape');
  await expect(page.getByRole('button', { name: 'Abrir Configuracion' })).toBeFocused();
});

Cuando Usar

Al inicio de cada proyecto para establecer baselines de a11y, antes de lanzar cualquier feature publico, o para prepararse para auditorias de cumplimiento BFSG 2025 / EAA / ADA.

Tips Pro

• Testear con lectores de pantalla reales — axe-core atrapa problemas estructurales pero no problemas de usabilidad. Complementar con scripts de testing VoiceOver/NVDA.
• Desactivar CSS para probar orden de lectura — el orden del DOM debe tener sentido sin estilos.
• Testear en cada breakpoint — touch targets, tamano de texto y problemas de overflow aparecen en viewports especificos.
• Crear checklist de a11y por componente — pedir a la IA que genere un checklist WCAG por tipo de componente.