Lección 3 de 12 · Lectura y práctica
Herramientas de Auditoría de Accesibilidad
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.
Esta es una lección del contenido anterior de Cursalo. Si ya estudiaste o compraste este curso, entra con tu cuenta para guardar tu progreso y abrir el resto de las clases. No necesitas comprar nada de nuevo.
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.