Esempi di ruoli ARIA: una guida completa

Gli esempi di ruolo ARIA mostrano come gli attributi di ruolo mappano gli elementi dell’interfaccia all’albero di accessibilità e la specifica WAI-ARIA 1.2 definisce 6 categorie di ruolo (widget, struttura del documento, punto di riferimento, regione live, finestra e abstract) che coprono più di 80 ruoli concreti. Questa guida presenta esempi pratici pronti da copiare per ciascuna categoria, nonché le regole che determinano quando un ruolo aiuta e quando danneggia attivamente.

Punti chiave

• I ruoli ARIA dicono alla tecnologia assistiva cos’è un oggetto; non aggiungono mai comportamenti, focus o supporto per la tastiera da soli.
• La prima regola nell’utilizzo di ARIA è quella di preferire elementi HTML nativi, che portano già impliciti ruoli, stati e gestione della tastiera.
• Le sei categorie di ruoli WAI-ARIA 1.2 sono widget, struttura del documento, punto di riferimento, regione live, finestra e riepilogo: i ruoli astratti non dovrebbero mai apparire nel markup.
• I ruoli Landmark sono le ARIA più convenienti e con il minor rischio che puoi aggiungere a un sito XHTML/CSS esistente.
• I ruoli widget richiedono quasi sempre la mappatura JavaScript per l’interazione con la tastiera e la gestione dello stato, oppure creano un’esperienza peggiore rispetto al semplice HTML.
• Convalida ogni ruolo con uno screen reader e un controllo automatico; un ruolo valido nella specifica potrebbe comunque essere sbagliato per il tuo contenuto.

Cosa fanno effettivamente i ruoli ARIA

I ruoli ARIA sono token che inserisci nell’attributo “role” per sostituire o fornire l’identità semantica di un elemento nell’albero di accessibilità. Un <div role="button"> dice a un’utilità per la lettura dello schermo di annunciare “pulsante”, ma il browser lo tratta comunque come un contenitore generico: non è focalizzabile, non risponde a Invio o Spazio e non ha uno stato disabilitato.

Questo divario tra la semantica pubblicizzata e il comportamento effettivo è la fonte più comune di fallimento di ARIA. Questi sono esempi comuni di ruoli d’aria di come la semantica può divergere dal comportamento.

La specifica WAI-ARIA, mantenuta dall’Accessible Rich Internet Applications Working Group del W3C, definisce ruoli, stati e proprietà. I ruoli sono il livello “che cos’è”; stati e proprietà come “aria-expanded”, “aria-checked” e “aria-label” sono il livello “in quali condizioni si trova”. Un ruolo senza i suoi stati richiesti è incompleto: role="checkbox" richiede aria-checked e role="combobox" richiede aria-expanded più una casella di riepilogo controllata.

Gli elementi HTML nativi portano ruoli impliciti. <button> corrisponde al ruolo del pulsante, <nav> alla navigazione, da <h1> a <h6> all’intestazione e <input type="checkbox"> alla casella di controllo. Poiché il browser fornisce automaticamente il ruolo, il comportamento della tastiera e lo stato, la prima regola per l’utilizzo di ARIA, documentata nella ARIA Authoring Practices Guide del W3C, è quella di utilizzare la semantica nativa ogni volta che esiste un elemento equivalente. Cerca ruoli espliciti solo quando nessun elemento nativo è adatto, come una visualizzazione ad albero personalizzata o un pannello a schede creato da <div>.

Le sei categorie di ruoli WAI-ARIA

WAI-ARIA 1.2 organizza i ruoli in sei categorie e sapere a quale categoria appartiene un ruolo ti dice quanto JavaScript gli devi. Ecco alcuni esempi di ruoli ARIA comuni:

Correlato: UserWay — Widget di accessibilità con piano gratuito per empezar hoy mismo.

Categoria	Scopo	Ruoli di esempio	JavaScript è richiesto?
Widget	Controlli interattivi	pulsante, casella di controllo, tab, slider, combobox	Sì: tastiera + stato
Struttura del documento	Organizzazione dei contenuti	intestazione, elenco, listitem, tabella, articolo	No
Punto di riferimento	Aree della pagina per la navigazione	banner, principale, navigazione, complementary	No
Regione dal vivo	Annunciare aggiornamenti dinamici	alert, status, log, timer	Di solito: per attivare gli aggiornamenti
Finestra	Sottofinestre e finestre di dialogo	dialogo, alertdialog	Sì: gestione del focus
Abstract	Ruoli di superclasse, mai scritti	widget, input, sezione, punto di riferimento	N/A: non utilizzare

I ruoli astratti esistono solo per organizzare la tassonomia. Scrivere role="input" o role="section" nel tuo codice HTML è un errore di validazione e produce annunci imprevedibili perché questi ruoli non hanno un comportamento definito per la tecnologia assistiva.

Esempi di ruoli di riferimento

I ruoli Landmark sono gli esempi di ruoli ARIA più sicuri e di maggior impatto che puoi aggiungere a un vecchio sito XHTML/CSS perché non richiedono JavaScript e si associano direttamente alle regioni che già possiedi. Un tipico scheletro di pagina:

<header role="banner">
  <nav role="navigation" aria-label="Principale">
    <ul>...</ul>
  </nav>
</header>
<main role="main">
  <article>...</article>
  <aside role="complementary" aria-label="Articoli correlati">...</aside>
</main>
<footer role="contentinfo">...</footer>

Ogni ruolo marcatore corrisponde a un elemento nativo: banner a <header> al livello più alto, main a <main>, navigation a <nav>, complementary a <aside>, contentinfo a <footer>. Quando usi l’elemento nativo, il ruolo è implicito e non dovresti ripeterlo. L’attributo esplicito role guadagna il suo posto solo quando sei bloccato con il markup <div> che non puoi modificare, cosa comune nei modelli più vecchi e nell’output CMS.

Vale la pena dare un'occhiata: AudioEye — Accessibilità gestionale: automatizzazione combinata con revisione umana.

Qui sono necessarie due avvertenze. Innanzitutto, banner, main e contentinfo devono apparire una volta per pagina; diversi punti di riferimento “principali” interrompono la navigazione. In secondo luogo, quando esistono più punti di riferimento dello stesso tipo, ad esempio tre elementi "