Ruoli ARIA

Definizione — I ruoli ARIA (Accessible Rich Internet Applications) descrivono la funzione di un elemento per le tecnologie assistive. Insieme a stati e proprietà (aria-*) permettono di rendere accessibili componenti custom (tab, menù, dialog, slider). Regola d’oro: prima l’HTML semantico; usa ARIA solo quando il tag nativo non è sufficiente.

Esempi di ruoli comuni

• role="button" — pulsante (da preferire <button> nativo).
• role="navigation" — area di navigazione (meglio <nav>).
• role="dialog" + aria-modal="true" — finestra modale, con focus gestito.
• role="tablist", role="tab", role="tabpanel" — interfaccia a schede (con roving tabindex).
• role="listbox"/option — liste selezionabili; role="menu"/menuitem per veri menù applicativi.
• role="status" / role="alert" — messaggi live (aria-live implicito: polite/assertive).
• role="progressbar", role="switch", role="tooltip" — componenti di stato/feedback.

Stati e proprietà (sincronizzazione)

• aria-expanded per elementi che si aprono/chiudono (accordion, menù); aggiorna sempre il valore su click/tastiera.
• aria-selected per tab e opzioni; aria-pressed per pulsanti a stato.
• aria-controls per associare il trigger al pannello controllato; aria-labelledby/aria-label per il nome accessibile.

Pattern essenziali

Tablist (principio)

<div role="tablist">
  <button role="tab" aria-selected="true"  aria-controls="p1" id="t1" tabindex="0">Profilo</button>
  <button role="tab" aria-selected="false" aria-controls="p2" id="t2" tabindex="-1">Impostazioni</button>
</div>
<section id="p1" role="tabpanel" aria-labelledby="t1">…</section>
<section id="p2" role="tabpanel" aria-labelledby="t2" hidden>…</section>

Dialog modale

<div role="dialog" aria-modal="true" aria-labelledby="dlg-title">
  <h2 id="dlg-title">Preferenze</h2>
  <button>Chiudi</button>
</div>

Buone pratiche

• Preferisci sempre elementi nativi (button, nav, main, details/summary).
• Nome/ruolo/stato (WCAG 4.1.2) devono riflettere il comportamento reale e aggiornarsi al variare dell’UI.
• Gestisci la tastiera secondo i pattern WAI-ARIA Authoring Practices (Tab, frecce, Home/End, Esc).
• Evita ARIA superflua o errata (es. role="button" su un link che porta a una pagina).

Errori comuni

• Usare ARIA per “truccare” semantica mancante (div-bottoni) invece di correggere il markup.
• Non aggiornare aria-expanded/aria-selected quando cambia lo stato.
• Ruoli in conflitto con l’elemento nativo (es. role="navigation" su <section> generica).