Nimi, rooli, arvo

Mitä vaaditaan

Jokaisen sivun interaktiivisen elementin — painikkeet, linkit, lomakekentät, välilehdet, liukusäätimet, mukautetut widgetit — on esitettävä kolme tietoa avustavalle teknologialle:

• Nimi — miten tätä elementtiä kutsutaan? (“Lähetä”, “Sulje valintaikkuna”, “Äänenvoimakkuus”)
• Rooli — minkä tyyppinen elementti tämä on? (painike, linkki, valintaruutu, välilehti, liukusäädin)
• Arvo / tila — komponenteille, joilla sellainen on: onko se painettu, laajennettu, valittu, merkitty? Mikä on nykyinen arvo?

Esittämisen on oltava ohjelmallista — asetettu DOM:iin eikä CSS:llä maalattu. Ruudunlukuohjelmat, pistekirjoitusnäytöt, ääniohjausohjelmistot ja kytkinskannerit lukevat saavutettavuuspuuta eikä pikseleitä.

Vaatimustenmukaisuuden saavuttaminen

• Käytä natiivia HTML-elementtiä aina kun sellainen on olemassa. <button> sisältää oikean roolin, kohdistuksen, näppäimistönkäsittelyn ja saavutettavan nimen tekstisisällöstään — ilmaiseksi.
• Vain-ikoni-painikkeille lisää aria-label (tai visuaalisesti piilotettu teksti). <button aria-label="Sulje">×</button>.
• Lomakesyötteille yhdistä <label for> syötteen id:hen. Tai sisällytä syöte <label>-elementin sisään. Paikkamerkki ei ole nimilappu.
• Kun mukautettu widget on rakennettava <div>- ja <span>-elementeistä, lisää role="…", hallinnoi tabindex:iä, käsittele Enter ja Välilyönti, ja heijasta tila aria-pressed-, aria-expanded-, aria-checked-, aria-selected-, aria-valuenow-attribuuteilla.
• Aja renderöity sivu selaimen saavutettavuuspuutarkastimen läpi (Chrome DevTools → Elementit → Saavutettavuus) ja lue jokainen elementti: jokaisen tulisi ilmoittaa itsensä nimellä + roolilla + tilalla.

Yleiset virheet

• <div onclick="…"> tyyliteltynä painikkeena — ei roolia, ei näppäimistöä, ei nimeä. Ruudunlukuohjelmat ohittavat sen. Ääniohjaus ei pysty sanomaan “klikkaa Tallenna.”
• <div role="button"> ilman tabindex="0", ilman Enter/Välilyönti-käsittelijää — näyttää saavutettavalta, ei ole sitä.
• Vain-ikoni-painikkeet (<button><svg /></button>) ilman aria-label:ia, aria-labelledby:tä tai visuaalisesti piilotettua tekstiä. Ilmoitetaan pelkkänä “painike.”
• Mukautetut pudotusvalikot rakennettu <div>- ja JavaScript-elementeillä, joista puuttuvat role="combobox", aria-expanded, aria-controls ja listbox/option-roolit sen alla.
• Vaihtopainikkeet (mykistys, suosikit, seuraaminen), jotka muuttavat tilaa visuaalisesti mutta eivät koskaan päivitä aria-pressed:ia. Näkevät käyttäjät näkevät muutoksen; ruudunlukuohjelman käyttäjät eivät kuule eroa.
• Lomakesyötteet, joiden vieressä on visuaalinen nimilappu mutta joilta puuttuu for/id-linkitys tai käärivä <label>.
• Mukautetut valintaruudut piirretty <svg>-elementillä ja piilotetulla natiivisyötteellä, joka ei koskaan heijasta :checked-tilaa visuaaliseen käyttöliittymään — ruudunlukuohjelman ja visuaalinen tila eriytyvät.

Miksi tämä on tärkeää

Tämä on spesifikaation useimmin mainittu onnistumiskriteeri. Lähes jokainen “tätä sivustoa ei voi käyttää ruudunlukuohjelmalla” -valitus johtuu jonnekin 4.1.2-virheeseen — yleensä <div>, joka esiintyy painikkeena, tai ikoni-painike ilman nimeä. Tässä myös mukautettujen widgetien rakentamiskustannukset tulevat näkyviin: jokainen natiivi HTML-elementti läpäisee 4.1.2:n automaattisesti; jokainen käsin rakennettu <div>-widget joutuu ansaitsemaan sen rivi riviltä. Nopein 4.1.2-auditointi on selata sivu ruudunlukuohjelman kanssa ja kuunnella — kaikki, mikä ilmoittaa itsensä “tyhjänä” tai pelkkänä “painikkeena”, on löydös.