Ruolo Widget

`option`

Contrassegna un elemento come voce selezionabile all'interno di un listbox. Un option DEVE essere un discendente di un listbox (direttamente, o tramite aria-owns). Si utilizzi il nativo <option> dentro <select>; si ricorre a role="option" solo quando si costruisce un listbox personalizzato o un popup di combobox.

Quando usarlo

Si utilizzi <option> dentro <select>. L’elemento nativo porta ogni comportamento gratuitamente.

role="option" è per le voci all’interno di un role="listbox" personalizzato — tipicamente il popup di un combobox o un selettore multi-valore che il nativo non può stilizzare. Ogni elemento option DEVE avere un id univoco affinché il combobox o il listbox padre possa riferirsi ad esso tramite aria-activedescendant.

Se l’option rappresenta una scelta stile checkbox in un listbox multi-selezione, si imposti aria-selected="true". Si utilizzi aria-checked solo per il raro pattern option-con-segno-di-spunta (la maggior parte dei listbox multi-selezione usa aria-selected).

Errori comuni

role="option" fuori da un elemento padre con role="listbox". Lo screen reader annuncia un’option orfana senza contesto di gruppo.
id mancante su un’option che deve essere il target di aria-activedescendant — il combobox non riesce a puntarvi.
Aggiornare una classe CSS .selected senza aggiornare aria-selected. L’albero visivo e quello di accessibilità non sono più allineati.
aria-selected="false" su ogni option in un listbox a selezione singola dove una dovrebbe essere quella predefinita. Si imposti aria-selected="true" su una.
Option che sono esse stesse pulsanti o link (<a role="option">). La semantica di option sovrascrive quella di link nell’AT, ma il comportamento al clic rimane — il che è fonte di confusione.

Esempio

<label id="lang">Lingua</label>
<ul
  role="listbox"
  aria-labelledby="lang"
  tabindex="0"
  aria-activedescendant="lang-2"
>
  <li id="lang-1" role="option" aria-selected="false">English</li>
  <li id="lang-2" role="option" aria-selected="true">Spanish</li>
  <li id="lang-3" role="option" aria-selected="false">French</li>
</ul>