aria-pressed

Quando utilizzarlo

Su un pulsante che funziona come alternanza — disattiva audio / attiva audio, segui / smetti di seguire, grassetto / non grassetto in un editor di testo, barra laterale aperta / barra laterale chiusa. Il pulsante cambia stato ma non esegue la navigazione; l’etichetta rimane invariata ed è solo lo stato premuto a comunicare il cambiamento.

Sono validi tre valori:

• aria-pressed="false" — l’alternanza è disattiva.
• aria-pressed="true" — l’alternanza è attiva.
• aria-pressed="mixed" — utilizzato quando l’alternanza controlla più sotto-elementi e si trovano in uno stato misto (alcuni attivi, altri no). Raro in pratica; la maggior parte degli autori preferisce suddividerli in controlli separati.

Se il pulsante non alterna — si limita a inviare un modulo o ad aprire un modale — non si deve usare aria-pressed. Si usi aria-expanded per i controlli di tipo disclosure, o nessun attributo di stato per i semplici pulsanti d’azione.

Come mantenerlo sincronizzato

aria-pressed è uno stato, il che significa che cambia man mano che l’utente interagisce. Qualunque gestore di clic aggiorni l’aspetto visivo del pulsante deve aggiornare anche l’attributo. I due non devono mai essere in disaccordo — se l’icona mostra audio disattivato, aria-pressed deve essere "true".

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Mute
</button>

Errori comuni

• Impostare aria-pressed su un elemento non-pulsante (un <div> o un <a>). Si usi role="button" o, meglio, si passi a <button>.
• Alternare lo stato visivo con CSS senza mai aggiornare aria-pressed. Gli utenti di screen reader continuano a sentire lo stesso stato.
• Usare aria-pressed="true" su un pulsante che non alterna (un pulsante «Invia») — confonde la tecnologia assistiva, che annuncia uno stato irrilevante.
• Confondere aria-pressed con aria-selected (per gli elementi in un widget a selezione singola come una scheda o un’opzione) o aria-checked (per le caselle di spunta e i pulsanti radio). Ciascuno ha semantica diversa; si scelga quello che corrisponde al pattern del widget.