aria-checked

När ska tillståndet användas

På widgetar som har en tri-state- eller binär krysssemanstik: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" och role="switch". Om du använder det inbyggda <input type="checkbox"> eller <input type="radio"> exponerar webbläsaren redan det kryssade tillståndet för hjälpmedelsteknik — duplicera det inte med aria-checked.

Skilj på angränsande tillstånd:

• aria-checked — för “det här alternativet är valt från en uppsättning val, ofta oberoende av andra”. Kryssrutor och radioknappar.
• aria-pressed — för växlingsknappar (ljud av/på). Elementet är konceptuellt en knapp; tillståndet anger om åtgärden är aktiv.
• aria-selected — för objekt inuti en container med enval som tablist, listbox eller tree. Tillståndet tillhör containerns urvalsmodell, inte objektet självt.

Hålla det synkat

Giltiga värden är "true", "false", "mixed" och "undefined". Använd "mixed" bara på en överordnad kryssruta som sammanfattar en grupp underordnade kryssrutor i inkonsekventa tillstånd (det klassiska mönstret för “markera alla” i obestämt tillstånd). "undefined" används sällan i praktiken; de flesta författare använder "false" istället.

Attributet måste återspegla vad användaren ser. Den klick- och tangentbordshanterare som uppdaterar den visuella kryssmarkeringen måste också skriva det nya aria-checked-värdet i samma kodsökväg. Ge aldrig ett “kryssat” utseende från CSS utan att samtidigt uppdatera attributet.

För role="radio" inuti en radiogroup bör exakt ett alternativ bära aria-checked="true" åt gången; de övriga måste vara "false" (inte frånvarande).

Vanliga fel

• Utelämna aria-checked helt på ett role="checkbox"-element — skärmläsaren meddelar “kryssruta” utan tillstånd.
• Växla en CSS-klass för att visa kryssmarkeringen men aldrig uppdatera aria-checked.
• Använda aria-checked="true" på ett inbyggt <input type="checkbox"> — webbläsaren ignorerar det och det duplicerade tillståndet kan komma ur synk.
• Sätta aria-checked="mixed" på en enskild kryssruta snarare än på en förälder som sammanfattar underordnade element.
• Lämna syskonradioknappar utan aria-checked="false" — hjälpmedelsteknik kan inte härleda det okryssade tillståndet.
• Blanda ihop aria-checked med aria-selected på listbox-alternativ eller flikar.

Exempel

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">E-postinställningar</h3>

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