axe DevTools, WAVE, Lighthouse, IBM Equal Access, validador HTML i analitzadors de contrast

No existeix «la millor eina»: cadascuna té un motor, un model de resultats i una manera de presentar els problemes que la fa útil per a una tasca diferent. Un auditor professional en fa servir com a mínim dues de motor diferent i sap què pot esperar de cadascuna. Aquesta lliçó repassa les més utilitzades en auditoria web, amb els seus punts forts, els seus límits i com citar-les en un informe.

axe DevTools i axe-core

axe-core (Deque) és la biblioteca de regles de codi obert més estesa; és darrere de l'extensió axe DevTools, de Lighthouse, d'Accessibility Insights (Microsoft) i de molts integradors de proves. Classifica cada regla per impacte (critical, serious, moderate, minor) i l'etiqueta amb el criteri WCAG (wcag2a, wcag2aa, wcag21aa, wcag22aa) o com a best-practice. Retorna quatre llistes: violations (fallades segures), passes, incomplete (necessita revisió manual) i inapplicable.

Punts forts: pocs falsos positius per disseny (prefereix no marcar que marcar malament), selectors CSS exactes de l'element, explicació de la regla amb enllaç a la documentació, i la possibilitat d'analitzar només una part de la pàgina o un estat concret (menú obert, modal). La versió gratuïta de l'extensió cobreix la comprovació automàtica; les guiades (Intelligent Guided Tests) són de pagament.

En informar, cita l'identificador de la regla (per exemple color-contrast, label, button-name, aria-allowed-attr) i tradueix-lo sempre a criteri WCAG. Recorda que les regles best-practice (region, landmark-one-main, page-has-heading-one) no són fallades WCAG: les pots recomanar, però no com a incompliment.

WAVE

WAVE (WebAIM) superposa icones sobre la pàgina: errors (vermell), errors de contrast, alertes (groc), característiques (verd), elements estructurals i ARIA. És l'eina més didàctica per ensenyar a un client què passa a la seva pàgina, perquè mostra el problema al seu lloc. El seu panell «Order» mostra l'ordre de tabulació i «Structure» la jerarquia d'encapçalaments i landmarks, molt útils en la revisió manual.

Els seus límits: les «alertes» són molt nombroses i barregen problemes reals amb avisos de possible problema (text d'enllaç redundant, enllaç que obre una finestra nova, text petit); no s'han de traslladar a l'informe sense revisar-les. WAVE no analitza contingut que exigeix interacció, i el seu motor és diferent del d'axe, de manera que els resultats no coincideixen. Té extensió de navegador (analitza pàgines amb sessió iniciada) i una versió en línia limitada a pàgines públiques.

Lighthouse

Lighthouse ve integrat a les Chrome DevTools i utilitza un subconjunt de regles d'axe-core per generar una puntuació de 0 a 100 ponderada per impacte. És útil per donar una xifra ràpida a un gestor i per mesurar regressions entre versions, i és molt còmode en integració contínua (Lighthouse CI).

El seu risc més gran és precisament la puntuació: un 100 significa que cap de les regles automàtiques del seu subconjunt no ha fallat, no que la pàgina sigui accessible. Lighthouse ho adverteix en el seu propi informe, amb una secció de «comprovacions manuals addicionals», però el número es difon sol. Fes servir Lighthouse per a tendències, mai com a veredicte.

IBM Equal Access Accessibility Checker

L'extensió d'IBM Equal Access utilitza un motor propi (accessibility-checker-engine, de codi obert) amb un conjunt de regles diferent del d'axe i amb una implementació àmplia de les regles ACT. Classifica els resultats en «violacions», «necessita revisió» i «recomanacions», i permet triar el conjunt de regles de referència (per exemple, WCAG 2.1 o WCAG 2.2 AA; comprova quines opcions ofereix la teva versió). El seu panell d'arbre d'accessibilitat i la seva comprovació de patrons ARIA són especialment complets. Com que té un motor diferent, és un bon contrapunt a axe: si totes dues marquen el mateix, és gairebé segur; si discrepen, hi ha alguna cosa per mirar a mà.

El validador HTML del W3C

El Nu HTML Checker comprova la validesa del marcatge. A les WCAG 2.2 el criteri 4.1.1 Processament s'ha eliminat (i a les 2.0 i 2.1 una nota del 2023 el dona per satisfet sempre en contingut HTML o XML), així que un error de validació ja no és, per si mateix, una fallada WCAG. Continua sent una eina útil perquè molts errors de validació són símptomes de problemes reals en altres criteris: id duplicats que trenquen l'associació del label (1.3.1, 4.1.2), atributs ARIA no permesos en un element (4.1.2), taules mal niades (1.3.1), elements interactius dins d'altres (<a> dins de <button>). El validador s'ha d'utilitzar per trobar aquestes pistes, i l'informe ha de citar el criteri afectat, no «HTML no vàlid».

Analitzadors de contrast

Per a l'1.4.3, l'1.4.6 i l'1.4.11 calen mesures precises. Eines habituals:

• Colour Contrast Analyser (CCA, TPGi): aplicació d'escriptori amb comptagotes; mesura qualsevol píxel de la pantalla, inclosos degradats, imatges i estats de focus que les extensions no arriben a mesurar.
• WebAIM Contrast Checker: en línia, per calcular a partir de dos valors hexadecimals i documentar la ràtio.
• Inspector de Chrome i Firefox: el selector de color del panell d'estils mostra la ràtio i les línies de 4,5:1 i 3:1.

Les ràtios es calculen amb la fórmula de luminància relativa de les WCAG 2.x. Algunes eines ofereixen també l'algoritme APCA, proposat en el seu moment per a les WCAG 3.0: és informatiu, però no serveix per declarar la conformitat amb les WCAG 2.2. Per a text sobre imatge o degradat, mesura al punt de menys contrast i documenta els dos colors mesurats.

Com triar i combinar

Una combinació eficaç per a auditoria: axe DevTools com a eina principal per la seva baixa taxa de falsos positius; IBM Equal Access com a segona opinió de motor diferent; WAVE per visualitzar estructura i ordre i per explicar-ho al client; validador Nu per a pistes d'estructura; CCA per mesurar. Lighthouse queda per a integració contínua i tendències. Anota a l'informe les versions exactes (la d'axe-core canvia regles entre versions) i la data d'execució. Les eines assistides que completen aquest equip es veuen a la lliçó següent, i com triar, configurar i documentar cada execució, a l'última lliçó teòrica del curs.

Resum

• axe DevTools: motor més estès, pocs falsos positius, quatre estats de resultat; distingeix regles WCAG de bones pràctiques.
• WAVE: visual i didàctica, amb panells d'ordre i estructura; les seves alertes requereixen revisió abans d'informar.
• Lighthouse: puntuació útil per a tendències i integració contínua, mai com a veredicte de conformitat.
• IBM Equal Access: motor diferent amb bona implementació ACT, ideal com a segona opinió.
• El validador HTML dona pistes de l'1.3.1 i el 4.1.2 (el 4.1.1 ja no existeix a la 2.2); els analitzadors de contrast mesuren amb la fórmula WCAG 2.x, no amb APCA.