Rolle Widget

`button`

Markerer et element som en knap — en kontrol, der udløser en handling ved aktivering. Brug det native HTML-element <button> først; brug kun role="button" på et <div> eller <span>, når det native element ikke er muligt.

Hvornår skal det bruges

Næsten aldrig — brug det native <button>-element. Det native element håndterer fokus, aktivering med mellemrum og enter, den deaktiverede tilstand og form-indsendelsessemantik uden ekstra arbejde. At bruge role="button" på et <div> betyder, at man skal genimplementere alt dette, og de fleste forfattere gør det ikke.

De legitime tilfælde for role="button" er snævre:

Du er begrænset af et tredjeparts designsystem, der leverer ikke-knap-komponenter.
Du arbejder i et miljø, hvor <button> ikke er tilgængeligt (nogle ældre CMS-skabeloner).
Du opgraderer et <div> til tilgængelighed på kort sigt, mens du planlægger en refaktorering.

Hvis du bruger role="button", skal du også:

Gøre elementet fokuserbart med tabindex="0".
Tilslutte keydown for både Enter og Space (med event.preventDefault() på Space for at forhindre siderul).
Håndtere den deaktiverede tilstand selv via aria-disabled="true" og forhindre click-handlere i at udløses.

Skifteknapper

Hvis knappen er en skifteknap (slå lyd fra / til, afspil / pause, følg / stop med at følge), skal du sætte aria-pressed til "true" eller "false". Skærmlæsere annoncerer tilstanden sammen med etiketten: “Slå lyd fra, skifteknap, ikke trykket”.

Hyppige fejl

<div onclick="…">Indsend</div> — ikke fokuserbart, ikke tastatur-operabelt, ingen rolle. Musbrugere kan bruge det; ingen andre kan.
<a href="#" onclick="…"> forklædt som en knap. Browseren behandler det som et link, skærmlæseren annoncerer det som et link, og brugeren forventer navigation.
role="button" uden tabindex="0" — skærmlæseren annoncerer “knap”, men tastaturet kan ikke nå det.
Brugerdefinerede knapper, der reagerer på Enter men ikke Space.
Knapper uden tilgængeligt navn — ikonknapper uden aria-label er den hyppigste fejl, som axe-core registrerer.

Eksempel

<!-- Foretrukket -->
<button type="button" aria-pressed="false">Slå lyd fra</button>

<!-- Kun når <button> er umuligt -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggleMute()"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMute(); }"
>
  Slå lyd fra
</div>