checkbox

När ska rollen användas

Använd <input type="checkbox">. Det inbyggda elementet ger fokus, aktivering via Space, pseudoklassen :checked, formulärinlämning och egenskapen indeterminate i JavaScript för tri-state. role="checkbox" finns för två fall:

• Du behöver en tri-state-kryssruta exponerad som aria-checked="mixed" (ett “markera alla” som återspeglar underordnade element).
• Ett designsystem levererar en anpassad kryssrutekomponent du inte kan ersätta.

Om du implementerar role="checkbox" på ett icke-input-element måste du sätta aria-checked (det krävs), hantera tabindex="0" och hantera keydown för Space.

Tangentbord och fokuskontrakt

Enligt APG:s checkbox-mönster:

• Tab flyttar fokus till kryssrutan.
• Space växlar aria-checked mellan "true" och "false" (och "mixed" för tri-state).
• Enter aktiverar INTE en kryssruta — endast Space. (Inbyggda input-element ignorerar också Enter i de flesta webbläsare.)

Fokus stannar på kryssrutan efter aktivering.

Vanliga fel

• role="checkbox" utan att aria-checked-attributet är satt. Tillståndet krävs från det ögonblick elementet finns i DOM.
• Att använda aria-checked="true" enbart som en CSS-krok — uppdatera det visuella utseendet men aldrig attributet vid klick.
• Anpassade kryssrutor som svarar på klick men inte på Space.
• Att linda in ett inbyggt <input> inuti en <div role="checkbox"> — duplicerad semantik förvirrar skärmläsare.
• Tri-state-kontroller som med Space cyklar false → true → mixed → false. APG specificerar false → true → false; mixed sätts programmatiskt av sidan, inte av användaren.

Exempel

<!-- Föredraget -->
<label>
  <input type="checkbox" name="terms" required>
  Jag godkänner villkoren
</label>

<!-- Anpassat tri-state "markera alla" -->
<div
  role="checkbox"
  tabindex="0"
  aria-checked="mixed"
  aria-labelledby="selectAllLabel"
>
</div>
<span id="selectAllLabel">Markera alla rader</span>