Volver al curso

Accesibilidad Web (WCAG)

lección
3 / 6
intermediate
10 horas
Fundamentos de Accesibilidad

Herramientas de Auditoría de Accesibilidad

Lectura
12 min~2 min lectura

Auditar y Mejorar la Accesibilidad de tu Sitio

No puedes mejorar lo que no puedes medir. Existen herramientas excelentes (muchas gratuitas) que te permiten detectar problemas de accesibilidad automáticamente. Pero recuerda: las herramientas automatizadas solo detectan el 30-40% de los problemas — la revisión manual es igualmente importante.

Herramientas automatizadas (gratuitas)

  • Lighthouse (Chrome DevTools): auditoría de accesibilidad integrada en el navegador — abre DevTools → pestaña Lighthouse → Run
  • axe DevTools (extensión de Chrome): escanea la página y lista problemas con explicación y solución sugerida
  • WAVE (wave.webaim.org): herramienta web que analiza cualquier URL pública y muestra los problemas visualmente
  • Pa11y: herramienta CLI para integrar auditorías de accesibilidad en tu pipeline de CI/CD
  • ESLint Plugin jsx-a11y: detecta problemas de accesibilidad directamente en tu código React mientras programas

Pruebas manuales esenciales

  • Navegación por teclado: desconecta el mouse y navega tu sitio solo con Tab, Enter y Escape — ¿puedes hacer todo?
  • Lector de pantalla: activa VoiceOver (Mac) o NVDA (Windows) y navega tu sitio — ¿la información tiene sentido sin ver la pantalla?
  • Zoom al 200%: amplia la página al 200% — ¿el contenido sigue siendo legible y funcional sin scroll horizontal?
  • Contraste checker: usa WebAIM Contrast Checker para verificar que todos los textos cumplen el ratio mínimo
  • Prueba sin color: pon tu pantalla en escala de grises — ¿puedes entender toda la información sin color?

Integrando accesibilidad en tu flujo de trabajo

  • Design review: antes de desarrollar, revisa los mockups con un checklist de accesibilidad
  • Code review: incluye criterios de accesibilidad en tu checklist de code review
  • CI/CD: integra axe-core o Pa11y en tu pipeline para detectar regresiones automáticamente
  • QA manual: incluye pruebas de teclado y lector de pantalla en tu proceso de testing
  • Métricas: trackea tu score de Lighthouse de accesibilidad y establece un mínimo aceptable (95+)
Consejo: Ejecuta Lighthouse ahora mismo en tu sitio web. El score de accesibilidad te dirá exactamente qué problemas tienes y cómo solucionarlos. Es el primer paso más rápido que puedes dar.