Rol Widget

`button`

Markeert een element als knop — een bedieningselement dat een actie uitvoert bij activering. Gebruik bij voorkeur het native HTML-element <button>; gebruik role="button" op een <div> of <span> alleen als het native element echt niet beschikbaar is.

Wanneer gebruiken

Bijna nooit — gebruik het native <button>-element. Het native element regelt focus, activering via de spatie- en entertoets, de uitgeschakelde toestand en de semantiek voor formulierverzending zonder extra inspanning. Wie kiest voor role="button" op een <div>, moet dit allemaal zelf implementeren, en dat gaat vaak fout.

Legitieme gevallen voor role="button" zijn beperkt:

Men werkt met een extern ontwerpsysteem dat geen native knopelementen levert.
Men werkt in een omgeving waar <button> niet beschikbaar is (sommige legacy-CMS-sjablonen).
Men verbetert tijdelijk een <div> voor toegankelijkheid terwijl een refactor gepland staat.

Bij gebruik van role="button" is het volgende verplicht:

Het element focusbaar maken met tabindex="0".
keydown afhandelen voor zowel Enter als Space (met event.preventDefault() op Space om paginascrolling te voorkomen).
De uitgeschakelde toestand zelf beheren via aria-disabled="true" en klikafhandelaars blokkeren.

Schakelknoppen

Als de knop een schakelaar is (dempen / ondempen, afspelen / pauzeren, volgen / ontvolgen), dient aria-pressed op "true" of "false" te worden ingesteld. Schermlezers kondigen de toestand aan samen met het label: “Dempen, schakelknop, niet ingedrukt”.

Veelvoorkomende fouten

<div onclick="…">Verzenden</div> — niet focusbaar, niet bedienbaar via toetsenbord, geen rol. Muisgebruikers kunnen het gebruiken; anderen niet.
<a href="#" onclick="…"> als vervanging voor een knop. De browser behandelt het als een koppeling; de schermlezer kondigt het aan als een koppeling; de gebruiker verwacht navigatie.
role="button" zonder tabindex="0" — de schermlezer kondigt “knop” aan, maar het toetsenbord kan het element niet bereiken.
Aangepaste knoppen die reageren op Enter maar niet op Space.
Knoppen zonder toegankelijke naam — pictogramknoppen zonder aria-label zijn de meest voorkomende fout die axe-core signaleert.

Voorbeeld

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

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