Normative · ARIA

Ruolo Widget

switch

Contrassegna un elemento come interruttore on/off. Funzionalmente simile a una checkbox, ma annunciato come "switch, on" o "switch, off" anziché "checked" — si adatta meglio a un'opzione di attivazione nelle impostazioni. Non esiste ancora un equivalente HTML nativo.

Quando usarlo

Per un controllo binario nelle impostazioni in cui «on» e «off» descrivono lo stato meglio di «selezionato» e «non selezionato» — Wi-Fi, modalità scura, notifiche, modalità aereo. Non esiste un elemento switch nativo in HTML, pertanto sono validi due approcci:

  1. <button type="button" role="switch" aria-checked="false"> — preferibile, poiché si ereditano il focus e l’attivazione nativi del pulsante.
  2. <input type="checkbox" role="switch"> — ugualmente accettabile; l’invio del modulo funziona ancora e l’override del ruolo modifica il modo in cui la tecnologia assistiva lo annuncia.

Non si deve usare role="switch" per elementi che non siano genuinamente binari. Se l’azione porta a una navigazione, apre un menu o avvia un processo, è necessario usare button o link.

Contratto tastiera + focus

In base al pattern switch dell’APG:

  • Tab sposta il focus sullo switch.
  • Spazio attiva/disattiva aria-checked. Anche Invio DOVREBBE attivare/disattivare (l’APG raccomanda entrambi, poiché gli utenti si aspettano un comportamento simile a un pulsante da uno switch basato su pulsante).
  • Il focus rimane sullo switch dopo l’attivazione/disattivazione.

aria-checked accetta solo "true" o "false" su uno switch — "mixed" non è valido in questo contesto.

Errori comuni

  • role="switch" senza aria-checked al primo render. Lo stato è obbligatorio.
  • aria-checked="mixed" su uno switch. Valido solo per checkbox.
  • Usare aria-pressed al posto di aria-checked. aria-pressed appartiene a un toggle button (muto/non muto), dove il pulsante esegue un’azione. Uno switch rappresenta lo stato di un’impostazione.
  • Uno switch che non aggiorna aria-checked quando viene attivato/disattivato solo tramite CSS.
  • Aree interattive dello switch troppo ridotte che non soddisfano WCAG 2.5.8 Target Size. L’area interattiva deve raggiungere 24×24 pixel CSS.

Esempio

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Modalità scura
</button>