Albero di accessibilità

L’albero di accessibilità è la struttura dati a livello di sistema operativo che screen reader e altre tecnologie assistive consumano realmente. Quando si apre una pagina in un browser, quest’ultimo costruisce due alberi: l’albero DOM (la gerarchia HTML ordinaria) e l’albero di accessibilità, una struttura parallela derivata dal DOM ma contenente metadati sull’accessibilità.

Comprendere l’albero di accessibilità consente di spiegare circa l’80% dei comportamenti altrimenti difficili da interpretare di ARIA, degli screen reader e delle sessioni di debug del tipo «perché non viene annunciato?».

Cosa contiene

Ogni nodo nell’albero di accessibilità ha:

• Ruolo — ciò che l’elemento è: pulsante, collegamento, intestazione, navigazione, finestra di dialogo. Deriva dal tipo di elemento HTML o da un role="..." ARIA esplicito.
• Nome — come l’elemento si chiama. Deriva dal testo dell’etichetta, dall’attributo alt, da aria-label, da aria-labelledby o dal contenuto testuale calcolato.
• Descrizione — contesto aggiuntivo. Deriva da aria-describedby o dagli attributi title.
• Stato — stato corrente: premuto, espanso, selezionato, occupato. Deriva da attributi HTML (disabled, required) o da ARIA (aria-pressed, aria-expanded).
• Proprietà — relazioni e metadati: aria-controls, aria-owns, aria-haspopup.

Gli screen reader percorrono questo albero e annunciano ogni nodo in base a questi campi. La navigazione tramite Tab e tasti freccia si svolge attraverso l’albero di accessibilità, non attraverso il DOM.

Perché i contenuti puramente visivi scompaiono

Un <div onclick="..."> stilizzato per sembrare un pulsante non ha alcun ruolo nell’albero di accessibilità — il browser vede un <div> generico e lo registra come role="generic" (di fatto invisibile per le tecnologie assistive). Il gestore onclick non viene trasferito nell’albero di accessibilità perché quest’ultimo riflette soltanto ciò che il browser deduce sull’elemento in base al suo ruolo HTML.

Ecco perché l’HTML semantico è importante al livello più fondamentale: non per ragioni di stile o convenzione, ma perché gli elementi HTML semantici popolano automaticamente l’albero di accessibilità con i ruoli corretti. Il markup non semantico crea un albero fatto di div privi di significato che gli screen reader non riescono a interpretare.

Il ruolo di ARIA nell’albero

ARIA esiste proprio per popolare l’albero di accessibilità nei casi in cui l’HTML nativo non dispone di un elemento corrispondente. role="combobox" indica al browser di inserire un nodo combobox nell’albero per un elemento che altrimenti apparirebbe come generico. aria-expanded="true" imposta una proprietà di stato su quel nodo.

ARIA NON modifica il DOM. Modifica ciò che il browser scrive nell’albero di accessibilità.

Come ispezionarlo

Gli strumenti per sviluppatori dei browser espongono ora l’albero di accessibilità direttamente:

• Chrome / Edge DevTools — pannello Elements → scheda Accessibility (colonna destra) mostra le proprietà di accessibilità calcolate per il nodo selezionato. Il pulsante «Full-page accessibility tree» (flag di Chrome in alcune versioni) visualizza l’albero in una barra laterale.
• Firefox DevTools — pannello Accessibility (icona nella barra degli strumenti) mostra una vista dedicata dell’albero di accessibilità, simile alla vista Elements ma espressa nei termini dell’albero.
• Safari Web Inspector — le schede Audit / Accessibility offrono un’ispezione comparabile.

Quando l’albero di accessibilità è visibile, è possibile rispondere empiricamente alla domanda «perché non viene annunciato?». Quasi sempre la risposta è: il nodo nell’albero ha un ruolo diverso da quello atteso, oppure il suo nome è vuoto, oppure il suo stato è errato.

Perché «albero di accessibilità» è il modello mentale più efficace rispetto ad «ARIA»

I team che imparano ARIA senza comprendere l’albero di accessibilità finiscono per disseminare attributi ARIA sperando che gli screen reader li raccolgano. Chi comprende l’albero di accessibilità sa che il compito di ARIA è scrivere campi specifici in nodi specifici dell’albero, e che ispezionare l’albero direttamente è più rapido che procedere per tentativi.