Toki, jos voisin opas saavutettavuuteen

2.5.3 Nimilappu nimessä

Tässä demossa on hyvin yksinkertaisia esimerkkejä. Mitä monimutkaisempia elementit ovat, sitä useammin tämän kriteerin kanssa on haasteita. Vertaa näitä esimerkkejä toisiinsa ruudunlukijalla.

Haasteellinen esimerkki

Seuraavalla elementillä on visuaalisesti piilotettu nimitieto.

Hae tältä sivustolta

Seuraavalla linkkielementillä on aria-label, joka ei sisällä kaikkea näkyvää tekstiä.

Parempi esimerkki

Seuraavalla elementillä on visuaalisesti piilottetu nimitieto.

Hae tältä sivustolta

Seuraavalla linkkielementillä on aria-label, joka sisältää kaiken näkyvän tekstin ja sisältää lisäksi enemmän tekstiä. Tätä tapaa hyödyntämällä on mahdollista antaa ruudunlukijoille enemmän tietoa. Muista aina testata erityisesti ruudunlukijoilla ja ole aina ARIAa käyttäessäsi tarkkana.

Loppukommentit

Tämä ongelma koskee eniten äänikomentoja käyttäviä. Mikäli he haluavat klikata nappia, he saattavat sanoa esimerkiksi "Klikkaa etsi". Mutta koska tämän napin nimi ei ole etsi, mitään ei tapahdu. Tämän kriteerin kanssa kannattaa olla erityisen tarkkana, tässä tehdään herkästi virheitä. Katso englanniksi WAI:n perspektiivivideo äänitunnistuksesta

Mikäli katsot tätä sivua esimerkiksi HTML_CodeSniffer -työkalulla tai vastaavalla, huomaat, että molemmat heikot esimerkit antavat varoituksen tästä kriteeristä. Kun luot mitä tahansa elementtejä ja käytät siinä ARIA:a, testaa ne aina ruudunlukijalla.

Tässä monesti on ongelmia, mikäli yhden linkkielementin sisällä on näkyvästi monta eri tekstiä, esimerkiksi päivämäärä, tekstiä ja otsikko. Näiden kaikkien tulee näkyä komponentin nimessä, pelkkä otsikko ei riitä.

Ruudunlukijalle voi antaa enemmän tietoa aria-labelissa, mutta sen tulee sisältää kaikki näkyvä teksti.