Stato Stato del widget

`aria-checked`

Indica lo stato di selezione corrente di una checkbox, di un radio button o di una voce di menu di tipo check. Accetta i valori "true", "false" o "mixed". La checkbox HTML nativa gestisce questo automaticamente — impostarlo manualmente soltanto su widget personalizzati.

Quando utilizzarlo

Su widget che hanno una semantica di selezione binaria o tri-stata: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" e role="switch". Se si utilizza l’elemento nativo <input type="checkbox"> o <input type="radio">, il browser espone già lo stato di selezione alla tecnologia assistiva — non è necessario duplicarlo con aria-checked.

Distinzione dagli stati correlati:

aria-checked — per «questa opzione è selezionata da un insieme di scelte, spesso indipendentemente dalle altre». Checkbox e radio button.
aria-pressed — per i pulsanti di attivazione (muto / non muto). L’elemento è concettualmente un pulsante; lo stato indica se l’azione è attualmente attiva.
aria-selected — per gli elementi all’interno di un contenitore a selezione singola come tablist, listbox o tree. Lo stato appartiene al modello di selezione del contenitore, non all’elemento stesso.

Come mantenerlo sincronizzato

I valori validi sono "true", "false", "mixed" e "undefined". Utilizzare "mixed" soltanto su una checkbox padre che riassume un gruppo di checkbox figlie in stati inconsistenti (il classico pattern indeterminate di «seleziona tutto»). "undefined" è raro in pratica; la maggior parte degli autori usa "false" al suo posto.

L’attributo deve riflettere ciò che l’utente vede. Qualunque gestore di click e di tastiera aggiorni il segno di spunta visivo deve anche scrivere il nuovo valore di aria-checked nello stesso percorso di codice. Non impostare mai un aspetto «selezionato» tramite CSS senza aggiornare l’attributo.

Per role="radio" all’interno di un radiogroup, esattamente un’opzione deve avere aria-checked="true" in ogni momento; le altre devono essere "false" (non assenti).

Errori comuni

Omettere del tutto aria-checked su un elemento role="checkbox" — lo screen reader annuncia «checkbox» senza stato.
Alternare una classe per mostrare il segno di spunta senza mai aggiornare aria-checked.
Usare aria-checked="true" su un <input type="checkbox"> nativo — il browser lo ignora e lo stato duplicato può andare fuori sincronia.
Impostare aria-checked="mixed" su una singola checkbox anziché su una padre che riassume i figli.
Lasciare i radio button fratelli privi di aria-checked="false" — la tecnologia assistiva non può dedurre lo stato non selezionato.
Confondere aria-checked con aria-selected sulle opzioni di listbox o sulle tab.

Esempio

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">Preferenze e-mail</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Inviami riepiloghi settimanali
  </div>
</div>