Análisis con axe DevTools y Lighthouse
Realice auditorías rápidas directamente en el navegador.
Análisis con axe DevTools y Lighthouse es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Dos herramientas en su navegador
No necesita una configuración especial para empezar a auditar. Tanto axe DevTools como Lighthouse se ejecutan directamente en Chrome y analizan la página que ya está viendo.
Conozca axe DevTools
La extensión axe DevTools añade una pestaña a las herramientas de desarrollo del navegador. Con un clic se ejecuta el motor axe-core y se enumeran los problemas de accesibilidad de la página.
Cómo leer un resultado de axe
Cada hallazgo indica la regla incumplida, muestra el elemento exacto, evalúa el impacto y enlaza a una guía que explica cómo corregirlo. No es necesario adivinar.
Resalte el elemento problemático
axe DevTools puede resaltar el elemento que falla directamente en la página. Así resulta evidente qué botón o imagen activó la advertencia.
Los niveles de impacto orientan la prioridad
axe etiqueta cada problema con un nivel de impacto: minor, moderate, serious o critical. Empiece por critical y serious para corregir primero los obstáculos más importantes.
Conozca Lighthouse
Lighthouse está integrado en Chrome DevTools. Su categoría de accesibilidad también ejecuta axe-core internamente y le proporciona una única puntuación sobre cien.
Ejecute una auditoría de Lighthouse
Abra el panel Lighthouse, marque Accessibility y haga clic en Analyze page load. En cuestión de segundos obtendrá una puntuación y una lista agrupada de las auditorías fallidas.
La puntuación no es el objetivo
Una puntuación de cien en Lighthouse resulta alentadora, pero solo refleja las comprobaciones que puede automatizar. Considérela un mínimo, nunca una prueba de accesibilidad completa.
Lighthouse desde la línea de comandos
También puede ejecutar Lighthouse fuera del navegador. Instálelo con npm e indique cualquier URL para generar un informe que pueda compartir.
npx lighthouse https://example.com --only-categories=accessibilityaxe frente a Lighthouse
axe DevTools ofrece información más detallada y reglas de buenas prácticas; Lighthouse proporciona una puntuación rápida en varias categorías. Ambos comparten el motor axe-core, por lo que suelen coincidir.
Analice pronto y con frecuencia
Ejecute un análisis rápido mientras desarrolla, no solo antes de publicar. Detectar una etiqueta ausente ahora es mucho más barato que rastrear su origen más adelante.
Comprobación rápida
Recuerde qué tienen en común estas dos herramientas del navegador.
Repaso: información con un clic
axe DevTools ofrece hallazgos detallados y fáciles de corregir, mientras que Lighthouse proporciona una puntuación rápida. Ambas herramientas están en el navegador y ejecutan axe-core, por lo que analizar pronto no requiere esfuerzo. 🔍
Preguntas frecuentes
¿La lección «Análisis con axe DevTools y Lighthouse» es gratis?
Sí — el texto completo de «Análisis con axe DevTools y Lighthouse» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Análisis con axe DevTools y Lighthouse»?
Realice auditorías rápidas directamente en el navegador. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Análisis con axe DevTools y Lighthouse»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Lo que la automatización puede detectar y lo que no
- Análisis con axe DevTools y Lighthouse
- Integrar axe-core en pruebas de Playwright
- Linting y barreras de CI para la accesibilidad