Ejecutar escaneos de accesibilidad automatizados es rápido y fácil con axe DevTools. Hay 2 tipos de análisis de accesibilidad disponibles:
Escaneo de página completa
Desde la pantalla de inicio de la extensión, al hacer clic en "Escaneo de página completa" se ejecutará un axe-core escaneo automático de toda la página. Una vez que se complete el escaneo, podrá revisar los resultados del escaneo.
Escaneo parcial de página
Desde la pantalla de inicio de la extensión, al hacer clic en "Escaneo parcial de página" podrá seleccionar un componente o área de página específica para ejecutar el escaneo. Esto significa que se ejecutará un escaneo completamente aislado solo dentro del elemento seleccionado (todo el contenido fuera del componente seleccionado será efectivamente ignorado). Para realizar una selección de elementos, puede utilizar el ratón para apuntar y hacer clic en cualquier elemento de la página o el "Selector de elementos" compatible con tecnología de asistencia para realizar una selección de elementos con un teclado (no se requiere ratón). Una vez realizada la selección de elementos, puede hacer clic en Escanear, que lo llevará a los resultados del escaneo.
Resultados
Los resultados de "Descripción general" muestran los problemas de accesibilidad encontrados durante un escaneo. Se muestra la URL en la que se ejecutó el escaneo junto con un control para "Volver a ejecutar" el escaneo. Debajo de eso, para escaneos de páginas parciales, el elemento seleccionado se mostrará con un control "Resaltar" para resaltar el elemento/componente seleccionado en la página. A continuación, encontrará los resúmenes de problemas que contienen la cantidad total de problemas encontrados junto con la cantidad de desgloses que actúan como "filtros" para ver tipos o categorías de problemas específicos:
- "PROBLEMAS AUTOMÁTICOS": Problemas encontrados durante un análisis automático
- "PROBLEMAS GUIADOS": Problemas detectados durante las Pruebas Guiadas Inteligentes
- "Necesita revisión": Problemas potenciales en los que axe-core no pudo determinar con absoluta certeza que eran problemas reales. Esto puede ocurrir a menudo con los cálculos de contraste de color para texto sobre imágenes de fondo o degradados complejos.
- Mejores prácticas: Problemas que no necesariamente cumplen con el criterio de éxito WCAG, pero son prácticas aceptadas en la industria que mejoran la experiencia del usuario.
- Impacto (crítico, grave, moderado y leve): Categorías de impacto del problema
Los problemas se agrupan según su "regla". Para cada regla violada, estará disponible un botón expandible con la descripción de la regla para profundizar en los problemas encontrados.
Para cada problema, está disponible lo siguiente:
- Descripción del problema
- "Resaltar" (interruptor que resalta el elemento en la página)
- "Compartir problema" (genera una página compartible dedicada al problema específico encontrado que contiene todos los datos del problema junto con una captura de pantalla)
- Enlace a la página de ayuda dedicada a la regla dada ("más información")
- "Ubicación del elemento" (el selector CSS generado para el elemento con el problema de accesibilidad)
- "Inspeccionar elemento" (le permite inspeccionar el elemento en el panel de elementos de las herramientas para desarrolladores)
- Código fuente del elemento
- Guía de solución (información sobre cómo solucionar el problema)
Guardar resultados
Los usuarios con una suscripción “Pro” podrán guardar sus resultados utilizando el botón “Guardar prueba”. Al hacer clic, se le pedirá que nombre su registro de prueba. Después, las Pruebas Guiadas Inteligentes (IGT) estarán disponibles para llevar sus pruebas al siguiente nivel.(devtools-igt) Los registros de pruebas guardados son registros persistentes donde se almacenarán todos los datos de sus pruebas. Siempre puedes encontrar sus pruebas guardadas haciendo clic en el elemento de menú "ver pruebas guardadas" en la barra de menú superior.
Guardar los resultados de un escaneo de página parcial le permitirá ejecutar IGT dentro del componente seleccionado.