Rol Widget

`switch`

Markeert een element als een aan/uit-schakelaar. Functioneel vergelijkbaar met een selectievakje, maar aangekondigd als "schakelaar, aan" of "schakelaar, uit" in plaats van "aangevinkt" — past beter bij een instellingsschakelaar. Er is nog geen native HTML-equivalent.

Wanneer gebruiken

Voor een binaire instellingscontrol waarbij “aan” en “uit” de toestand beter beschrijven dan “aangevinkt” en “niet aangevinkt” — Wi-Fi, donkere modus, meldingen, vliegtuigmodus. Er is geen native HTML-schakelaar, dus zijn er twee geldige benaderingen:

<button type="button" role="switch" aria-checked="false"> — voorkeur, omdat de native buttonfocus en -activering worden geërfd.
<input type="checkbox" role="switch"> — ook acceptabel; formulierverzending werkt nog steeds, en de roloverschrijving wijzigt de aankondiging van hulptechnologie.

Gebruik role="switch" niet voor zaken die niet echt binair zijn. Als de actie navigeert, een menu opent of een proces start, gebruik dan button of link.

Toetsenbord + focuscontract

Volgens het APG switch-patroon:

Tab verplaatst de focus naar de schakelaar.
Spatie schakelt aria-checked om. Enter MOET ook schakelen (het APG beveelt beide aan, omdat gebruikers knopachtig gedrag van een knopgebaseerde schakelaar verwachten).
De focus blijft na het schakelen op de schakelaar.

aria-checked accepteert op een schakelaar alleen "true" of "false" — "mixed" is hier ongeldig.

Veelvoorkomende fouten

role="switch" zonder aria-checked bij de eerste render. De toestand is verplicht.
aria-checked="mixed" op een schakelaar. Alleen geldig voor een selectievakje.
aria-pressed gebruiken in plaats van aria-checked. aria-pressed hoort bij een wisselknop (dempen/dempen opheffen), waarbij de knop een actie uitvoert. Een schakelaar vertegenwoordigt een instellingstoestand.
Een schakelaar die aria-checked niet bijwerkt wanneer hij alleen via CSS wordt omgeschakeld.
Te kleine schakelaarraakoppervlakken die niet voldoen aan WCAG 2.5.8 Doelgrootte. Het interactieve gebied moet minimaal 24×24 CSS-pixels beslaan.

Voorbeeld

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Dark mode
</button>