Tunniste nimessä

Mitä vaaditaan

Jos painikkeessa lukee näytöllä „Lähetä hakemus“, ääniohjauksen käyttäjän pitäisi pystyä sanomaan „napsauta Lähetä hakemus“ ja saada napsautus kohdistumaan oikein. Tämä toimii vain, kun näkyvä tunniste sisältyy saavutettavaan nimeen — mieluiten ensimmäisinä sanoina. Jos saavutettava nimi on „Lähetä lomake“ ja näkyvä teksti sanoo „Lähetä hakemus“, äänikomento epäonnistuu hiljaa.

WCAG edellyttää, että näkyvä tekstitunniste on osa saavutettavaa nimeä. Saavutettava nimi voi sisältää lisää (selventävää kontekstia), mutta näkyvän tekstin on oltava siinä samassa sanajärjestyksessä.

Kuinka täyttää vaatimus

• Tekstitilisten painikkeiden ja linkkien kohdalla ei tarvita erityistoimenpiteitä — tekstisisältö tulee automaattisesti saavutettavaksi nimeksi.
• Kun aria-label lisätään ohjausobjektiin, jolla on jo näkyvä teksti, aloita näkyvällä tekstillä: <button aria-label="Lähetä hakemus — avaa vahvistuksen">Lähetä hakemus</button>.
• Ikoni + teksti -painikkeissa annetaan tekstin määrittää nimi. Älä korvaa sitä ikonikohtaisella aria-label-attribuutilla.
• Linkeille, joiden teksti on „Lue lisää“, laajennetaan saavutettavaa nimeä: aria-label="Lue lisää WCAG 2.2:sta — koko artikkeli", jotta näkyvä „Lue lisää“ on edelleen etuliite.
• Kun ohjausobjektin näkyvä tunniste on kuva (ikonista ja tekstistä koostuva, logo), varmista, että alt vastaa näkyvää tekstiä täsmälleen.

Yleisiä virheitä

• Painike, jossa lukee „Hae“, mutta aria-label on „Etsi“. Ääniohjauksen käyttäjät sanovat „napsauta Hae“ — ei tapahdu mitään.
• „Lisää ostoskoriin“ -painikkeet, joiden aria-label on „Lisää sininen t-paita koko M ostoskoriisi“ — laaja nimi, eikä näkyvä „Lisää ostoskoriin“ ole enää etuliite. Äänikomento „napsauta Lisää ostoskoriin“ ei osu.
• Ikoni + teksti -painikkeet, joihin suunnittelija lisäsi aria-label="ostoskori-ikoni" ja ylikirjoitti näkyvän „Kassalle“-tekstin.
• Lokalisoidut sivustot, joissa näkyvä teksti on käännetty mutta aria-label on edelleen englanniksi.
• Kelluvat toimintopainikkeet, joissa näkyy „Chat“ mutta aria-label on „Avaa tukiwidget“.

Miksi tämä on tärkeää

Tämä on onnistumiskriteeri, joka ratkaisee saavutettavuuden ääniohjauksen käyttäjille — henkilöille, jotka käyttävät Dragon NaturallySpeakingia, Voice Controlia iOS:ssa / macOS:ssa, Voice Accessia Androidissa tai Windowsin puheentunnistusta. Näille käyttäjille näkyvä tunniste on komento. Ero ei ole pieni haitta — se on ero toimivan ja toimimattoman välillä. Se auttaa myös ruudunlukuohjelman käyttäjiä, kun näkevä avustaja sanoo „napsauta Tallenna“ — ilmoitus vastaa näytöllä näkyviä sanoja. 2.5.3 on helppo korjata ja helppo unohtaa, koska automaattiset työkalut harvoin merkitsevät sen: kehittäjä, joka lukee koodia, näkee aria-label-attribuutin ja olettaa sen olevan riittävä. Tarkista aina saavutettava nimi suhteessa näkyvään tekstiin.