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.
Del concepto a la práctica
Taller de esta lección
Ejemplo resuelto
El analizador automático de una página detecta dos campos sin etiqueta y una imagen sin alternativa. Después, el recorrido manual descubre que el selector de fecha no se puede cerrar con teclado. Son cuatro incidencias distintas. Corregir las tres primeras y obtener cero avisos automáticos deja la cuarta abierta; por eso el informe necesita registrar el método usado para cada hallazgo.
Pruébalo
Elige una sola página y una tarea, como reservar una sala.
Ejecuta la herramienta disponible y guarda su informe antes de editar.
Recorre el mismo flujo con Tab, Mayús+Tab y los controles pertinentes.
Corrige una incidencia, vuelve a ejecutar su prueba y adjunta evidencia.
El error frecuente es convertir el número de avisos en un porcentaje de accesibilidad. Las herramientas no evalúan todas las necesidades ni la claridad de todas las alternativas.
Comprueba tu resultado
Entrega un registro de cuatro incidencias con método, pasos de reproducción, estado y resultado esperado. Una incidencia solo figura como cerrada si una repetición de la prueba confirma su corrección; las demás permanecen abiertas.
Mapa de prácticaEl texto alternativo comunica el propósito de una imagen. La navegación por teclado necesita un foco visible; los campos necesitan etiquetas y la página una estructura semántica. Estas comprobaciones ayudan a detectar barreras y no sustituyen una auditoría completa.
Ver la infografía en tamaño completo ↗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.
Sigue con Accesibilidad Web (WCAG)
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.