Ruolo Widget

`button`

Contrassegna un elemento come pulsante — un controllo che attiva un'azione quando viene azionato. È preferibile utilizzare l'elemento HTML nativo <button>; ricorrere a role="button" su un <div> o uno <span> soltanto quando non è possibile usare l'elemento nativo.

Quando utilizzarlo

Quasi mai — è preferibile utilizzare l’elemento nativo <button>. L’elemento nativo gestisce gratuitamente il focus, l’attivazione tramite i tasti Spazio e Invio, lo stato disabilitato e la semantica di invio del modulo. Ricorrere a role="button" su un <div> significa dover reimplementare tutto ciò, e la maggior parte degli autori non lo fa correttamente.

I casi legittimi per role="button" sono circoscritti:

Si è vincolati da un sistema di design di terze parti che distribuisce componenti non basati su <button>.
Si opera in un ambiente in cui <button> non è disponibile (alcuni template di CMS legacy).
Si sta aggiornando un <div> per l’accessibilità a breve termine mentre si pianifica un refactoring.

Se si utilizza role="button", è necessario anche:

Rendere l’elemento raggiungibile con il focus tramite tabindex="0".
Collegare l’evento keydown sia per Enter che per Space (con event.preventDefault() su Space per evitare lo scorrimento della pagina).
Gestire autonomamente lo stato disabilitato tramite aria-disabled="true" e impedire l’attivazione dei gestori di clic.

Pulsanti a commutazione

Se il pulsante è un toggle (mute / unmute, play / pause, segui / non seguire), impostare aria-pressed su "true" o "false". Gli screen reader annunciano lo stato insieme all’etichetta: «Mute, pulsante di commutazione, non premuto».

Errori comuni

<div onclick="…">Submit</div> — non raggiungibile con il focus, non utilizzabile da tastiera, privo di ruolo. Gli utenti del mouse possono interagirvi; nessun altro può.
<a href="#" onclick="…"> che si comporta da pulsante. Il browser lo tratta come un link, lo screen reader lo annuncia come link, l’utente si aspetta una navigazione.
role="button" senza tabindex="0" — lo screen reader annuncia «pulsante» ma la tastiera non riesce a raggiungerlo.
Pulsanti personalizzati che rispondono a Invio ma non a Spazio.
Pulsanti senza nome accessibile — i pulsanti con sola icona privi di aria-label sono il singolo errore più comune rilevato da axe-core.

Esempio

<!-- Preferito -->
<button type="button" aria-pressed="false">Mute</button>

<!-- Solo quando <button> è impossibile -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggleMute()"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMute(); }"
>
  Mute
</div>