Vain kuvakkeesta koostuva ohjauselementti

Silktide etsii painikkeita ja linkkejä, joiden tunnisteena on vain kuvake – kuten sulkemisrasti, hampurilaisvalikko tai hakusuurennuslasi – eikä niillä ole tekstimuotoista nimeä henkilöitä varten, jotka eivät näe kuvaketta.

<!-- Ongelma: mikään ei kerro, mitä tämä painike tekee -->
<button><svg>…</svg></button>

<!-- Korjaus: nimeä ohjauselementti -->
<button aria-label="Open menu"><svg>…</svg></button>

Miksi tämä on tärkeää

Näkevät käyttäjät päättelevät kuvakepainikkeen toiminnon sen muodosta ja asiayhteydestä. käyttäjillä ei ole vastaavaa vaihtoehtoa: ilman heidän ohjelmistonsa ilmoittaa nimettömän "painikkeen" tai "linkin" tai lukee jäljelle jäänyttä koodia, kuten kuvakkeen CSS-luokan nimen. Jokainen vain kuvakkeesta koostuva nimetön ohjauselementti on ohjauselementti, joka näiden käyttäjien on aktivoitava sokkona tai ohitettava kokonaan – ja ne ovat usein sivun tärkeimpiä ohjauselementtejä: valikot, haku, sulje, seuraava.

Näin korjaat sen

Lisää -tunniste, joka kuvaa ohjauselementin toimintoa, ei sitä, miltä kuvake näyttää: aria-label="Search", ei aria-label="Magnifying glass".
Jos sama sanamuoto on jo näkyvänä tekstinä lähellä, viittaa siihen aria-labelledby-attribuutilla sen kopioimisen sijaan.
Jos kuvake on <img>, myös merkityksellisen alt-tekstin antaminen sille nimeää ohjauselementin.
Jos ohjauselementti ei tee mitään hyödyllistä ja on olemassa vain koristeena, tee siitä ei-interaktiivinen nimeämisen sijaan.

Näin Silktide testaa tämän

Etsi jokaiselta sivulta näkyvät painikkeet, linkit ja avattavien osioiden ohjauselementit, mukaan lukien elementit, joissa on role="button" tai role="link".
Ohita kaikki ohjauselementit, joilla on jo nimi: vähintään 2 merkin pituinen näkyvä teksti, aria-label, aria-labelledby tai title- attribuutti.
Tarkista, sisältävätkö jäljelle jäävät ohjauselementit kuvakkeen: upotetun SVG:n, kuvan, jolla on tyhjä alt-teksti, tai tunnistetulla kuvakefontilla piirrettyä tekstiä.
Ilmoita ohjauselementeistä, joissa näkyy kuvake mutta joilla ei ole nimeä.

Vianmääritys

Ohjauselementti on nimetty jollakin muulla tavalla

Silktide huomioi aria-label-, aria-labelledby-, title-, näkyvän tekstin ja kuvan alt-tekstin. Jos ohjauselementtisi on nimetty näiden ulkopuolisella mekanismilla – mikä on harvinaista – varmista näytönlukijalla, että nimi ilmoitetaan todella, ja löydös, jos se ilmoitetaan.

Kuvake on koristeellinen ja sijaitsee tekstin vieressä

Ohjauselementeistä, joissa on merkityksellinen näkyvä teksti, ei ilmoiteta, vaikka kuvake olisi tekstin vieressä. Jos ohjauselementistä ilmoitettiin, sen teksti ei yltänyt kahteen merkitykselliseen merkkiin – yksittäisestä kuviomerkistä koostuva teksti, kuten "×", ei kelpaa tunnisteeksi.