Eines assistides: inspectors, bookmarklets i proves guiades

Entre l'eina que decideix sola i l'auditor que ho revisa tot a mà hi ha una tercera categoria: les eines assistides. No emeten un veredicte, sinó que fan visible informació que a la pantalla no es veu: el nom accessible de cada control, l'ordre de tabulació, la jerarquia d'encapçalaments, l'aspecte de la pàgina amb un altre espaiat o sense estils. Són les que estalvien més temps en els criteris que, com vam veure a la primera lliçó, queden fora de l'abast de les regles. Aquesta lliçó repassa les més útils i explica què decideix l'eina i què decideixes tu. Les proves amb lectors de pantalla i altres tecnologies de suport s'estudien al curs N4-C3; aquí ens centrem en el que es pot revisar amb el navegador.

Els inspectors d'accessibilitat del navegador

Ja estan instal·lats i són la referència quan dues eines discrepen, perquè mostren el que el navegador exposa realment a les tecnologies de suport.

Chrome i Edge

• Panell Elements, pestanya Accessibility: mostra l'arbre d'accessibilitat del node seleccionat, els seus atributs ARIA i les propietats calculades (nom, rol, estats) amb l'origen de cadascuna. A més, hi ha una opció per veure l'arbre d'accessibilitat de la pàgina completa en lloc del DOM.
• Panell Rendering: emula preferències de l'usuari (prefers-color-scheme, prefers-reduced-motion, prefers-contrast, forced-colors) i deficiències de visió (visió borrosa, protanopia, deuteranopia, tritanopia, acromatòpsia).
• Mode dispositiu: permet fixar una amplada de 320 px CSS per revisar l'1.4.10 Reajustament dels elements (reflow) sense canviar el zoom del sistema.
• Panell CSS Overview: llista els parells de colors amb contrast insuficient de tota la pàgina, útil per trobar estils repetits.

Firefox

L'Inspector d'accessibilitat mostra l'arbre complet, permet buscar problemes de contrast, de teclat i d'etiquetes de text, i té l'opció «Mostra l'ordre de tabulació», que dibuixa sobre la pàgina un número a cada element que rep el focus. També simula deficiències de la visió del color.

Bookmarklets i extensions de visualització

• ANDI (Accessible Name & Description Inspector): eina gratuïta de l'Administració de la Seguretat Social dels Estats Units que s'utilitza en el procés de proves Trusted Tester de la Section 508. Es llança com a bookmarklet (un marcador que executa un script sobre la pàgina) i té mòduls per a elements que reben el focus, imatges, enllaços i botons, taules, estructures, contrast, contingut ocult i iframes. Per a cada element mostra el nom i la descripció accessibles i d'on surten, juntament amb avisos.
• HeadingsMap: extensió que mostra l'esquema d'encapçalaments de la pàgina com un índex navegable.
• Visualitzadors de landmarks: extensions que llisten i ressalten les regions (header, nav, main…); els panells «Structure» i «Order» de WAVE, que vam veure a la lliçó d'eines, compleixen una funció semblant.
• Barres de desenvolupament web que desactiven el CSS, mostren els atributs alt o ressalten taules: desactivar els estils és la manera més ràpida de revisar l'1.3.2 Seqüència significativa.
• Prova d'espaiat del text: un petit CSS que aplica els valors de l'1.4.12 Espaiat del text. El pots injectar tu mateix, com veuràs a l'exercici d'aquesta lliçó.

Proves guiades: Accessibility Insights for Web

Accessibility Insights for Web és una extensió gratuïta de Microsoft per a Chrome i Edge. Té dos modes:

• FastPass: executa les comprovacions automàtiques (amb axe-core, com hem vist) i hi afegeix la visualització Tab stops, que dibuixa amb cercles numerats i línies el recorregut del focus mentre tabules. Així es detecten salts, elements que no reben el focus i paranys.
• Assessment: un recorregut guiat pels criteris de nivell AA, amb instruccions i visualitzacions per a cada prova, en què l'auditor marca cada requisit com a superat o fallit i exporta un informe. Comprova quina versió de les WCAG cobreix l'edició que facis servir i completa a mà els criteris nous de les WCAG 2.2.

Les proves guiades d'axe DevTools, que vam esmentar a la lliçó d'eines, segueixen la mateixa idea en versió de pagament. El valor d'aquestes eines no és en el veredicte, que continua sent teu, sinó en el fet que t'obliguen a recórrer tots els criteris amb un mètode igual a cada pàgina.

Què et mostra l'eina i què decideixes tu

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);

Com integrar-les en el teu protocol

• Fes-les servir després de les automàtiques i abans de les proves amb tecnologies de suport: resolen en minuts moltes preguntes i et diuen on concentrar la prova amb lector de pantalla.
• Repeteix les mateixes visualitzacions a cada pàgina i estat de la mostra; la constància és el que dona valor al mètode.
• Fes captures de les visualitzacions (ordre del focus numerat, pàgina a 320 px, text solapat amb l'espaiat aplicat): són evidències excel·lents per a l'informe i l'equip de desenvolupament les entén a l'instant.
• Quan dues eines donin un nom accessible diferent, mana l'inspector del navegador, i si el criteri ho requereix, el que anuncia el lector de pantalla.

Resum

• Les eines assistides mostren informació oculta (noms, ordre, estructura, espaiat) però no decideixen: el veredicte és de l'auditor.
• Els inspectors de Chrome, Edge i Firefox mostren l'arbre d'accessibilitat real, emulen preferències i permeten revisar el reflow a 320 px.
• ANDI, HeadingsMap, els visualitzadors de landmarks, la desactivació del CSS i el CSS d'espaiat acceleren l'1.3.1, l'1.3.2, el 2.5.3 i l'1.4.12.
• Accessibility Insights for Web combina FastPass (automàtic més ordre de tabulació) i Assessment (recorregut guiat per criteri).
• Les simulacions i els avisos són pistes; les captures de les visualitzacions són molt bones evidències.