Como segunda herramienta de accesibilidad web de Liberogic, hemos lanzado A11y Navigation Auditor, una extensión para Chrome. Visualiza de forma rápida y precisa el "esqueleto" de un sitio web y ayuda a abordar con fluidez los problemas que suelen pasarse por alto. Es una herramienta desarrollada para respaldar una revisión estructural exhaustiva y hacer posible un diagnóstico de accesibilidad más fiable.
Antecedentes del desarrollo
Existen muchas herramientas para diagnosticar la accesibilidad.
Sin embargo, las que se centran solo en categorías específicas, como encabezados o landmarks, no permiten ver el panorama completo.
Las que superponen marcadores sobre la página sí muestran el conjunto, pero saturan la pantalla y dificultan la visión general.
Con el objetivo de cerrar esta brecha, creamos una herramienta que permite comprender el conjunto completo sin saturar la pantalla y mantener una visión global.
La inspiración fue la función de lista de elementos de los lectores de pantalla, como la vista de rotor de VoiceOver.
Al visualizar esta lista en un panel lateral y añadir la detección de problemas, se hizo posible una herramienta para desarrolladores que facilita un diagnóstico estructural claro y avanzado.
Elementos auditados y problemas detectados
▪️Encabezados:
saltos de nivel, encabezados vacíos, pérdida de roles, etc.
▪️Enlaces:
texto vacío, expresiones poco claras, enlaces duplicados, etc.
▪️Controles de formulario:
etiquetas ausentes, atributo autocomplete, asociación de mensajes de error, etc.
▪️Landmarks:
ausencia de main, distinción de roles duplicados, deficiencias en elementos de sectioning, etc.
▪️Imágenes
Falta del atributo alt, texto alt inadecuado (como "imagen") y uso de nombres de archivo, entre otros
▪️Tablas
Ausencia de caption o encabezados, y errores en scope/headers en estructuras complejas, entre otros
Funciones principales
▪️Detección de problemas de conformidad con WCAG
Consulta los criterios de éxito de WCAG (1.1.1, 1.3.1, 2.4.4, 3.3.1, 4.1.2, etc.) y muestra los resultados en tres niveles: error, advertencia e información.
▪️Visualización del nombre accesible calculado
Muestra, según la especificación ARIA, el nombre que el lector de pantalla anuncia realmente y su origen.
▪️Monitorización en tiempo real de los estados ARIA
Detecta automáticamente los cambios de estado como aria-expanded o aria-invalid, así como los cambios dinámicos del nombre accesible provocados por aria-label, para comprobar de inmediato cómo varía la accesibilidad según la interacción.
▪️Resaltado al hacer clic
Basta con hacer clic en un elemento del panel para desplazarse al elemento correspondiente y resaltarlo. También se puede cambiar de elemento con las teclas de flecha.
▪️Funciones avanzadas para profesionales
・Activación de la inspección de elementos ocultos
・Exclusión automática de widgets de terceros
・Compatible con japonés e inglés
Descargar A11y Navigation Auditor aquí
En Liberogic nos proponemos que la accesibilidad sea una calidad habitual, y no un tratamiento especial.
Al igual que la primera entrega, "Area Contrast Checker", esta vez "A11y Navigation Auditor" también da forma a una función que necesitábamos con urgencia en el día a día de nuestros proyectos. Como indica su nombre, Navigation Auditor, queremos ayudar a crear sitios en los que cualquier persona pueda llegar a su destino sin perderse. Esa es la idea que hay detrás de esta herramienta.
Hacer la accesibilidad más cercana y más fácil de aplicar. Ya estamos preparando la próxima herramienta, así que no te pierdas las novedades.
