Een knop: “Donkere modus.” Je klikt. De achtergrond wordt donker. Visueel is het duidelijk: donkere modus is aan.
Een schermlezer zegt: “Donkere modus, knop.” Je klikt. De schermlezer zegt: “Donkere modus, knop.” Niets veranderd. Is het aan of uit? Geen idee.
Het probleem: de knop heeft geen status. Er is geen aria-pressed dat aangeeft of de knop is ingedrukt.
<!-- Niet doen: toggle zonder status -->
<button class="toggle active">Donkere modus</button>
<!-- Wel doen: aria-pressed geeft de status door -->
<button aria-pressed="true">Donkere modus</button>
Een schermlezer leest nu: “Donkere modus, ingedrukt, knop.” Bij het uitschakelen: “Donkere modus, niet ingedrukt, knop.”
Hetzelfde geldt voor zelfgemaakte checkboxen:
<!-- Niet doen: checkbox zonder status -->
<div role="checkbox" tabindex="0">Onthoud mij</div>
<!-- Wel doen: aria-checked geeft de status door -->
<div role="checkbox" tabindex="0" aria-checked="false">Onthoud mij</div>
En vergeet niet: de waarde moet meeveranderen bij interactie. aria-pressed="true" bij klikken wijzigen naar aria-pressed="false". Anders is de status statisch en dus fout.
