Herramientas asistidas: inspectores, bookmarklets y pruebas guiadas

Entre la herramienta que decide sola y el auditor que lo revisa todo a mano hay una tercera categoría: las herramientas asistidas. No emiten un veredicto, sino que hacen visible información que en la pantalla no se ve: el nombre accesible de cada control, el orden de tabulación, la jerarquía de encabezados, el aspecto de la página con otro espaciado o sin estilos. Son las que más tiempo ahorran en los criterios que, como vimos en la primera lección, quedan fuera del alcance de las reglas. Esta lección recorre las más útiles y explica qué decide la herramienta y qué decides tú. Las pruebas con lectores de pantalla y otras tecnologías de apoyo se estudian en el curso N4-C3; aquí nos centramos en lo que se puede revisar con el navegador.

Los inspectores de accesibilidad del navegador

Ya están instalados y son la referencia cuando dos herramientas discrepan, porque muestran lo que el navegador expone realmente a las tecnologías de apoyo.

Chrome y Edge

• Panel Elementos, pestaña Accessibility: muestra el árbol de accesibilidad del nodo seleccionado, sus atributos ARIA y las propiedades calculadas (nombre, rol, estados) con el origen de cada una. Existe además una opción para ver el árbol de accesibilidad de la página completa en lugar del DOM.
• Panel Rendering: emula preferencias del usuario (prefers-color-scheme, prefers-reduced-motion, prefers-contrast, forced-colors) y deficiencias de visión (visión borrosa, protanopia, deuteranopia, tritanopia, acromatopsia).
• Modo dispositivo: permite fijar una anchura de 320 px CSS para revisar 1.4.10 Reajuste de los elementos (reflow) sin cambiar el zoom del sistema.
• Panel CSS Overview: lista los pares de colores con contraste insuficiente de toda la página, útil para encontrar estilos repetidos.

Firefox

El Inspector de accesibilidad muestra el árbol completo, permite buscar problemas de contraste, de teclado y de etiquetas de texto, y tiene la opción «Mostrar orden de tabulación», que dibuja sobre la página un número en cada elemento que recibe el foco. También simula deficiencias de la visión del color.

Bookmarklets y extensiones de visualización

• ANDI (Accessible Name & Description Inspector): herramienta gratuita de la Administración de la Seguridad Social de Estados Unidos que se usa en el proceso de pruebas Trusted Tester de Section 508. Se lanza como bookmarklet (un marcador que ejecuta un script sobre la página) y tiene módulos para elementos que reciben el foco, imágenes, enlaces y botones, tablas, estructuras, contraste, contenido oculto e iframes. Para cada elemento muestra el nombre y la descripción accesibles y de dónde salen, junto con avisos.
• HeadingsMap: extensión que muestra el esquema de encabezados de la página como un índice navegable.
• Visualizadores de landmarks: extensiones que listan y resaltan las regiones (header, nav, main…); los paneles «Structure» y «Order» de WAVE, que vimos en la lección de herramientas, cumplen una función parecida.
• Barras de desarrollo web que desactivan el CSS, muestran los atributos alt o resaltan tablas: desactivar los estilos es la forma más rápida de revisar 1.3.2 Secuencia significativa.
• Prueba de espaciado del texto: un pequeño CSS que aplica los valores de 1.4.12 Espaciado del texto. Puedes inyectarlo tú mismo, como verás en el ejercicio de esta lección.

Pruebas guiadas: Accessibility Insights for Web

Accessibility Insights for Web es una extensión gratuita de Microsoft para Chrome y Edge. Tiene dos modos:

• FastPass: ejecuta las comprobaciones automáticas (con axe-core, como vimos) y añade la visualización Tab stops, que dibuja con círculos numerados y líneas el recorrido del foco mientras tabulas. Así se detectan saltos, elementos que no reciben foco y trampas.
• Assessment: un recorrido guiado por los criterios de nivel AA, con instrucciones y visualizaciones para cada prueba, en el que el auditor marca cada requisito como superado o fallido y exporta un informe. Comprueba qué versión de WCAG cubre la edición que uses y completa a mano los criterios nuevos de WCAG 2.2.

Las pruebas guiadas de axe DevTools, que mencionamos en la lección de herramientas, siguen la misma idea en versión de pago. El valor de estas herramientas no está en el veredicto, que sigue siendo tuyo, sino en que te obligan a recorrer todos los criterios con un método igual en cada página.

Qué te muestra la herramienta y qué decides tú

const s = document.createElement('style');
s.textContent = '* { line-height: 1.5 !important; ' +
  'letter-spacing: 0.12em !important; ' +
  'word-spacing: 0.16em !important; } ' +
  'p { margin-bottom: 2em !important; }';
document.head.appendChild(s);

Cómo integrarlas en tu protocolo

• Úsalas después de las automáticas y antes de las pruebas con tecnologías de apoyo: resuelven en minutos muchas preguntas y te dicen dónde concentrar la prueba con lector de pantalla.
• Repite las mismas visualizaciones en cada página y estado de la muestra; la constancia es lo que da valor al método.
• Haz capturas de las visualizaciones (orden de foco numerado, página a 320 px, texto solapado con el espaciado aplicado): son evidencias excelentes para el informe y el equipo de desarrollo las entiende al instante.
• Cuando dos herramientas den un nombre accesible distinto, manda el inspector del navegador, y si el criterio lo requiere, lo que anuncia el lector de pantalla.

Resumen

• Las herramientas asistidas muestran información oculta (nombres, orden, estructura, espaciado) pero no deciden: el veredicto es del auditor.
• Los inspectores de Chrome, Edge y Firefox muestran el árbol de accesibilidad real, emulan preferencias y permiten revisar el reflow a 320 px.
• ANDI, HeadingsMap, los visualizadores de landmarks, la desactivación de CSS y el CSS de espaciado aceleran 1.3.1, 1.3.2, 2.5.3 y 1.4.12.
• Accessibility Insights for Web combina FastPass (automático más orden de tabulación) y Assessment (recorrido guiado por criterio).
• Las simulaciones y avisos son pistas; las capturas de las visualizaciones son muy buenas evidencias.