Accessible Rich Internet Applications, o meglio noti come ARIA, sono un insieme di attributi e ruoli che possono essere assegnati a determinati tag HTML e sono strettamente legati all’accessibilità.
Role
Il “role” è un attributo usato in alcuni tag HTML e può essere utile per ridefinire il contesto d’utilizzo di un tag, è importante però non abusare di questo attributo, perché alla lunga può creare più danni di ciò che risolve.
MDN descrive gli ARIA come attributi opzionali e incoraggia l’uso dei tag HTML semantici corretti
Molto spesso potremmo vedere il “role” usato per cambiare il significato ai “div” di una pagina, ma questo non è l’uso più adatto. È fortemente raccomandato usare il tag appropriato invece di usare il “role”.
Ad esempio, invece di usare <div role=”complementary”> è meglio usare il tag “aside” corrispondente.
L’elenco dei vari “role” è disponibile anche su MDN: WAI-ARIA Roles
In alcuni contesti, l’uso può essere effettivamente utile, ad esempio quando un elemento può essere ambiguo. Un caso adatto può essere l’uso del tag “hr” che traccia una linea orizzontale (horizontal row), al quale potremmo applicare il role=”presentation”, che significa assegnargli una funzione di pura decorazione, in quanto questo role definisce che il tag perde qualsiasi semantica, e diventa come un semplice <div>.
Teniamo quindi presente che usare gli ARIA significa sovrascrivere il comportamento di default che il browser si aspetta, e questo potrebbe creare alcuni problemi.
Attributi ARIA nei tag HTML
Mentre mi permetto di sconsigliare l’uso dei role quando possibile evitarlo, gli attributi ARIA possono essere utili in diversi casi, anche se è bene fare molta attenzione.
Gli attributi più noti sono probabilmente “aria-label”, “aria-labelledby”, “aria-live”, “aria-haspopup”, “aria-expanded” perché molto usati da Bootstrap e WordPress, ma ve ne sono molti altri.
Ad esempio, possiamo usare “aria-label” per definire il testo accessibile, o etichetta, di un elemento.
Un uso molto comune, per incontrare le esigenze grafiche nella realizzazione di un sito web accessibile, è di usare un aria-label per il contenitore di navigazione (tag “nav”) che per motivi grafici non ha un titolo di riferimento:
<nav aria-label=”Principale”>
In alternativa, una buona soluzione può essere questa:
Nota: la classe CSS “visually-hidden” viene usata da Bootstrap 5 per nascondere visivamente un elemento, che rimane però disponibile alla lettura per i lettori di schermo e altre tecnologie. Un tempo, questa classe era conosciuta come “sr-only” che stava per “screen readers only”.
Negli esempi, aria-label indica il testo che le tecnologie assistive dovrebbero leggere, mentre aria-labelledby indica l’ID di riferimento al tag che contiene il testo. Da notare che nell’aria-label non ripetiamo il termine “Navigazione”, che dovrebbe già venire letto dalle tecnologie assistive perché abbiamo usato il tag semantico <nav>
Per unire le due cose, potremmo anche avere un aria-label diverso rispetto al testo del tag h2, ma senza dunque usare aria-labelledby perché non avrebbe senso.
L’aria-labelledby può anche combinare più elementi, separando gli ID con lo spazio, come in questo caso:
<h2 id=”label-1”>Come fare il tiramisù</h2>
<a href=”#” id=”link-1” aria-labelledby=”link-1 label-1”>Scopri</a>
La tecnologia assistiva dovrebbe leggere “Scopri come fare il tiramisù” perché sono stati uniti i due testi tramite la concatenazione dei “nomi accessibili”.
Vi sono molti altri attributi che è bene conoscere, come i già citati “aria-expanded” e “aria-haspopup”, e l’uso corretto si può apprendere solo con l’esperienza, premesso che non vi è un solo uso corretto, ma dipende molto dal singolo caso. Il mio invito è quello di testarli con strumenti come NVDA o simili, e capire effettivamente come funzionano, guardando anche come vengono usati nei siti web già accessibili.
Spiegare ogni singolo attributo sarebbe superfluo, per questo rimando alla lista completa degli attributi ARIA: ARIA states and properties
