Rol Widget

`checkbox`

Markeert een element als twee- of drietoestandsaankruisvakje. Gebruik <input type="checkbox"> bij voorkeur; kies voor role="checkbox" alleen als het native element niet beschikbaar is — bijvoorbeeld bij een drietoestandsbediening met een gemengde waarde.

Wanneer gebruiken

Gebruik <input type="checkbox">. Het native element biedt focus, spatie-activering, de pseudo-klasse :checked, formulierverzending en de JS-eigenschap indeterminate voor drietoestanden. role="checkbox" bestaat voor twee gevallen:

Een drietoestandsaankruisvakje is nodig dat wordt weergegeven als aria-checked="mixed" (een “alles selecteren” dat de toestand van onderliggende elementen weergeeft).
Een ontwerpsysteem levert een aangepast aankruisvakje dat niet vervangen kan worden.

Bij implementatie van role="checkbox" op een niet-inputelement dient aria-checked (verplicht) ingesteld te worden, tabindex="0" beheerd te worden en keydown voor Space afgehandeld te worden.

Toetsenbord- en focuscontract

Conform het APG-aankruisvakjespatroon:

Tab verplaatst de focus naar het aankruisvakje.
Space schakelt aria-checked tussen "true" en "false" (en "mixed" voor drietoestanden).
Enter activeert een aankruisvakje NIET — alleen Space. (Native inputs negeren Enter ook in de meeste browsers.)

Focus blijft na activering op het aankruisvakje.

Veelvoorkomende fouten

role="checkbox" zonder ingesteld aria-checked-attribuut. De toestand is verplicht zodra het element in de DOM staat.
aria-checked="true" gebruiken als uitsluitend een CSS-hook — de visuele weergave bijwerken zonder het attribuut bij klik bij te werken.
Aangepaste aankruisvakjes die reageren op klik maar niet op Space.
Een native <input> inpakken in een <div role="checkbox"> — dubbele semantiek verwaart schermlezers.
Drietoestandscontroles die Space laten doorlopen via false → true → mixed → false. APG schrijft voor: false → true → false; mixed wordt programmatisch door de pagina ingesteld, niet door de gebruiker.

Voorbeeld

<!-- Voorkeur -->
<label>
  <input type="checkbox" name="terms" required>
  I agree to the terms
</label>

<!-- Aangepast drietoestand "alles selecteren" -->
<div
  role="checkbox"
  tabindex="0"
  aria-checked="mixed"
  aria-labelledby="selectAllLabel"
>
</div>
<span id="selectAllLabel">Select all rows</span>