4.1.2 Nimi, rooli, arvo
TL;DR: Jokaisen käyttöliittymäkomponentin on paljastettava oikea rooli ja saavutettava nimi, ja tilojen/arvojen on oltava ohjelmallisesti saatavilla (ja päivittyä). Suosi natiiveja HTML-komponentteja ja varmista, että räätälöidyt widgetit vastaavat natiivien semantiikkaa.
Onnistumiskriteerin virallinen kuvaus
Kaikkien käyttöliittymäkomponenttien (mm. lomake-elementit, linkit ja skriptien luomat komponentit) nimi ja rooli voidaan selvittää ohjelmallisesti tilat, ominaisuudet ja arvot, jotka käyttäjä voi asettaa, voidaan myös asettaa ohjelmallisesti ja tieto näiden muutoksista on käyttäjäagenttien, mukaan lukien avustavien teknologioiden, saatavissa.
Mitä pitää tehdä?
Varmista, että käyttöliittymäkomponenteilla on selkeät nimet, roolit ja tilat.
Miksi tämä on tärkeää?
Tukee apuvälineteknologioita sisällön ja toiminnallisuuden tarkassa välittämisessä.
Yleisiä sudenkuoppia
Käyttää virheellistä HTML-merkintää, kuten vääräntyyppisiä elementtejä. ARIA-merkintöjen puutteellinen käyttö.
Miten testata?
Automaattisilla työkaluilla voidaan saada kiinni osa tämän kriteerin ongelmista.
Tämän kriteerin kohdalla olet saattanut törmätä varoituksiin, joissa sanotaan, ettei elementillä (yleensä <select>) ole saavutettavaa nimeä tai arvoa. Nämä tarkoittavat seuraavaa:
- Nimi: Mikä tämä kenttä on nimeltään, esimerkiksi mitä tietoa käyttäjän on tarkoitus syöttää.
- Jos käyttää vain
aria-labelattribuuttia, kerrotaan tietoa ainoastaan avustavaa teknologiaa käyttäville. Jos käytetään näkyvää label-elementtiä, kerrotaan tietoa jokaiselle käyttäjälle.
- Jos käyttää vain
- Arvo: Arvo tarkoittaa tämänhetkistä arvoa kentässä, jotta käyttäjät ymmärtävät mitä ovat valinneet.
- HTML-elementille
<select>, tämä tarkoittaa selected-attribuutin lisäämistä<option>elementtiin. Jos käytetään "kaikki"-vaihtoehtoa, tämä voidaan merkitä valituksi, kun käyttäjä saapuu sivulle.
- HTML-elementille
Miten huomioida tämä kriteeri suunnittelutyössä?
Suunnittele näkyvät nimitiedot, jotta kehittäjän ei tarvitse käyttää elementeissä ARIA-attribuutteja. Näkyvä nimitieto auttaa kaikkia käyttäjiä, kun taas ARIA-attribuutit auttavat vain ruudunlukijakäyttäjiä.
Miten huomioida tämä kriteeri kehitystyössä?
Monet tähän ja 1.3.1 kriteeriin liittyvistä virheistä on ehkäistävissä käyttämällä oikein toteutettuja visuaalisesti näkyviä nimitietoja (<label>).