Kuvilla täytyy aina olla alt-attribuutti HTML-koodissa. Mikäli attribuutti puuttuu kokonaan, kriteeri 1.1.1 (taso A) ei täyty. Vaihtoehtoinen teksti (tai alt-teksti) lisätään alt-attribuuttiin. Koristeellisilla kuvilla vaihtoehtoisen tekstin tulisi olla tyhjä, jotta avustavat teknologiat osaavat ohittaa kuvat. Informatiivisilla kuvilla pitäisi aina olla vaihtoehtoinen teksti, jotta kaikki käyttäjät saavat niistä tietoa.
On hyvä muistaa, että hakukoneoptimointia tekevät usein haluavat laittaa myös koristeellisille kuville vaihtoehtoisen tekstin. Eli tässä välillä hakukoneoptimointi ja saavutettavuus menevät hieman ristiin. On pienempi paha, jos koristeellisellakin kuvalla on hyvin kuvaa kuvaava vaihtoehtoinen teksti verrattuna siihen, että kuvien vaihtoehtoiset tekstit ovat mitä sattuu. Mutta tämä asia kannattaa miettiä siinä vaiheessa, kun tehdään verkkosivustoja. Mikäli sivustolla on WCAG-kriteerivaatimus, suosittelen mieluummin jättämään kaikki koristeelliset kuvat ilman vaihtoehtoista tekstiä, jotta sivusto on avustavia teknologioita käyttäville mahdollisimman saavutettava.
Vaihtoehtoinen teksti on ytimekäs kirjoitettu kuvaus kuvasta. Vaihtoehtoisen tekstin tarkoituksena on välittää käyttäjälle mitä kuvassa on silloin, kun kuvaa ei voida katsoa. Ruudunlukijoiden lisäksi tällainen tilanne voi esimerkiksi tulla, jos kuva on jostain syystä rikki. Tällöin myös visuaalisille käyttäjille näytetään kuvan vaihtoehtoinen teksti kuvan paikalla. Hyvin kirjoitettu vaihtoehtoinen teksti on äärimmäisen tärkeä saavutettavuuden kannalta, mutta hyvä vaihtoehtoinen teksti voi myös parantaa hakukoneoptimointia.
Kuvan vaihtoehtoinen teksti voi olla samalla kuvalla hieman erilainen eri sivuilla kontekstista riippuen. Mutta tärkeintä on, että käyttäjän pitäisi pystyä tietämään kuvan sisältö vain vaihtoehtoisen tekstin lukemalla.
Vaihtoehtoisessa tekstissä ei tulisi käyttää "Kuva jostakin" -muotoa, sillä avustavat teknologiat kertovat käyttäjälle jo oletuksena kyseessä olevan kuva.
Vaihtoehtoisen tekstin tulisi olla vain lause tai pari, monesti jopa vain muutama sana saattaa riittää. Yleinen ohje vaihtoehtoisen tekstin pituuteen on alle 125 merkkiä. Mikäli tarvitset paljon pidemmän kuvauksen, jätä kuvan vaihtoehtoinen teksti tyhjäksi ja lisää tämä pidempi teksti sivulle näkyvänä tekstinä.
Mikäli sivulla on jo sama tieto, kuin minkä lisäisit kuvan vaihtoehtoiseksi tekstiksi, jätä vaihtoehtoinen teksti tässäkin tapauksessa tyhjäksi. Näin ruudunlukijakäyttäjille ei tule samaa tietoa kahdesti, mikä saattaisi olla käyttökokemuksena hämmentävä.
The alt text of an image can vary depending on the context but the main point is that you should be able to know what is in the image by reading the alt text.
The alt text should not contain the word "image" or "image of". The screen reader will tell the user that it's an image.
Tekstin käyttöä kuvissa tulisi yleisesti ottaen välttää. Tekstiä JPG-, GIF, tai PNG-kuvissa ei voida muuttaa tekstin kokoa, ja zoomatessa tekstistä tulee pikselöitynyttä. Kuvissa olevaa tekstiä ei avustavat teknologiat tai myöskään hakukoneet pysty lukemaan. Mikäli on tarve käyttää tekstiä kuvassa, kannattaa suosia SVG-kuvia (SVG tulee englanninkielisistä sanoista Scalable Vector Graphics). Tekstin kontrastin testaamiseen löytyy englanninkielinen testaustyökalu: Text on background image a11y check, jotakin tällaista testityökalua on hyvä käyttää mikäli lisäät kuviin tekstiä.