checkbox

Hvornår skal det bruges

Brug <input type="checkbox">. Det native element giver dig fokus, Space-aktivering, pseudo-klassen :checked, formularindsendelse og JS-egenskaben indeterminate til tri-state. role="checkbox" eksisterer til to tilfælde:

• Du har brug for et tri-state-afkrydsningsfelt eksponeret som aria-checked="mixed" (et “vælg alle”, der afspejler børnenes tilstand).
• Et designsystem leverer en brugerdefineret afkrydsningsfelt-komponent, du ikke kan erstatte.

Hvis du implementerer role="checkbox" på et ikke-input-element, skal du sætte aria-checked (det er påkrævet), håndtere tabindex="0" og håndtere keydown for Space.

Tastatur- og fokuskontrakt

Ifølge APG checkbox-mønsteret:

• Tab flytter fokus til afkrydsningsfeltet.
• Space skifter aria-checked mellem "true" og "false" (og "mixed" for tri-state).
• Enter aktiverer IKKE et afkrydsningsfelt — kun Space. (Native inputs ignorerer også Enter i de fleste browsere.)

Fokus forbliver på afkrydsningsfeltet efter aktivering.

Hyppige fejl

• role="checkbox" uden aria-checked-attribut. Tilstanden er påkrævet, fra det øjeblik elementet er i DOM.
• Brug af aria-checked="true" som en klasse-hook alene — opdatering af det visuelle men aldrig attributten ved klik.
• Brugerdefinerede afkrydsningsfelter, der reagerer på klik men ikke på Space.
• Indpakning af et native <input> inde i en <div role="checkbox"> — duplikerede semantikker forvirrer skærmlæsere.
• Tri-state-kontroller, der cykler Space igennem false → true → mixed → false. APG specificerer false → true → false; mixed sættes programmatisk af siden, ikke af brugeren.

Eksempel

<!-- Foretrukket -->
<label>
  <input type="checkbox" name="terms" required>
  Jeg accepterer vilkårene
</label>

<!-- Brugerdefineret tri-state "vælg alle" -->
<div
  role="checkbox"
  tabindex="0"
  aria-checked="mixed"
  aria-labelledby="selectAllLabel"
>
</div>
<span id="selectAllLabel">Vælg alle rækker</span>