Alt-teksti

Alt-teksti on lyhyt kuvaus kuvan HTML-koodissa, joka välittää kuvan sisällön ruudunlukuohjelmille ja hakukoneille.

Mikä on alt-teksti?

Alt-teksti (lyhenne sanoista vaihtoehtoinen teksti) on kirjallinen kuvaus, joka lisätään kuvaan HTML:n alt-attribuutilla. Se kertoo ruudunlukuohjelmille, hakukoneille ja hitailla yhteyksillä oleville käyttäjille, mitä kuva näyttää tai tekee. Alt-teksti on yksi verkon vanhimmista ja perustavimmista saavutettavuusvaatimuksista.^[1]

Miksi alt-teksti on tärkeä?

Kun ruudunlukuohjelma kohtaa kuvan ilman alt-tekstiä, se lukee tiedostonimen ääneen. Käyttäjä kuulee jotain kuten "IMG_3847.jpg" tai "banner_v3_final.png" — mikä ei kerro mitään. WebAIMin 2024 tutkimuksen mukaan puuttuva alt-teksti on yksi viidestä yleisimmästä saavutettavuusvirheestä verkossa. Sitä löytyi 54,5 prosentilta testatuista etusivuista.^[3]

Alt-teksti auttaa myös käyttäjiä, jotka ovat poistaneet kuvat käytöstä datan säästämiseksi. Hakukoneet käyttävät sitä ymmärtääkseen kuvien sisältöä, joten se vaikuttaa suoraan hakukoneoptimointiin.

Sisältötiimeille, jotka hallinnoivat suuria verkkosivustoja — viranomaisportaaleja, yliopistojen sivustoja tai vakuutustietopalveluja — jokainen kuva tarvitsee oikean alt-tekstin. Tuhansia sivuja sisältävällä sivustolla yksi julkaisupohja, josta puuttuu alt-attribuutti, voi tuottaa satoja WCAG-virheitä kerralla.

Miten kirjoitetaan hyvää alt-tekstiä?

Oikea lähestymistapa riippuu kuvan tyypistä:

Informatiiviset kuvat — Kuvaile lyhyesti, mitä kuva näyttää. Kuva henkilöstöstä tarkastelemassa hallintapaneelia voisi lukea: "Kaksi analyytikkoa tarkastelee verkkosivuston kävijätietoja näytöltä."
Toiminnalliset kuvat — Jos kuva on linkki tai painike, kuvaile toiminto, älä kuvaa. Suurennuslasi-ikonin alt-teksti on "Haku", ei "suurennuslasi".
Koristeelliset kuvat — Kuvat, jotka eivät lisää tietoa, merkitään tyhjällä alt-attribuutilla (alt=""). Tämä käskee ruudunlukuohjelman ohittaa kuvan kokonaan.^[2]
Monimutkaiset kuvat — Kaaviot, graafit ja infografiikat tarvitsevat lyhyen alt-tekstin ja pidemmän kuvauksen lähellä tai linkitetyllä sivulla.
Kuvissa oleva teksti — Jos kuva sisältää tekstiä, se teksti täytyy kirjoittaa alt-attribuuttiin sanasta sanaan.

Pidä alt-teksti alle 125 merkissä mahdollisuuksien mukaan. Älä aloita sanoilla "Kuva" tai "Valokuva" — ruudunlukuohjelma kertoo jo, että kyseessä on kuva.

Mitkä ovat yleisimmät alt-tekstivirheet?

Nämä virheet toistuvat saavutettavuusauditoinneissa:

Puuttuva alt-attribuutti kokonaan — Yleisin virhe. Rikkoo WCAG 1.1.1:tä tasolla A.
Tiedostonimi alt-tekstinä — Tapahtuu, kun julkaisujärjestelmä täyttää alt-kentän automaattisesti tiedostopolulla.
Yleisteksti — Arvot kuten "kuva" tai "valokuva" eivät kerro mitään hyödyllistä.
Kuvatekstin toistaminen — Jos sama teksti näkyy sekä kuvatekstissä että alt-attribuutissa, ruudunlukuohjelman käyttäjä kuulee sen kahdesti.
Liian pitkät kuvaukset — 200 sanan alt-teksti kaaviossa on raskas kuunnella. Käytä rakenteellista pitkää kuvausta sen sijaan.

Miten alt-tekstiä testataan auditoinnissa?

Alt-teksti on yksi ensimmäisistä asioista, jotka automaattiset työkalut tarkistavat. Lighthouse, axe ja WAVE havaitsevat puuttuvat alt-attribuutit tai tiedostonimen näköisen alt-tekstin. Mutta mikään työkalu ei pysty arvioimaan, onko teksti tarkka tai hyödyllinen — siihen tarvitaan ihmisen arvio.^[3]

IT-tiimit voivat lisätä automaattisen alt-tekstitarkistuksen CI/CD-putkeen ilmeisten virheiden löytämiseksi varhain. Sisältötiimeillä pitää olla selkeät ohjeet kirjoittajille ja toimittajille. Ja lakitiimin pitää tietää, että puuttuva alt-teksti on tason A virhe — WCAG:n perustavin vaatimus — joten se aiheuttaa suurimman vaatimustenmukaisuusriskin.

EU:n, Ison-Britannian tai Yhdysvaltain saavutettavuuslainsäädännön alaisten organisaatioiden pitää käsitellä alt-tekstiä perusvaatimuksena, ei valinnaisena lisänä. WCAG-standardi luettelee sen tason A sääntönä — vaatimustenmukaisuuden perustavimpana tasona.

Miten Askem auttaa?

Suurilla sivustoilla — viranomaisportaaleissa, yliopistojen sivuilla, vakuutustietopalveluissa — jokaisen kuvan tarkistaminen käsin ei ole mahdollista. Automaattiset laadunvarmistustyökalut skannaavat sivuja ja merkitsevät kuvat, joista puuttuu alt-attribuutti tai joiden alt-arvo näyttää tiedostonimeltä. Askemin kaltaiset työkalut tekevät jatkuvaa skannausta, joten kun uutta sisältöä julkaistaan, puuttuva alt-teksti havaitaan ennen kuin siitä kertyy satoja WCAG-tason A virheitä. Sisältötiimi saa selkeän listan korjattavista sivuista tärkeysjärjestyksessä.

Lähteet

W3C — WCAG 2.2 Success Criterion 1.1.1 Non-text Content: https://www.w3.org/TR/WCAG22/#non-text-content
W3C WAI — An alt Decision Tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
W3C WAI — Images Tutorial: https://www.w3.org/WAI/tutorials/images/