Päällekkäinen alt-teksti

Silktide löytää linkitetyt kuvat, որոնց vaihtoehtoinen teksti toistaa niiden vieressä olevan tekstin. Kun kuva ja sen viereinen teksti kertovat saman asian, ruudunlukijaa käyttävät ihmiset kuulevat samat sanat kahdesti.

<!-- Ongelma: ilmoitetaan muodossa "Apple Apple" -->
<a href="/apple">
    <img src="apple.png" alt="Apple">
    Apple
</a>

<!-- Korjattu: tyhjä alt, pelkkä teksti nimeää linkin -->
<a href="/apple">
    <img src="apple.png" alt="">
    Apple
</a>

Miksi tämä on tärkeää

on olemassa korvaamaan kuvan ihmisille, jotka eivät voi nähdä sitä. Kun samat sanat näkyvät jo kuvan vieressä, alt-teksti ei lisää mitään – ilmoittaa "Apple Apple", mikä kuulostaa virheelliseltä ja hidastaa kuuntelua ilman hyötyä. Kun tämä toistuu tuotekorttien tai uutisnostojen täyttämällä sivulla, siitä tulee aidosti väsyttävää.

Kuva, jonka merkitys välittyy kokonaan viereisestä tekstistä, on käytännössä , ja se tulisi merkitä sellaiseksi.

Korjaaminen

Anna kuvalle tyhjä alt="", jotta ohittaa sen ja lukee vain viereisen tekstin, kuten yllä olevassa esimerkissä.
Vaihtoehtoisesti piilota kuva aria-hidden="true" -attribuutilla. Tämä on hyödyllistä, kun pakottaa täyttämään alt-attribuutin.
Jos kuva ja teksti ovat kaksi erillistä linkkiä samaan kohteeseen, yhdistä ne ensin yhdeksi linkiksi – katso Vierekkäiset linkit.

Näin Silktide testaa tämän

Etsi jokainen linkin sisällä oleva kuva.
Lue kuvan avustava teksti: sen alt-attribuutti tai aria-label.
Vertaa sitä välittömästi ennen ja jälkeen kuvan olevien elementtien näkyvään tekstiin.
Raportoi kuva, kun nämä vastaavat täsmälleen toisiaan kirjainkokoa huomioimatta.

Vianmääritys

Vastaava teksti ei ole osa linkkiä

Vertailu tarkastelee kuvan välittömiä naapureita, joihin voi sisältyä tekstiä heti linkin ulkopuolelta. Päällekkäisyys on silti todellinen sivulla liikkuvalle ruudunlukijan käyttäjälle, joten samat korjaukset pätevät.

Tekstit eroavat hieman toisistaan

Vain täsmälliset vastaavuudet (kirjainkokoa huomioimatta) raportoidaan. Lähes samanlaiset tekstit, kuten "Apple" alt="Apple logo" -tekstin vieressä, läpäisevät tämän tarkistuksen, mutta harkitse, lisääkö alt-teksti silti mitään kuuntelijalle.