L'albero dell'accessibilità: ciò che sentono gli screen reader

Il browser trasforma il DOM in una seconda struttura chiamata albero dell'accessibilità. È la versione che la tecnologia assistiva legge realmente.

L'albero dell'accessibilità viene costruito direttamente dal Suo HTML. Buona semantica in ingresso, albero ricco in uscita; zuppa di div in ingresso, albero vuoto e inutile in uscita.

Ogni nodo possiede un ruolo che indica che cosa rappresenta: button, heading, link, list. Un button reale riceve il ruolo button senza alcuno sforzo da parte Sua.

Ogni nodo possiede anche un nome accessibile, cioè il testo pronunciato dallo screen reader. Per un button, di solito è l'etichetta visibile al suo interno.

Anche i nodi interattivi espongono uno stato, ad esempio selezionato, espanso o disabilitato. È così che l'utente sa che una casella è già selezionata.

In sintesi, ogni nodo è definito da ruolo, nome, stato e valore. Questo piccolo insieme contiene tutto ciò che serve a uno screen reader per annunciare un elemento.

Qualsiasi elemento nascosto con display none o aria-hidden viene eliminato dall'albero. Se non è nell'albero, uno screen reader non può raggiungerlo.

Lo stile visivo, come colore e dimensione, non entra mai nell'albero dell'accessibilità. Chi usa uno screen reader riceve significato e struttura, non il Suo layout.

Un div cliccabile entra nell'albero come nodo generico, senza ruolo né nome. L'utente non sente nulla di utile, anche se visivamente sembra un button.

Gli strumenti per sviluppatori del browser mostrano l'albero dell'accessibilità attivo di qualsiasi elemento. È il modo più rapido per verificare che cosa annuncerà realmente uno screen reader.

La lezione fondamentale è questa: il Suo markup è la fonte dell'albero. Corregga l'HTML e l'albero si correggerà da sé, senza bisogno di ulteriori correzioni.

L'albero dell'accessibilità è il Suo DOM ridotto a ruolo, nome, stato e valore. Corregga il markup e l'albero seguirà. Gli elementi nascosti vengono esclusi. 🎉