aria-checked

Milloin käyttää

Widgeteissä, joilla on kolmitilainen tai binäärinen valintasemantiikka: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" ja role="switch". Jos käytät natiivia <input type="checkbox"> tai <input type="radio">, selain paljastaa jo valitun tilan avustavalle teknologialle — älä toista sitä aria-checked-attribuutilla.

Erottelu lähitiloista:

• aria-checked — “tämä vaihtoehto on valittu valintojen joukosta, usein riippumattomasti muista”. Valintaruudut ja radiopainikkeet.
• aria-pressed — vaihtopainikkeille (mykistys / poista mykistys). Elementti on käsitteellisesti painike; tila kertoo, onko toiminto parhaillaan päällä.
• aria-selected — yksivalintaisen säilön kohteille, kuten tablist, listbox tai tree. Tila kuuluu säilön valintamalliin, ei kohteelle itsellään.

Synkronoinnin ylläpito

Hyväksyttävät arvot ovat "true", "false", "mixed" ja "undefined". Käytä "mixed" vain vanhemmassa valintaruudussa, joka kokoaa lapsiryhmän valintaruutujen epäjohdonmukaiset tilat (klassinen “valitse kaikki” -epämääräinen kuvio). "undefined" on harvinainen käytännössä; useimmat tekijät käyttävät sen sijaan "false".

Attribuutin täytyy heijastaa sitä, mitä käyttäjä näkee. Kaikki klikki- ja näppäimistökäsittelijät, jotka päivittävät visuaalisen valintamerkin, täytyy myös kirjoittaa uusi aria-checked-arvo samassa koodipolulla. Älä koskaan tyylittele “valittu”-ulkoasua CSS:stä päivittämättä attribuuttia.

role="radio":lle radiogroup:n sisällä täsmälleen yhden vaihtoehdon pitää kantaa aria-checked="true" millä tahansa hetkellä; muiden täytyy olla "false" (ei puuttuvia).

Yleisiä virheitä

• aria-checked-attribuutin puuttuminen kokonaan role="checkbox"-elementiltä — ruudunlukuohjelma ilmoittaa “valintaruutu” ilman tilaa.
• Luokan vaihtaminen valintamerkin näyttämiseksi mutta aria-checked-attribuutin päivittämättä jättäminen.
• aria-checked="true":n käyttö natiivissa <input type="checkbox"> — selain jättää sen huomiotta ja päällekkäinen tila voi ajautua ulos synkronoinnista.
• aria-checked="mixed":n asettaminen yksittäiselle valintaruudulle eikä vanhemmalle, joka kokoaa lasten tilat.
• Sisar-radioiden jättäminen ilman aria-checked="false" — avustava teknologia ei voi päätellä valitsematonta tilaa.
• aria-checked-attribuutin sekoittaminen aria-selected-attribuuttiin listbox-vaihtoehtojen tai välilehtien kohdalla.

Esimerkki

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">Sähköpostiasetukset</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Lähetä minulle viikoittaiset yhteenvedot
  </div>
</div>