Revisore dell'accessibilità HTML

I controlli di accessibilità più rapidi sono una scansione superficiale delle parole chiave o una libreria pesante di cui ti devi fidare come una scatola nera. Questo strumento segue un terzo percorso: analizza qualsiasi codice HTML incollato utilizzando il DOMParser integrato nel browser (nessun axe-core, nessuna libreria di accessibilità esterna, nulla di scaricato) e quindi percorre l'albero DOM risultante con una serie di controlli scritti a mano che rispecchiano modelli di errore comuni e reali WCAG 2.1. Ciò significa che la logica è completamente ispezionabile e il controllo viene eseguito interamente all'interno del tuo browser: il markup che incolli e qualsiasi coppia di colori che provi non vengono mai caricati o inviati da nessuna parte.

I controlli coprono gli errori che si manifestano più spesso nelle pagine reali: elementi <img> senza alcun attributo alt (un autentico errore WCAG, distinto dall'alt="" deliberatamente vuoto utilizzato per le immagini decorative, che viene correttamente lasciato senza flag), controlli del modulo senza che la tecnologia assistiva possa sapere a cosa servono (controllato rispetto a ogni percorso reale verso un'etichetta: un <label for> corrispondente, racchiuso in un <label> o un attributo aria-label/aria-labelledby), livelli di intestazione che saltano senza preavviso (un <h1> direttamente a un <h3>, o un documento senza <h1>, o più di uno), collegamenti senza href o con testo vago e fuori contesto come "fai clic qui" o "leggi di più" e un attributo lang mancante quando viene incollato un documento HTML completo (non solo un frammento).

Il pezzo più interessante è la vera matematica del contrasto, non un'euristica superficiale del "sembra leggibile". Per qualsiasi elemento che trasporta un colore in linea e un colore di sfondo, lo strumento legge entrambi i valori, li risolve in numeri RGB reali tramite il motore CSS del browser (quindi hex, rgb(), hsl() e colori con nome come 'tomato' funzionano tutti in modo identico) e calcola l'esatta luminanza relativa WCAG per ciascuno — L = 0,2126×R + 0,7152×G + 0,0722×B, con ogni canale corretto prima la gamma utilizzando la curva di trasferimento sRGB reale, prima di combinarli nella formula ufficiale del rapporto di contrasto (L più chiaro + 0,05) / (L più scuro + 0,05). La dimensione e lo spessore del carattere dell'elemento decidono se si applicano le soglie più rigide del "testo normale" o le soglie più indulgenti del "testo grande" (18pt+ o 14pt+ grassetto) e il risultato viene confrontato con tutti e quattro i numeri WCAG reali contemporaneamente: 4,5:1 e 3:1 per AA, 7:1 e 4,5:1 per AAA, senza mai collassare in un unico verdetto falso buono/cattivo.

Si tratta di un sottoinsieme deliberatamente onesto e pragmatico di un controllo completo dell'accessibilità, non di uno strumento di certificazione: non valuta l'interattività basata su JavaScript, i modelli dei widget ARIA oltre l'etichettatura di base, l'ordine di messa a fuoco della tastiera o qualsiasi cosa che richieda effettivamente il rendering e l'esecuzione della pagina. Consideralo come un primo passaggio veloce che individua alcuni degli errori WCAG più comuni e consequenziali (testo alternativo mancante, campi senza etichetta, gerarchia delle intestazioni non funzionante, testo a basso contrasto e collegamenti vaghi) prima che una pagina venga spedita, insieme (non al posto di) una revisione manuale completa o uno strumento di controllo dedicato per qualsiasi cosa venga inviata alla produzione.