Puuttuvat ARIA-nimiöiden ID-tunnukset
Silktide tarkistaa elementit, jotka saavat muilta elementeiltä ID-tunnuksen perusteella, ja ilmoittaa viittauksista ID-tunnuksiin, joita ei ole sivulla. Rikkinäinen viittaus jättää elementin ilman sille tarkoitettua nimeä.
-attribuutti aria-labelledby antaa elementille
nimen viittaamalla sen elementin id-tunnukseen, joka sisältää sen nimiön –
otsikko, joka nimeää valintaikkunan, tai nimiö, joka nimeää ohjausobjektin:
<!-- Ongelma: viittauksessa lukee "dialog-label", mutta otsikon id on "dialog-labell" -->
<h2 id="dialog-labell">Tärkeä viesti!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Miksi tämä on tärkeää
Saavutettava nimi on se, minkä
ilmoittaa, kun vierailija
saavuttaa elementin. Kun aria-labelledby-viittaus ei osoita mihinkään,
elementti voidaan ilmoittaa kokonaan ilman nimeä – nimeämätön valintaikkuna,
nimeämätön painike – jolloin vierailijan on arvattava sen tarkoitus. Nämä virheet ovat
näkymättömiä: sivu näyttää samalta, eikä edes huolellinen käyttäjätestaus harvoin
havaitse nimeä, jonka liittäminen epäonnistui huomaamatta. ID-tunnuksia nimetään uudelleen ja sisältöä
järjestellään uudelleen, joten viittaukset rapistuvat ajan myötä.
Näin korjaat sen
- Etsi elementti, jonka oli tarkoitus antaa nimi, ja varmista, että
aria-labelledby-arvo vastaa senid-tunnusta täsmälleen (ID-tunnukset erottavat isot ja pienet kirjaimet):
<!-- Korjattu: viittaus vastaa otsikon id-tunnusta -->
<h2 id="dialog-label">Tärkeä viesti!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Jos nimeävä elementti poistettiin, palauta se tai käytä sen sijaan
aria-label-attribuuttia, joka sisältää nimen tekstinä. - Kun yksi elementti nimetään usealla muulla elementillä, luettele kaikki ID-tunnukset välilyönneillä erotettuina ja tarkista jokainen niistä.
Näin Silktide testaa tämän
- Etsi jokaiselta sivulta kaikki elementit, joilla on
aria-labelledby-attribuutti. - Jaa attribuutin arvo yksittäisiksi ID-tunnuksiksi.
- Ilmoita jokainen viitattu ID-tunnus, jota ei ole missään sivulla.