switch

Milloin käyttää

Binaariseen asetuskontrolliin, jossa “päällä” ja “pois” kuvaavat tilaa paremmin kuin “valittu” ja “ei valittu” — Wi-Fi, tummapohjainen tila, ilmoitukset, lentokonetila. Natiivista HTML:stä ei löydy kytkinelementin vastinetta, joten on kaksi kelpaavaa lähestymistapaa:

1. <button type="button" role="switch" aria-checked="false"> — suositeltava, koska saat natiivipainikkeen kohdistuksen ja aktivoinnin ilmaiseksi.
2. <input type="checkbox" role="switch"> — myös hyväksyttävä; lomakkeen lähetys toimii edelleen, ja roolin ylikirjoitus muuttaa avustavan teknologian ilmoitustavan.

Älä käytä role="switch"-roolia asioille, jotka eivät ole aidosti binaarisia. Jos toiminto navigoi, avaa valikon tai käynnistää prosessin, käytä button- tai link-roolia.

Näppäimistö- ja kohdistussopimus

APG:n kytkinkuvion mukaan:

• Tab siirtää kohdistuksen kytkimeen.
• Välilyönti vaihtaa aria-checked-arvoa. Enter PITÄISI myös vaihtaa (APG suosittelee molempia, koska käyttäjät odottavat painikemaista käytöstä painikkeeseen perustuvalta kytkimeltä).
• Kohdistus pysyy kytkimessä vaihdon jälkeen.

aria-checked hyväksyy kytkimessä vain arvot "true" tai "false" — "mixed" on tässä virheellinen.

Yleiset virheet

• role="switch" ilman aria-checked-attribuuttia ensimmäisessä renderöinnissä. Tila on pakollinen.
• aria-checked="mixed" kytkimessä. Kelvollinen vain valintaruudussa.
• aria-pressed-attribuutin käyttö aria-checked-attribuutin sijaan. aria-pressed kuuluu vaihtopainikkeelle (mykistys/ääni), jossa painike suorittaa toiminnon. Kytkin edustaa asetuksen tilaa.
• Kytkin, joka ei päivitä aria-checked-arvoa, kun se vaihdetaan pelkällä CSS:llä.
• Pienet kytkimen osumisalueet, jotka eivät täytä WCAG 2.5.8 -kohteenarvo. Interaktiivisen alueen on oltava vähintään 24×24 CSS-pikseliä.

Esimerkki

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Tummapohjainen tila
</button>