Näin kirjoitat hyvän alt-tekstin kuville

Mihin alt-tekstiä tarvitaan

Alt-teksti on kuvan tekstivastine, joka kirjoitetaan alt-määritteeseen. Ruudunlukijat lukevat sen ääneen, pistenäytöt näyttävät sen, ja selain näyttää sen, kun kuva ei lataudu. Myös hakukoneet voivat käyttää sitä. Saavutettavuuden verkkostandardi WCAG edellyttää tekstivastinetta, joka hoitaa saman tehtävän kuin kuva (onnistumiskriteeri 1.1.1, taso A).

Ydinajatus: alt-teksti ei ole kuvateksti eikä kuvaus kuvasta sen itsensä vuoksi. Se kertoo, mitä kuva tuo sivulle. Sama valokuva voi tarvita kahdella sivulla eri alt-tekstin tai ei mitään.

Neljä kuvatyyppiä

• Informatiiviset kuvat tuovat merkitystä: valokuva, kuvake puhelinnumeron vieressä, kaavio. Kirjoita lyhyt alt-teksti, joka välittää tämän merkityksen.
• Toiminnalliset kuvat ovat linkkien ja painikkeiden sisällä. Alt-teksti nimeää toiminnon tai kohteen, ei kuvaa: ”Hae” suurennuslasille, ”Tulosta tämä sivu” tulostinkuvakkeelle.
• Koristekuvat eivät tuo mitään: reunus, välike, koristekuvio tai kuva, joka vain toistaa viereisen tekstin. Anna niille tyhjä alt-määrite (alt=""), jotta ruudunlukijat ohittavat ne, tai laita ne tyylitiedostoon taustaksi.
• Tekstiä sisältävät kuvat ovat viimeinen keino. Jos tarvitset sellaisen, alt-teksti toistaa kuvan sanat. Logo, joka ei ole linkki, saa organisaation nimen.

Miten kirjoitat hyvän alt-tekstin

1. 1Kysy, miksi kuva on sivulla. Mitä kävijältä jäisi paitsi, jos sitä ei olisi?
2. 2Kirjoita se, mikä on tämän tarkoituksen kannalta olennaista, ilmauksena tai yhtenä lauseena.
3. 3Aloita sisällöstä. Ruudunlukija kertoo yleensä, että kyse on kuvasta, joten ”kuva, jossa” tai ”valokuva, jossa” auttaa harvoin.
4. 4Älä toista sitä, minkä kuvan viereinen teksti jo kertoo. Jos teksti kertoo kaiken, kuva on koriste ja saa tyhjän altin.
5. 5Lue alt-teksti ääneen katsomatta sivua. Onko se ymmärrettävä yksinään?

Yleiset virheet

• Alt-määritettä ei ole lainkaan. Jotkin ruudunlukijat lukevat silloin tiedostonimen.
• Tiedostonimi tai koodi alt-tekstinä, kuten ”IMG_2041.jpg”.
• Sama hakusanojen jono monissa kuvissa. Alt-teksti on ensisijaisesti ihmisiä varten.
• Pitkä kuvaus pelkästään koristeellisesta kuvasta.
• Painikekuvan ulkonäön kuvaaminen sen toiminnon sijaan. Hakupainike ei ole ”suurennuslasi”, se on ”Hae”.

Kuinka pitkä sen pitäisi olla?

WCAG 1.1.1 ei mainitse merkkimäärää. W3C neuvoo pitämään sen lyhyenä, mieluiten ilmauksena tai lauseena. Kaavioissa ja muissa monimutkaisissa kuvissa anna kaikki tiedot tekstinä sivulla ja pidä alt-teksti lyhyenä. Jos tarvitset enemmän kuin lauseen, kuvassa on luultavasti sisältöä, joka kuuluu sivun tekstiin.

Tarkista sivustosi

Löydät kuvat, joilta puuttuu hyödyllinen alt-teksti, ajamalla sivulle ilmaisen alt-tekstien tarkistimen. Saat ehdotuksia monille kuville Vaihtoehtoiset tekstit -työkalulla. Automaattinen ehdotus voi ohittaa sen, mikä sivullasi on olennaista, joten lue jokainen teksti ja muuta sitä, kun se ei sovi kuvan tarkoitukseen.

Do4U:n työkalut auttavat kirjoittamisessa, eivät päätöksessä: sen, onko kuva informatiivinen, toiminnallinen vai koriste, tiedät itse parhaiten. Tarkista uudelleen suurten sivustomuutosten jälkeen.