aria-selected

Quando utilizzarlo

Sugli elementi che appartengono a un contenitore dotato di un modello di selezione:

• role="tab" all’interno di un tablist (esattamente uno selezionato).
• role="option" all’interno di un listbox (uno o più, a seconda di aria-multiselectable).
• role="treeitem" all’interno di un tree.
• role="gridcell", role="row", role="columnheader", role="rowheader" all’interno di un grid.

Lo stato descrive la relazione tra l’elemento e il modello di selezione del contenitore — non un semplice on/off come una checkbox. È necessario scegliere lo stato corretto in base al pattern:

• aria-selected — elementi in un contesto tab, option, tree o grid.
• aria-checked — checkbox e pulsanti radio (scelte indipendenti).
• aria-pressed — pulsanti di attivazione/disattivazione (il pulsante stesso è attivo o inattivo).

Un errore frequente consiste nell’impostare aria-selected="true" su un <button> per indicare «l’utente ha fatto clic su di me per ultimo». Se l’elemento non fa parte di un widget di selezione, è preferibile usare aria-pressed o aria-current.

Come mantenerlo sincronizzato

I valori validi sono "true" e "false". È necessario impostare "false" sugli elementi non selezionati anziché omettere l’attributo — in questo modo le tecnologie assistive annunciano correttamente informazioni di posizione come «1 di 5». In un widget a selezione singola (tablist, listbox a selezione singola), esattamente un elemento alla volta deve essere "true".

L’attributo deve cambiare in sincronia con l’indicatore visivo e con la gestione del focus. In un tablist, lo spostamento della selezione di solito implica anche lo spostamento di tabindex="0" sul tab selezionato e tabindex="-1" sugli altri.

Errori comuni

• Utilizzo di aria-selected su un pulsante o un link al di fuori di qualsiasi contenitore di selezione.
• Più elementi con aria-selected="true" in un tablist o listbox a selezione singola.
• Mancato ripristino di aria-selected="false" sull’elemento precedentemente selezionato quando la selezione cambia.
• Applicazione di uno stile «selezionato» tramite CSS senza aggiornare l’attributo.
• Confusione tra aria-selected e aria-checked sulle opzioni di un listbox (usare sempre selected) o con aria-current su un link di navigazione (current, non selected).
• Impostazione di aria-selected su role="menuitem" — le voci di menu non supportano questo attributo; utilizzare aria-checked per le checkbox e i radio nei menu.

Esempio

<div role="tablist" aria-label="Sections">
  <button role="tab" id="tab-1" aria-selected="true"  tabindex="0"  aria-controls="panel-1">Overview</button>
  <button role="tab" id="tab-2" aria-selected="false" tabindex="-1" aria-controls="panel-2">Details</button>
  <button role="tab" id="tab-3" aria-selected="false" tabindex="-1" aria-controls="panel-3">Reviews</button>
</div>