A11ying with Sanna - Toki, jos voisin opas saavutettavuuteen

1.1.1 Ei-tekstuaalinen sisältö - alt-attribuutti

Tässä esimerkissä meillä on kuvia vaihtelevilla vaihtoehtoisilla teksteillä. Käy esimerkit läpi ruudunlukijalla.

Haasteellinen esimerkki

Tällä kuvalla on vaihtoehtoisena tekstinä vain hölynpölyä. Valitettavasti olen nähnyt tällasia tilanteissa, joissa vaihtoehtoinen teksti on pakollinen kenttä ja sisällöntuottaja ei ymmärrä mikä vaihtoehtoisen tekstin tarkoitus on.

adasdklfd

Tällä kuvalla alt-teksti ja alt-attribuutti puuttuu kokonaan.

Parempi esimerkki

Alla olevassa kuvassa on hieman kuvaavampi vaihtoehtoinen teksti. Kuva tulee arvottuna Picsum-palvelusta, joten vaihtoehtoinen teksti ei ole kyseiselle kuvalle kuvaava. Mutta idea käy tästä kuitenkin ilmi.

Arvottu kuva Picsum-palvelusta

Esimerkki kuvasta ilman vaihtoehtoista tekstiä.

Loppukommentit

Muista, että mikäli kuvassa on linkki, vaihtoehtoisen tekstin tulisi kuvailla linkin kohdetta eikä kuvaa itseään. Muista myös, että mikäli kuva on koristeellinen, jätä vaihtoehtoinen teksti on tyhjäksi. Vaihtoehtoisen tekstin ollessa tyhjä, ruudunlukijat ohittavat kuvan.

Mikäli kuvalla ei ole lainkaan alt-attribuuttia, ruudunlukija lukee kuvan tiedostonimen. Tämä ei yleensä ole kovinkaan haluttava tulos. En valitettavasti voi tarjota tästä tällä sivulla esimerkkiä, koska Drupal huolehtii alt-attribuutin aina paikoilleen.