Hemos lanzado "A11y Navigation Auditor", una extensión de Chrome y segunda herramienta de accesibilidad web de Liberogic. Visualiza rápida y precisamente el "esqueleto" de un sitio web y aborda sin problemas los asuntos que se pasan por alto fácilmente. Esta herramienta fue desarrollada para permitir una verificación estructural exhaustiva y realizar diagnósticos de accesibilidad más confiables.
Antecedentes del desarrollo
Existen muchas herramientas para diagnosticar accesibilidad.
Las herramientas que solo manejan categorías específicas como encabezados e hitos no te permiten ver el panorama general.
Las del tipo que sobreponen marcadores en la página te muestran el panorama general, pero saturan la pantalla e impiden la visualización completa.
Buscamos llenar este vacío: una herramienta que "permitiera captar la imagen completa y visualizar sin saturar la pantalla".
Nos inspiramos en la funcionalidad de lista de elementos de lectores de pantalla, como la visualización del rotor de VoiceOver.
Al visualizar esto en un panel lateral y agregar capacidad de detección de problemas, logramos desarrollar una herramienta para desarrolladores que permite diagnósticos estructurales legibles y avanzados.
Objetivos de auditoría y problemas detectados
▪️ Encabezados
omisión de niveles, encabezados vacíos, pérdida de roles, etc.
▪️ Enlaces
texto vacío, expresiones imprecisas, enlaces duplicados, etc.
▪️ Controles de formulario
etiquetas faltantes, atributo autocomplete, vinculación de mensajes de error, etc.
▪️ Hitos
falta de main, distinción de roles duplicados, deficiencias en elementos de sección, etc.
▪️Imágenes
atributo alt faltante, texto alt inadecuado (como "imagen"), uso de nombres de archivo, etc.
▪️Tablas
caption o encabezados faltantes, deficiencias en scope/headers en estructuras complejas, etc.
Características principales
▪️Detección de problemas de conformidad WCAG
basada en los criterios de éxito de WCAG (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, etc.), mostrados en tres niveles: error, advertencia e información.
▪️Visualización del nombre accesible calculado
basado en la especificación ARIA, visualiza el nombre que los lectores de pantalla leen realmente y su origen.
▪️Monitoreo en tiempo real del estado ARIA
detecta automáticamente cambios en estados como aria-expanded, aria-invalid, y cambios dinámicos en nombres accesibles por aria-label, permitiendo verificar inmediatamente los cambios de accesibilidad en respuesta a las operaciones.
▪️Resalte con clic
simplemente haz clic en un elemento del panel para desplazarse hasta el elemento correspondiente y resaltarlo. También puedes cambiar entre elementos usando las teclas de flecha hacia arriba y hacia abajo del teclado.
▪️Funciones avanzadas para profesionales
・Alternar inspección de elementos ocultos
・Exclusión automática de widgets de terceros
・Compatible con dos idiomas: japonés e inglés
Descargar A11y Navigation Auditor aquí
En Liberogic, nuestro objetivo es que la accesibilidad no sea una "medida especial", sino parte de la "calidad estándar".
Tras el primer lanzamiento de «Area Contrast Checker», el «A11y Navigation Auditor» de esta ocasión también materializa una funcionalidad que necesitábamos urgentemente en nuestro trabajo diario. Como su nombre lo indica, Navigation Auditor está diseñado para apoyar la creación de sitios donde cualquiera pueda navegar sin confundirse y llegar a su destino. Esta es la filosofía que impulsa su desarrollo.
Hacer que la accesibilidad web sea más accesible y fluida. Ya estamos preparando la próxima herramienta, así que esperamos que la disfrutes.
