Ei-tekstuaalinen sisältö

Mitä kriteeri edellyttää

Ei-tekstuaalisella sisällöllä — kuvilla, kuvakkeilla, kaavioilla, animaatioilla, CAPTCHA-elementeillä, äänisisällöillä ja aistinvaraisilla kokemuksilla — on oltava vaihtoehtoinen teksti, joka välittää saman tiedon tai toiminnon. Vaihtoehtoinen teksti on se, minkä avustava teknologia esittää käyttäjälle silloin, kun alkuperäistä sisältöä ei voida havaita.

WCAG erottaa neljä kategoriaa:

• Informatiiviset kuvat tarvitsevat alt-tekstin, joka kuvaa välitetyn tiedon.
• Toiminnalliset kuvat (linkit, painikkeet) tarvitsevat alt-tekstin, joka kuvaa toiminnon — ei ulkoasua.
• Koristeelliset kuvat saavat tyhjän alt-attribuutin (alt=""), jolloin ruudunlukuohjelmat ohittavat ne.
• Monimutkaiset kuvat (kaaviot, diagrammit) tarvitsevat lyhyen alt-tekstin sekä pitemmän kuvauksen tekstissä, <details>-elementissä tai aria-describedby-attribuutin kautta.

Kuinka vaatimus täytetään

• Lisää alt-attribuutti jokaiseen <img>-elementtiin. Tyhjä koristeellisille, kuvaava informatiivisille.
• Anna jokaiselle pelkän kuvakkeen sisältävälle <button>-elementille saavutettava nimi aria-labelin, näkyvän tekstin tai SVG:n <title>-elementin kautta.
• Kaavioihin ja infografiikkaan kirjoita yhtä lauseen mittainen yhteenveto alt-tekstiksi ja sisällytä data saavutettavaan taulukkoon välittömästi ennen kuvaajaa tai sen jälkeen.
• CAPTCHA-elementteihin tarjoa vähintään yksi ei-visuaalinen vaihtoehto (ääni-CAPTCHA, sähköpostivahvistus tai palvelinpuolen pyyntömäärärajoittaminen).
• Tietoa välittävälle äänisisällölle (podcastin esikuuntelu, käyttöliittymän ääni) tarjoa tekstivastine.

Yleisimmät virheet

• alt="image" tai alt="kuva henkilöstä" — kuvaa välineen, ei sisällön.
• Pelkän kuvakkeen sisältävät painikkeet ilman saavutettavaa nimeä (<button><svg /></button>). Ruudunlukuohjelmat ilmoittavat “painike” ilman muuta tietoa.
• Koristeelliset kuvat ilman alt=""-attribuuttia — ruudunlukuohjelmat lukevat tiedostonimen.
• Kaavion <img>-elementti, jonka alt-tekstinä on kaavion otsikko mutta jonka taustadata ei ole missään sivulla.
• Merkitystä kantavat CSS-taustauvat ilman tekstiselitettä koodissa.

Miksi tämä on tärkeää

Tämä on ruudunlukuohjelmien saavutettavuuden perusta. Sivusto, joka ei täytä kriteeriä 1.1.1, on käyttökelvoton sokeille käyttäjille — jokainen kuva on umpikuja. Tämä on myös yleisin virhe, jonka axe ja Lighthouse havaitsevat, koska automaattiset työkalut voivat ilmoittaa puuttuvista alt-teksteistä muttei arvioi, onko olemassa oleva alt-teksti merkityksellinen.