Introducción
Validar la accesibilidad de una web es fundamental para cumplir WCAG AA y ofrecer una experiencia inclusiva a todos los usuarios.
En este artículo aprenderás a usar Axe y Pa11y, dos herramientas gratuitas para auditar la accesibilidad de tu página de forma manual y automática.
Índice
- 1. ¿Qué son Axe y Pa11y?
- 2. Cómo usar Axe en el navegador
- 3. Cómo usar Pa11y por línea de comandos
- 4. Ejemplo de salida y errores comunes
- 5. Integración en flujos CI/CD
- 6. Buenas prácticas
- 7. Conclusión
1. ¿Qué son Axe y Pa11y?
- 🔍 Axe: Extensión para navegador Chrome/Firefox. Revisa accesibilidad de forma visual mientras navegas.
- ⚙️ Pa11y: Herramienta de línea de comandos para ejecutar tests automatizados y generar reportes en texto o HTML.
2. Usar Axe en el navegador
- Instala la extensión Axe DevTools desde la Chrome Web Store.
- Abre tu web y entra a las DevTools (F12).
- Haz clic en la pestaña “Axe DevTools” y pulsa “Analyze”.
- Revisa el listado de errores y sugerencias visualmente.
3. Usar Pa11y por CLI
Instala Pa11y globalmente:
npm install -g pa11y
Ejecuta una auditoría:
pa11y https://tuweb.com
Para reportes más detallados:
pa11y https://tuweb.com --reporter html > reporte.html
4. Ejemplo de salida
| Error | Descripción |
|---|---|
| Color Contrast | Contraste insuficiente entre texto y fondo |
| Missing Label | Campo de formulario sin etiqueta vinculada |
| Link Name | Enlace sin texto visible |
5. Integración en CI/CD
Puedes ejecutar Pa11y automáticamente en cada deploy usando scripts o integrarlo en pipelines de CI/CD.
pa11y-ci --config .pa11yci.json
🔑 Esto permite detectar errores antes de lanzar cambios a producción.
6. Buenas prácticas
- ✅ Ejecuta validaciones regularmente, no solo una vez.
- ✅ Complementa con revisiones manuales (teclado, lectores de pantalla).
- ✅ Documenta y prioriza la corrección de errores críticos.
7. Conclusión
Axe y Pa11y son soluciones prácticas para auditar accesibilidad de forma continua. Te ayudan a cumplir WCAG AA, mejorar SEO y ofrecer una web para todos.
📩 ¿Quieres que hagamos una auditoría completa? Contáctanos.