Roll Widget

`button`

Markerar ett element som en knapp — en kontroll som utlöser en åtgärd vid aktivering. Använd det inbyggda HTML-elementet <button> i första hand; nå bara för role="button" på en <div> eller <span> när det inbyggda elementet är omöjligt att använda.

När ska rollen användas

Nästan aldrig — använd det inbyggda <button>-elementet. Det inbyggda elementet hanterar fokus, aktivering via blanksteg och Enter, inaktiverat tillstånd och semantik för formulärinlämning utan extra kod. Att använda role="button" på en <div> innebär att du måste återimplementera allt detta, och de flesta gör det inte ordentligt.

De legitima fallen för role="button" är snäva:

Du är begränsad av ett tredjepartssystem som levererar icke-knapp-komponenter.
Du arbetar i en miljö där <button> inte är tillgängligt (vissa äldre CMS-mallar).
Du uppgraderar en <div> för tillgänglighet på kort sikt inför en planerad refaktorering.

Om du använder role="button" måste du också:

Göra elementet fokuserbart med tabindex="0".
Koppla keydown för både Enter och Space (med event.preventDefault() på Space för att förhindra att sidan scrollar).
Hantera inaktiverat tillstånd själv via aria-disabled="true" och förhindra att klickhanterare aktiveras.

Växlingsknappar

Om knappen är en växlingsknapp (ljud av/på, spela/pausa, följ/sluta följa), sätt aria-pressed till "true" eller "false". Skärmläsare meddelar tillståndet tillsammans med etiketten: “Ljud av, växlingsknapp, ej nedtryckt”.

Vanliga fel

<div onclick="…">Skicka</div> — inte fokuserbart, ej tangentbordsopererbart, ingen roll. Musanvändare kan använda det; ingen annan kan.
<a href="#" onclick="…"> som maskerar sig som en knapp. Webbläsaren behandlar det som en länk, skärmläsaren meddelar det som en länk, användaren förväntar sig navigering.
role="button" utan tabindex="0" — skärmläsaren meddelar “knapp” men tangentbordet kan inte nå elementet.
Egna knappar som svarar på Enter men inte Space.
Knappar utan tillgängligt namn — ikonknappar som saknar aria-label är det vanligaste felet som axe-core fångar.

Exempel

<!-- Föredraget -->
<button type="button" aria-pressed="false">Ljud av</button>

<!-- Endast när <button> är omöjligt -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggleMute()"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMute(); }"
>
  Ljud av
</div>