Alt szöveg: mikor kell, és milyen helyettesítő szöveg kell a képekhez?

Összefoglalva:

Amikor nem kell alt

Az, hogy nem kell alternatív képleírás, azt jelenti a gyakorlatban, hogy a tartalomkezelő rendszerben (pl. Drupal, WordPress stb.) nem kell kitölteni az alternatív leírás mezőt, amikor a képet feltöltjük vagy szerkesztjük.

A kódban a kép (img) elemnél kell szerepelnie az alt címkének, de ilyenkor üres lesz, nem lesz kitöltve az attribútuma, tehát vagy így kell kinéznie: alt vagy így: alt="".

A kép csak dekoráció, nem közöl információt

Ebben a példában a tantermi helyzetet ábrázoló stockfotó csak díszítőelem a szöveg mellett:

Szakképzés a munkaerőpiac igényeire szabva Ha a szakképzésből kikerülő diákok tudása, készségei közelebb kerülnek a munkaerőpiaci elvárásokhoz, akkor a munkáltatók könnyebben találnak megfelelően képzett munkatársakat, a végzett fiataloknak pedig nem kell már az első  munkahelyükön saját szakmai hiányosságaikkal szembesülniük.

Ehhez a képhez nem kell alternatív leírásba írni, hogy „számítógépteremben, a gép előtt ülő fiú, mellette a tanárával, aki rámutat a képernyőjére”.

Az információ szövegesen is szerepel az oldalon

Egy szoftvert bemutató weboldalon szerepel egy képernyőkép a szoftverből, amelyen láthatók az exportálható fájltípusok nevei és ikonjai. A képes megjelenítés mellett szöveges formában is fel vannak sorolva ezek a fájltípusok:

A források nagy része online tanfolyam, szövegekkel, képekkel és videókkal. Gyakran le is tölthetők, több formátumban: Word, Kindle, PDF, Epub 2, Epub 3, RSS, HTML, SCORM, OUXML fájl, IMS CC, OUXML Pckg.

Ebben az esetben nem kell a képhelyettesítő szöveg a képen látható fájlformátumokról, hiszen akkor a képernyőolvasó program felolvasná egyszer a begépelt szövegből, aztán a képhelyettesítő szövegből is ugyanazt az információt.

Amikor kell alt

Az előző példában bemutatott szoftverleírás úgy is el lehet készítve, hogy az exportálható fájlformátumok a szöveges részben nincsenek felsorolva, csak a képről olvashatók le:

Ebben az esetben a képről leolvasható fájlformátumneveket a kép alternatív leírásában kell megadnunk, ami így fog kinézni a kész tartalmunk kódjában:

alt="Word, Kindle, PDF, Epub 2, Epub 3, RSS, HTML, SCORM, OUXML File, IMS CC, OUXML Pckg"

Így ha a képet nem lehet megjeleníteni, vagy ha a látogató képernyőolvasóval olvassa a tartalmunkat (lásd akadálymentesség), akkor sem vész el a kép által közvetített információ. A hiányzó képet jelző ikon mellett meg fog jelenni a képhelyettesítő szövegünk:

E

Alternatív leírás nélkül csak a hiányzó képet jelző ikon látszik:

Ugyanígy kell alternatív leírás akkor, amikor szöveg helyett ikonokat használunk. Például ha a telefonszámok előtt nem kiírjuk, hogy „Telefonszámaink:”, hanem ehelyett egy telefon ikont használunk, akkor az a szöveg kerül az altba, ami helyett az ikon ott áll.

alt="Our phone numbers:"

Az is gyakori, hogy kép linkel egy másik oldalra. Tipikus például, hogy a webhelyeken a közösségimédia-oldalakra az adott platform logója linkel. Itt három ilyen, linkként használt kép van:

A három kép altja: 

alt="Facebook", 
alt="YouTube" és 
alt="Instagram".

Mi legyen az alternatív leírás szövege?

Az, amit a kép helyett írnánk, ha nem használhatnánk a képet.

Tehát nem kell bele az, hogy „kép”, „ikon”, „ábra”, „link” stb. – hiszen például ha nem használhatnánk a Facebook-logót linkként, hanem linkszöveget kellene a logó helyére írnunk, akkor sem azt írnánk, hogy „Facebook-logó” vagy „link a Facebookra”, hanem csak annyi lenne a kattintható szöveg, hogy „Facebook”.

Csak azt a képi információt kell szövegesíteni, ami a tartalmunk szempontjából fontos, releváns. 

Teljesen fölösleges – sőt egyenesen zavaró – lenne például az, ha a fentebbi, fájltípusos képernyőképről a fájltípusok feletti szöveget is belevennénk az alternatív leírásba.

alt="Download this course. Download this course for use offline or for other devices. Word, Kindle, PDF, Epub 2, Epub 3, RSS, HTML, SCORM, OUXML File, IMS CC, OUXML Pckg"

Mint ahogy azt is feleslegesen írnánk bele, hogy a képernyőképen az ikonok négy sorban vannak elrendezve, vagy hogy egyáltalán ikonok vannak a képernyőképen: az aktuális szövegkörnyezetben nem ez az információ fontos a képről. (Más szövegkörnyezetben viszont ezek is lehetnek fontos információk – például ha a szoftver grafikus dizájnjáról írunk.)

Ha a kép leírása túl hosszú lenne egy alt attribútumhoz…

Előfordulhat, hogy egy alt attribútumhoz túl hosszú lenne a kép leírása – ilyen eset lehet például az, ha a képen egy folyamatábra vagy egy grafikon van.

Ha az adott oldalra már túl sok lenne a képen közölt információ szöveges formában is közzétéve, akkor a legjobb, ha a kép által közvetített információt szövegesen egy új oldalon írjuk le, és linkelünk rá (akár magát a képet használva linkként).

Alternatív képleírás SVG-khez

A W3.org ajánlásának megfelelően az SVG-k alternatív leírással való ellátásához a <title> elemet használjuk, és hivatkozzunk az id-jára egy aria-labelledby attribútumban:

<svg aria-labelledby="svgtitle1">
 <title id="svgtitle1">Telefonszámunk:</title>
</svg>