aria-checked

Hvornår skal det bruges

På widgets med en tri-state eller binær afkrydsningssemantik: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" og role="switch". Hvis du bruger det native <input type="checkbox"> eller <input type="radio">, eksponerer browseren allerede den markerede tilstand over for hjælpeteknologi — duplikér den ikke med aria-checked.

Adskil det fra nærliggende tilstande:

• aria-checked — for “denne mulighed er valgt fra et sæt valg, ofte uafhængigt af andre”. Afkrydsningsfelter og radioknapper.
• aria-pressed — for skifteknapper (slå lyd fra / til). Elementet er konceptuelt en knap; tilstanden angiver, om handlingen er aktiv.
• aria-selected — for elementer inde i en enkeltvalg-container som en tablist, listbox eller tree. Tilstanden hører til containerens udvalgmodel, ikke elementet selv.

Sådan holdes det synkroniseret

Gyldige værdier er "true", "false", "mixed" og "undefined". Brug "mixed" kun på et overordnet afkrydsningsfelt, der opsummerer en gruppe af underordnede afkrydsningsfelter i uoverensstemmende tilstande (det klassiske “vælg alle” indeterminate-mønster). "undefined" er sjælden i praksis; de fleste bruger "false" i stedet.

Attributten skal afspejle, hvad brugeren ser. Uanset hvilken klik- og tastaturhåndtering der opdaterer det visuelle flueben, skal den også skrive den nye aria-checked-værdi i samme kodeafsnit. Stil aldrig et “markeret” udseende fra CSS uden at skifte attributten.

For role="radio" inde i en radiogroup bør nøjagtig én mulighed have aria-checked="true" på et givet tidspunkt; de øvrige skal være "false" (ikke fraværende).

Hyppige fejl

• Udeladelse af aria-checked helt på et role="checkbox"-element — skærmlæseren annoncerer “afkrydsningsfelt” uden tilstand.
• Skiftning af en klasse for at vise fluebenet, men aldrig opdatering af aria-checked.
• Brug af aria-checked="true" på et native <input type="checkbox"> — browseren ignorerer det, og den duplikerede tilstand kan komme ud af synkronisering.
• Sætning af aria-checked="mixed" på et enkelt afkrydsningsfelt i stedet for et overordnet, der opsummerer børn.
• Efterladelse af søskenderadioknapper uden aria-checked="false" — hjælpeteknologi kan ikke udlede den uforkrede tilstand.
• Forveksling af aria-checked med aria-selected på listbox-muligheder eller faner.

Eksempel

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">E-mail-præferencer</h3>

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