Per cosa è stato aggiunto l'attributo roll?

L'attributo role viene utilizzato in ARIA (Applicazioni Internet Ricche Accessibili) per definire esplicitamente il tipo di interfaccia utente di un elemento. Questo aiuta le tecnologie assistive, come gli screen reader, a comprendere la funzione dell'elemento e a trasmettere queste informazioni agli utenti con disabilità. Completa la semantica HTML, soprattutto per gli elementi che non hanno semantica incorporata o quando la semantica standard non è sufficiente.

Ad esempio:

Un elemento div con ruolo button sarà percepito dallo screen reader come un pulsante, anche se non ha comportamento standard o semantica HTML di pulsante.

<div role="button" tabindex="0" aria-pressed="false">
  Cliccami
</div>

Il ruolo navigation su un elemento nav (anche se nav ha già una semantica di navigazione incorporata) può migliorare la sua interpretazione in alcuni casi.

<nav role="navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

Alcuni widget complessi creati da elementi non semantici ricevono i loro ruoli per una rappresentazione corretta:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Scheda 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Scheda 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Contenuto della scheda 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Contenuto della scheda 2.
</div>

L'attributo role classifica gli elementi in base alla loro funzione e scopo, garantendo un'interazione più precisa e utile per gli utenti che utilizzano tecnologie assistive. È importante usarlo insieme ad altri attributi ARIA (ad esempio, aria-label, aria-expanded, aria-hidden) che trasmettono lo stato e le proprietà degli elementi.

Ricordare:

La priorità è sempre data alla semantica nativa HTML5. Se esiste un elemento HTML appropriato, usalo invece di simulare il suo comportamento tramite role e altri attributi ARIA. Ad esempio, usa <button> invece di <div role="button">.
Cambiare il ruolo di un elemento non ne modifica il comportamento incorporato. Ad esempio, role="button" su un div non lo rende focalizzabile o attivabile con Space o Enter senza JavaScript aggiuntivo.