Puuttuva vaihtoehtoinen teksti

Silktide löytää sivuiltasi kuvat, joilla ei ole lainkaan vaihtoehtoista tekstiä. Vaihtoehtoinen teksti on kuvan sijaan ääneen luettava kirjallinen kuvaus, joten kuvat ilman sitä eivät merkitse mitään ihmisille, jotka eivät voi nähdä niitä.

<!-- Ongelma: ei alt-attribuuttia -->
<img src="apple.png">

<!-- Korjattu: kuvaileva vaihtoehtoinen teksti -->
<img src="apple.png" alt="Punainen omena">

<!-- Myös kelvollinen: merkitty nimenomaisesti koristeelliseksi -->
<img src="decorative-swirl.png" alt="">

Miksi tämä on tärkeää

ei ole mitään ilmoitettavaa kuvasta, jolla ei ole – parhaassa tapauksessa se lukee tiedostonimen, joka on harvoin hyödyllinen ja usein hämmentävä. Sokeat tai heikkonäköiset ihmiset menettävät kaiken, mitä kuva välittää, ja jos kuva on kaavio, painike tai linkki, he eivät ehkä pysty käyttämään sivua lainkaan.

Vaihtoehtoinen teksti näkyy myös silloin, kun kuvat eivät lataudu, ja auttaa hakukoneita ymmärtämään kuviasi, joten sen korjaamisesta hyötyy jokainen kävijä.

Näin korjaat sen

Lisää vaihtoehtoinen teksti jokaiseen kuvaan – useimmissa järjestelmissä sille on kenttä kaikkialla, missä lisäät kuvan. Käytä koodissa alt- attribuuttia yllä esitetyllä tavalla.
Kuvaile kuvan välittämää tietoa tai tarkoitusta, älä sen ulkonäköä. Jos kuva toimii linkkinä tai painikkeena, kuvaile, minne se vie tai mitä se tekee.
Jos kuva on pelkästään , anna sille tyhjä alt="", jotta ruudunlukijat ohittavat sen. Älä keksi täytetekstiä – tekstin "koristeellinen pyörrekuva" kuuleminen on pahempaa kuin se, ettei kuule mitään.

WebAIM julkaisee kattavan oppaan vaihtoehtoisen tekstin kirjoittamiseen.

Näin Silktide testaa tämän

Etsi jokainen kuva jokaiselta sivulta.
Ohita kuvat, jotka eivät tarvitse vaihtoehtoista tekstiä: kuvat ilman lähdettä, enintään 1 pikselin kokoiset kuvat (yleensä seurantapikselit) sekä ruudunlukijoilta piilotetut kuvat.
Ohita role="presentation"-attribuutilla koristeellisiksi merkityt kuvat, koska ne on tarkoituksella piilotettu .
Raportoi jokainen jäljelle jäävä kuva, jolla ei ole lainkaan alt-attribuuttia.

Kuva, jolla on tyhjä alt="", läpäisee tämän tarkistuksen, mutta sitä käsitellään kohdassa Koristeelliset kuvat, jossa pyydetään vahvistamaan, että kuva on aitosti koristeellinen. Olemassa olevaa mutta hyödytöntä vaihtoehtoista tekstiä käsitellään kohdassa Heikko vaihtoehtoinen teksti.

Vianmääritys

Kuva on koristeellinen, joten miksi se on merkitty?

Kuvaa käsitellään koristeellisena vain, kun se on ilmoitettu koodissa joko tyhjällä alt=""-attribuutilla tai role="presentation"-attribuutilla. Kuva, jolla ei ole lainkaan alt-attribuuttia, on tulkinnanvarainen – avustava teknologia ei voi erottaa "koristeellista" "unohtuneesta" – joten se ei läpäise tätä tarkistusta. Lisää tyhjä attribuutti, jotta tarkoitus on selkeä.

Kuva tulee kolmannen osapuolen palvelusta

Upotettujen palvelujen, kuten karttojen, luomia kuvia et ehkä voi muokata itse. Verkkosivustosi asetuksissa voit sulkea kolmannen osapuolen sisällön pois tästä tarkistuksesta tai voit yksittäiset havainnot, joita et voi muuttaa.