Hogyan írj jó alternatív szöveget a képekhez

Mire való az alternatív szöveg

Az alternatív szöveg egy kép szöveges megfelelője, amelyet az alt attribútumba írsz. A képernyőolvasók felolvassák, a Braille-kijelzők megjelenítik, a böngésző pedig akkor mutatja, ha a kép nem töltődik be. A keresők is felhasználhatják. Az akadálymentesség webes szabványa, a WCAG olyan szöveges alternatívát kér, amely ugyanazt a feladatot látja el, mint a kép (1.1.1-es sikerességi feltétel, A szint).

A lényeg: az alternatív szöveg nem képaláírás, és nem öncélú képleírás. Azt mondja el, mit ad hozzá a kép az oldalhoz. Ugyanahhoz a fotóhoz két oldalon eltérő alt szöveg kellhet, vagy egyáltalán semmi.

Négyféle kép

• Az informatív képek jelentést adnak hozzá: egy fotó, egy ikon egy telefonszám mellett, egy diagram. Írj rövid alt szöveget, amely ezt a jelentést közvetíti.
• A funkcionális képek linkekben és gombokban vannak. Az alt szöveg a műveletet vagy a célt nevezi meg, nem a képet: „Keresés” egy nagyítónál, „Az oldal nyomtatása” egy nyomtatóikonnál.
• A díszítő képek semmit sem adnak hozzá: egy keret, egy térkitöltő, egy díszítőelem, vagy egy kép, amely csak megismétli a mellette lévő szöveget. Adj nekik üres alt attribútumot (alt=""), hogy a képernyőolvasók átugorják őket, vagy tedd őket háttérként a stíluslapba.
• A szöveget tartalmazó képek végső megoldást jelentenek. Ha szükséged van egyre, az alt szöveg megismétli a képen lévő szavakat. Egy logó, amely nem link, a szervezet nevét kapja.

Hogyan írj jó alternatív szöveget

1. 1Kérdezd meg, miért van a kép az oldalon. Mi hiányozna egy látogatónak, ha nem lenne ott?
2. 2Írd le, ami ehhez a célhoz számít, egy kifejezésben vagy egy mondatban.
3. 3Kezdd a tartalommal. Egy képernyőolvasó általában jelzi, hogy valami kép, így a „kép erről” vagy a „fotó erről” ritkán segít.
4. 4Ne ismételd meg, amit a kép melletti szöveg már elmond. Ha mindent elmond, a kép díszítő, és üres alt attribútumot kap.
5. 5Olvasd fel hangosan az alt szöveget, anélkül hogy az oldalra néznél. Önmagában is értelmes?

Gyakori hibák

• Egyáltalán nincs alt attribútum. Egyes képernyőolvasók ilyenkor a fájlnevet olvassák fel.
• Fájlnév vagy kód mint alt szöveg, például „IMG_2041.jpg”.
• Ugyanaz a kulcsszósor sok képen. Az alternatív szöveg elsősorban embereknek szól.
• Egy tisztán díszítő kép hosszú leírása.
• Egy gombkép kinézetének leírása a művelete helyett. Egy keresés gomb nem „nagyító”, hanem „Keresés”.

Milyen hosszú legyen?

A WCAG 1.1.1 nem ad meg karakterszámot. A W3C azt tanácsolja, hogy legyen rövid, ideális esetben egy kifejezés vagy egy mondat. Diagramoknál és más összetett képeknél a teljes információt szövegként add meg az oldalon, az alt szöveget pedig tartsd röviden. Ha egy mondatnál többre van szükséged, a kép valószínűleg olyan tartalmat hordoz, amely az oldal szövegébe való.

Ellenőrizd a webhelyedet

A hasznos alt szöveg nélküli képek megtalálásához futtasd le egy oldalon az ingyenes Alternatív szöveg ellenőrzőt. Ha sok képhez szeretnél javaslatokat, használd az Alternatív szövegek eszközt. Egy automatikus javaslat elnézheti, ami az oldaladon számít, ezért olvass el minden szöveget, és módosítsd, ha nem illik a kép céljához.

A Do4U eszközei a gépelésben segítenek, nem a döntésben: hogy egy kép informatív, funkcionális vagy díszítő, azt te tudod a legjobban. A webhelyed nagyobb változásai után ellenőrizd újra.