aria-checked

Wanneer gebruiken

Op widgets met een tri-state of binaire aanvinksemantiek: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" en role="switch". Bij gebruik van het native <input type="checkbox"> of <input type="radio"> stelt de browser de aangevinkte toestand al bloot aan hulptechnologie — dupliceer dit niet met aria-checked.

Onderscheid met aanverwante toestanden:

• aria-checked — voor “deze optie is geselecteerd uit een set keuzes, vaak onafhankelijk van andere”. Aankruisvakjes en keuzerondjes.
• aria-pressed — voor schakelknoppen (dempen / ondempen). Het element is conceptueel een knop; de toestand geeft aan of de actie momenteel actief is.
• aria-selected — voor items in een container met enkelvoudige selectie, zoals een tablist, listbox of tree. De toestand behoort tot het selectiemodel van de container, niet tot het item zelf.

Synchronisatie

Geldige waarden zijn "true", "false", "mixed" en "undefined". Gebruik "mixed" uitsluitend op een bovenliggend aankruisvakje dat een groep onderliggende aankruisvakjes met inconsistente toestanden samenvat (het klassieke “alles selecteren”-patroon). "undefined" is zelden nodig in de praktijk; de meeste auteurs gebruiken "false".

Het attribuut moet weerspiegelen wat de gebruiker ziet. Elke klik- en toetsenbordafhandelaar die de visuele vinkmarkering bijwerkt, moet ook de nieuwe aria-checked-waarde in hetzelfde codepad schrijven. Stijl nooit een “aangevinkte” weergave in CSS zonder het attribuut om te zetten.

Voor role="radio" binnen een radiogroup dient precies één optie op elk moment aria-checked="true" te dragen; de overige moeten "false" zijn (niet afwezig).

Veelvoorkomende fouten

• aria-checked volledig weglaten op een role="checkbox"-element — de schermlezer kondigt “aankruisvakje” aan zonder toestand.
• Een klasse omschakelen om het vinkje te tonen, maar aria-checked nooit bijwerken.
• aria-checked="true" gebruiken op een native <input type="checkbox"> — de browser negeert dit en de dubbele toestand kan uit de pas lopen.
• aria-checked="mixed" instellen op een enkel aankruisvakje in plaats van op een bovenliggend element dat onderliggende elementen samenvat.
• Nevenliggende keuzerondjes zonder aria-checked="false" laten — hulptechnologie kan de niet-aangevinkte toestand niet afleiden.
• aria-checked verwarren met aria-selected op listbox-opties of tabbladen.

Voorbeeld

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">Email preferences</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Send me weekly summaries
  </div>
</div>