2.5.3 Nimilappu nimessä
Onnistumiskriteerin virallinen kuvaus
Tapauksissa, joissa käyttöliittymäkomponentin nimilapussa on tekstiä tai tekstiä esittävä kuva, komponentin nimi sisältää sen tekstin, joka on visuaalisesti näkyvissä.
Mitä pitää tehdä?
Varmista, että merkinnät sisältävät näytöllä näkyvän tekstin.
Miksi tämä on tärkeää?
Tukee puheentunnistustekniikoita ja varmistaa yhdenmukaisuuden kaikille käyttäjille.
Yleisiä sudenkuoppia
Käytetään ARIA-merkintöjä, joilla ylikirjoitetaan esimerkiksi korttielementin sisältöä. Tällöin usein käytetään aria-label attribuuttia, jolle annetaan vain osa kortin sisällöstä.
Toinen yleinen haaste on tilanteissa, joissa yritetään antaa ruudunlukijakäyttäjille lisäkontekstia. Tarkoitus on hyvä, mutta usein toteutuksessa ei huomata, että kaiken näkyvän sisällön pitää olla sellaisenaan myös ARIA-merkinnöissä. Näkyvän tekstin perään saa lisätä lisää sisältöä. Alkuunkin sitä on mahdollista lisätä, mutta sitä ei suositella, koska se aiheuttaa herkästi ongelmia puheentunnistuksessa.
Miten testata?
Automaattiset työkalut löytävät osan tämän kriteerin virheistä.
Yksi tapa on verrata näkivissä olevaa tekstiä nimilappuun HTML-merkinnöissä. Suosin yleensä ruudunlukijan käyttämistä. Ruudunlukijan käyttö ei vaadi HTML-osaamista ja yleensä ruudunlukijalla sivun läpikäynti on nopeampaa kuin koodissa.
Miten huomioida tämä kriteeri kehitystyössä?
Useimmiten haasteet tämän kriteerin kanssa tulevat yrityksestä helpottaa ruudunlukijoiden tiedon määrää. Tätä ei ole tarpeen tehdä. Jos on esimerkiksi kortti, jossa on otsikko, päivämäärä, kuva ja lyhyt esittelyteksti, näiden kaikkien pitää yhtä lailla olla tarjolla ruudunlukijakäyttäjälle. Ruudunlukijakäyttäjä voi ohittaa sisällöt, joita ei halua kuunnella. Meidän ei kuulu tehdä tätä päätöstä käyttäjien puolesta.
Jos haluat lisätä lisätietoa ruudunlukijoille, varmista, että kaikki visuaalisesti näkyvä sisältö näytetään ensin. Sen jälkeen voit lisätä muuta sisältöä. Joskus lauserakenne olisi parempi jos sisältöä lisätään visuaalisesti näkyvän tekstin sekaan, mutta tämä ei vain ole sallittua. Tällaisissa tapauksissa kannattaa harkita, että voisiko tämän lisättävän sisällön näyttää myös visuaalisesti. Huom! Joskus on paljon helpompaa lisätä visuaalisesti piilotettua tekstiä elementtiin ja jättää aria-label kokonaan käyttämättä. Näin saat hieman enemmän mahdollisuuksia sisällön muokkaamiseen. Muista testata lopputulos aina automaattisella työkalulla, jotta varmistat, ettei toteutuksessa ole tullut virhettä!