Cómo funciona A11yDetector
Ejecuta escaneos, revisa problemas y entiende qué corregir desde un flujo claro. A11yDetector ayuda a los equipos a pasar de la detección a la acción con informes estructurados y guía práctica de remediación.
Un flujo práctico de accesibilidad dentro de tu navegador
A11yDetector es una extensión de navegador que escanea páginas web en busca de problemas de accesibilidad basados en criterios WCAG. Ayuda a identificar problemas relacionados con la interacción por teclado, soporte de lectores de pantalla, contraste de color, zoom y más, proporcionando además sugerencias de corrección para cada problema encontrado.
Pasos del flujo
1. Ejecuta un escaneo
Comienza con un escaneo rápido en la página actual o personaliza el escaneo según tus necesidades. Puede elegir qué pruebas ejecutar, definir el alcance del escaneo y seleccionar la ventana gráfica antes de iniciar el análisis. A11yDetector admite verificaciones de teclado, lectores de pantalla, contraste de color y zoom.
2. Sigue el progreso
Sigue el escaneo en tiempo real mientras se ejecuta cada test. La vista de progreso muestra actualizaciones de estado, porcentaje de avance y el estado actual de cada test para que veas qué está pendiente, en ejecución o completado.
3. Revisa los informes
Abre los informes completados, explora los problemas agrupados por criterios WCAG e inspecciona cada hallazgo en detalle. Los informes incluyen elementos afectados, descripciones de expertos, referencias de código, correcciones sugeridas y opciones de gestión de problemas.
Guía detallada
Empieza rápido o personaliza tu escaneo
Ejecuta un escaneo completo de la página actual con un clic, o abre las opciones de personalización para elegir exactamente qué probar.
Qué puedes personalizar
- Tests: Teclado, Lector de pantalla, Contraste de color, Zoom
- Alcance: Página completa o un selector CSS específico
- Viewport: Escritorio, Portátil, Tablet, Móvil o dimensiones personalizadas
- Entrada de URL: Escanea la página actual o introduce una URL manualmente
Elige un escaneo de página completa para una revisión amplia, o reduce el alcance a un componente específico cuando necesites una revisión más enfocada.
Ve qué está pasando mientras se ejecuta el escaneo
La pestaña de Progreso da visibilidad sobre el estado en vivo del escaneo. Muestra mensajes de estado, una barra de progreso y el estado de cada test seleccionado, ayudando a los usuarios a entender que el escaneo avanza y cuándo los resultados están listos.
Sin conjeturas. Puedes seguir el escaneo desde la solicitud hasta su finalización en tiempo real.
Convierte hallazgos en acción
Una vez completado el escaneo, los informes facilitan la revisión y acción sobre los problemas. Los hallazgos se agrupan por criterio WCAG, y cada problema puede abrirse para revelar el elemento afectado, una explicación detallada, el código relevante y una solución sugerida.
- Tarjetas de informe con URL escaneada y cantidad de problemas
- Hallazgos agrupados por criterio WCAG
- Vistas detalladas de problemas con fragmentos de código
- Correcciones sugeridas con ejemplos corregidos
- Opciones para copiar listados, copiar informes completos o abrir el informe completo
- Controles para descartar problemas no relevantes
Revisa casos especiales sin bloquear el flujo
A11yDetector también puede señalar elementos tabindex para revisión. Estos se presentan como sugerencias para consideración, no necesariamente errores, para que los equipos puedan inspeccionarlos sin interrumpir el flujo del escaneo.
No todos los elementos señalados son defectos. Algunos hallazgos se muestran para revisión para que los equipos apliquen el contexto del producto antes de decidir.
Consejos para mejores escaneos
- Usa un escaneo rápido cuando quieras una visión general inmediata de la página actual.
- Usa el alcance por selector CSS cuando quieras inspeccionar un módulo o sección específica.
- Cambia el viewport para probar el comportamiento responsivo en diferentes tamaños de dispositivo.
- Descarta problemas solo cuando estén intencionalmente fuera del alcance o no sean aplicables.
- Revisa las sugerencias de tabindex con cuidado, ya que pueden reflejar decisiones de diseño intencionales.
¿Necesitas la guía completa?
¿Prefieres un documento que puedas compartir internamente o conservar para onboarding? Descarga la Mini Guía Técnica de A11yDetector.
Descargar mini guía