Rooli Widget

`button`

Merkitsee elementin painikkeeksi — ohjauselementiksi, joka käynnistää toiminnon aktivoituessaan. Käytä ensin natiivia HTML:n <button>-elementtiä; turvaudu role="button"-attribuuttiin <div>- tai <span>-elementissä vain, jos natiivielementti on mahdoton.

Milloin käyttää

Lähes koskaan — käytä natiivia <button>-elementtiä. Natiivielementti hoitaa kohdistuksen, välilyönnin ja Enter-näppäimen aktivoinnin, pois käytöstä -tilan sekä lomakkeen lähetyssemantiikan automaattisesti. role="button" <div>-elementissä tarkoittaa, että kaikki tämä täytyy toteuttaa itse — ja useimmat tekijät jättävät sen tekemättä.

Hyväksyttävät käyttötapaukset role="button" -attribuutille ovat rajalliset:

Kolmannen osapuolen suunnittelujärjestelmä toimittaa komponentteja, jotka eivät ole painikkeita.
Olet sisällönhallintajärjestelmässä, jossa <button> ei ole käytettävissä (jotkut vanhat CMS-mallit).
Päivität <div>-elementtiä lyhytaikaisesti saavutettavuuden parantamiseksi samalla kun suunnittelet refaktorointia.

Jos käytät role="button" -attribuuttia, sinun täytyy myös:

Tehdä elementistä kohdistettava tabindex="0":lla.
Liittää keydown-tapahtuma sekä Enter- että Space-näppäimille (event.preventDefault() Space-painalluksella, jotta sivun vieritys estyy).
Hallita pois käytöstä -tila itse aria-disabled="true":lla ja estää klikkauskäsittelijöitä laukaisemasta.

Vaihtopainikkeet

Jos painike on vaihtotyyppiä (mykistys / poista mykistys, toista / tauko, seuraa / lopeta seuraaminen), aseta aria-pressed arvoksi "true" tai "false". Ruudunlukuohjelmat ilmoittavat tilan yhdessä nimen kanssa: “Mykistä, vaihtopainike, ei painettu”.

Yleisiä virheitä

<div onclick="…">Lähetä</div> — ei kohdistettava, ei näppäimistöllä käytettävä, ei roolia. Hiirenkäyttäjät voivat käyttää; muut eivät.
<a href="#" onclick="…"> naamioidaan painikkeeksi. Selain käsittelee sen linkkinä, ruudunlukuohjelma ilmoittaa sen linkkinä, käyttäjä odottaa navigoinnin tapahtuvan.
role="button" ilman tabindex="0" — ruudunlukuohjelma ilmoittaa “painike”, mutta näppäimistö ei voi saavuttaa sitä.
Mukautetut painikkeet, jotka reagoivat Enter-näppäimeen mutta eivät Space-näppäimeen.
Painikkeet ilman saavutettavaa nimeä — pelkästään ikonilla varustetut painikkeet ilman aria-label-attribuuttia ovat yleisin yksittäinen virhe, jonka axe-core havaitsee.

Esimerkki

<!-- Suositeltava -->
<button type="button" aria-pressed="false">Mykistä</button>

<!-- Vain kun <button> on mahdoton -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onclick="toggleMute()"
  onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMute(); }"
>
  Mykistä
</div>