Mi legyen az alt attribútum szövege? .2. rész

Cikksorozatom előző részében - az alt attribútum általános jellemzőinek ismertetésén túl - két jellegzetes képkategória rövid szöveges alternatívájának meghatározásához adtam tanácsokat. Ebben a részben további képkategóriák kerülnek terítékre.

Grafikonok és diagramok

A grafikonok és diagramok általában arra szolgálnak, hogy egyszerre több adat összefüggéseire rávilágítsanak. De ebbe a kategóriába sorolhatók például a folyamatábrák is, amelyek a nevükből adódóan folyamatokat ábrázolnak.

Közös jellemzőjük, hogy annyi információt tartalmaznak, amelyet az alt attribútumba már képtelenség belezsúfolni. Az alt attribútum ilyenkor inkább annak a rövid összegzését tartalmazza, hogy miről szól az ábra, és mire akar rávilágítani. Például mi az, ami az ábrára ránézve egyből szembetűnik.

Tételezzük fel, hogy az alábbi grafikon egy országos sportverseny résztvevőinek számát ábrázolja.

Ehhez a grafikonhoz megfelelő alternatív szöveg lehet például A legtöbb versenyző Budapestről és Sopronból érkezett, míg a legkevesebb Győrből.

A grafikonon lévő adatok részletes ismertetését a honlap egyéb részén ajánlott elhelyezni, mégpedig úgy, hogy az ábra és a részletes leírás között a HTML kódban definiált, egyértelmű kapcsolat legyen. Erre több megoldás is létezik, de ezekről majd egy külön cikkben fogok írni. Előzetesen annyit, hogy szóba jöhet egy sima link használata, vagy a longdesc attribútum, illetve újabban a WAI-ARIA szabványban definiált aria-describedby attribútum is.

Képként reprezentált szövegek

Egészen a közelmúltig a CSS nem tette lehetővé, hogy egyedi betűtípusokat használjunk a weboldalakon. Ilyenkor kénytelenek voltunk az egyedi betűtípussal írt szövegeket (jellemzően rövid címsorokat) képként beilleszteni az oldalra. Erre az úgynevezett image replacement technológiát érdemes használni, ami a HTML kódban lévő nyers szöveget elrejti, és a helyét egy CSS-ben definiált háttérképpel pótolja, amin az egyedi betűtípussal írt szöveg látszik. Ez a technika helyesen alkalmazva nem vet fel akadálymentességi problémákat.

Néhányan azonban nem a CSS-ben helyezik el a szöveget ábrázoló képet, hanem a HTML kódban, img jelölőelemmel. Bár egyértelműen a CSS-ben elhelyezett kép a javasolt megoldás, ha valakinek mégis így kell megoldania a kérdést, akkor az img jelölőelem alt attribútumába pontosan azt a szöveget helyezze el, ami magán a képen látható.

Lássunk erre egy példát:

Ha ez egy címsor, akkor az alábbi módon lehet megjelölni:

<h2><img src="iskolai_progamjaink.png" alt="Iskolai programjaink" /></h2>

Hirdetések, bannerek

Sok esetben a képként reprezentált szövegek kategóriájába sorolhatók az állóképként megvalósított hirdetések, bannerek is. Itt is ökölszabály, hogy a hirdetésen látható szöveges információ legyen az alt attribútumban. A hirdetés egyéb vizuális elemeit, amelyek jellemzően csak dekorációs célból szerepelnek a hirdetésen, nem kell leírni.

Tipikus példa a következő banner:

Ennek alt attribútuma a következő lehet: Adója 1%-ával támogassa a magyarországi gyermek-mentőorvosi kocsik és a gyermekrohamkocsi működését. Szent Márton Gyermekmentő Szolgálat. Amennyiben a szövegkörnyezet nem utal rá, akkor ugyanennek az alt szövegnek az elejére esetleg be lehet szúrni, hogy Hirdetés:, illetve megfontolható, hogy a hirdető neve és a hirdetés szövege fordított sorrendben szerepeljen. Azt semmiképpen nem kell leírni, hogy a képen két mentőautó és egy mosolygó arcot ábrázoló embléma látható. Ezek ugyanis csak dekorációs elemek.

Időnként olyan hirdetésekkel is találkozni, amelyekben a nyomatékosítás kedvéért - valamilyen tipográfiai megoldással - ugyanaz a szöveg többször is szerepel. Például Akció, akció, akció. A banán kilója csak most 250 Ft. Ilyenkor az alt szövegben az akció szót felesleges és zavaró többször megismételni.

Sok szöveget tartalmazó képek

Tipikusan ilyen eset, amikor egy esemény plakátja képként kerül bele a weboldalba. Ezeken a plakátokon jellemzően rengeteg szöveges információ van, ami biztosan nem fér bele az alt szöveg ideális hosszába.

Ilyenkor ugyanúgy kell eljárni, mint a grafikonok esetén. Az alt attribútumba csak egy rövid összefoglalás kerüljön, például az esemény nevét, helyszínét és dátumát leírva, majd ezzel párhuzamosan a plakáton látható szövegeket a honlap egyéb részén részletes szövegként is el kell helyezni.

A helyzet némiképpen más akkor, ha a plakát olyan kicsi képként szerepel az oldalon, hogy a szövege a látók számára sem olvasható.

Ilyenkor megint fel kell tenni a kérdést, hogy mi célt szolgál az oldalon? Csak dekoráció? Vagy esetleg egy link az esemény weboldalára? Ha ez utóbbi, akkor már a következő kategóriába sorolható.

Interaktív funkcióval bíró képek

Amikor a kép egy linkként használt <a> jelölőelemben vagy egy button jelölőelemben található, és közvetlenül mellette nincsen nyers szöveg, akkor a kép alternatív szövege arra utaljon, hogy mit csinál az adott link vagy gomb, és ne arra, hogy a kép hogyan néz ki. Segítségképpen képzeljük el, hogy ha az adott helyre csak sima szöveges linket tehetnénk, akkor abba milyen szöveget írnánk. Na ez a szöveg kerülhet a fellinkelt kép alt attribútumába is.

Olyan esetekben, amikor a képen szöveg látszik, akkor viszonylag egyszerű a dolgunk, hiszen a képként reprezentált szövegekhez hasonlóan a képen látható szöveget kell az alt attribútumba írni.

Tipikusan ezt csináljuk a képként megvalósított menüpontoknál:

<ul>
   <li><a href="index.html"><img src="fooldal.png" alt="Főoldal" /></a></li>
   <li><a href="termekeink.html"><img src="termekek.png" alt="Termékeink" /></a></li>
   <li><a href="kapcsolat.html"><img src="kapcsolat.png" alt="Kapcsolat" /></a></li>
</ul>

Ezzel ellentétben a következő példa már egy olyan képes gombot szemléltet, amin a szöveg mellett egyéb elemek is láthatók:

Ennél az alt attribútumba biztosan nem kell leírni, hogy "a kép bal felső sarkában egy döntött PDF ikon, a jobb felső sarkában pedig egy sárga szalagon az adó 1% felirat látszik".

Ez a kép, mint link itt azt a funkciót tölti be, hogy megnyomásával letölthető az adó 1% rendelkező nyilatkozat, mégpedig PDF formátumban. Vagyis az alt attribútum ezt a szöveget tartalmazza: Adó 1% rendelkező nyilatkozat letöltése PDF formátumban.

A kódban ez így jelenhet meg:

<a href="nyilatkozat.pdf"><img src="nyilatkozat_letoltese.png" alt="Adó 1% rendelkező nyilatkozat letöltése PDF formátumban" /></a>

A korábban látott plakátos példára visszatérve, ha a plakát képe tulajdonképpen csak egy link az adott esemény weboldalára, akkor a kép alt szövege mondjuk ez lehet: A szüreti mulatság részletes programja. Fontos megérteni, hogy itt nem arra utalunk, hogy a képen egyébként a szüreti mulatság programjának plakátja látszik, hanem arra, hogy a link megnyomásával ahhoz lehet eljutni.

Nem kell utalni a kattinthatóságra

A fellinkelt képek alt attribútumába nem kell beleírni, hogy link, hivatkozás, vagy kattintson ide. Ebből a szempontból nézve az alábbi alt szövegek nem jók:

• Link a termékeinkhez
• Kattintson ide az adó 1% rendelkező nyilatkozat letöltéséhez
• Hivatkozás a fesztivál részletes programjához

A képernyőolvasó programok a fellinkelt képhez érve eleve közlik a felhasználóval, hogy egy hivatkozásról és egyben egy képről van szó, amiből tudni fogja, hogy a kép kattintható.

Kivételek természetesen itt is vannak. Ha például egy fellinkelt hirdetés képén láthatóan is szerepel a kattintson ide szöveg, akkor az alternatív szövegben is megjelenhet. Például: Szeretne részt venni egy egzotikus utazáson? Kattintson ide és nyerje meg!

Ikonok

Az ikonok sokféle szerepet tölthetnek be egy weboldalon. Általában a vizuális nyomatékosítást szolgálják önmagukban, vagy valamilyen szöveg mellett.

Önmagában álló ikonnál az alt attribútum az ikon jelentését, funkcióját tartalmazza, és soha ne azt, amit az ikon ábrázol.

Például a weboldalakon elterjedt ikon a házikó, ami fellinkelve a főoldalra történő visszaugrást teszi lehetővé. Ilyenkor helyes alt szöveg lehet például a Főoldal, vagy a Vissza a főoldalra. De semmiképpen nem jó a Ház, vagy a Házikó. Tulajdonképpen itt is az interaktív funkcióval bíró képek elve érvényesül.

Abban az esetben, ha az ikon valamilyen szövegkörnyezetben jelenik meg, akkor fontos kérdés, hogy a közvetlen szövegkörnyezet vajon ugyanazt az információt hordozza-e, mint amire az ikon utalna?

Klasszikus példa a hibaüzenetek mellett megjelenő ikon. Sokszor az ikon formája és színe együttesen hordozza azt az információt, hogy a hibaüzenet csak egy figyelmeztetés, vagy esetleg egy súlyosabb dolog történt.

Az alábbi példában csak egy figyelmeztetés jelenik meg:

Mivel a hibaüzenet (mint szövegkörnyezet) nem tartalmazza az ikon figyelmeztetésre utaló jelentését, ezért az ikon alt attribútumába kell ezt az információt elhelyezni:

<p><img src="figy_ikon.png" alt="Figyelem!" /> A kapcsolat 5 perc múlva megszakad.</p>

Az egyértelműen rossz megoldás, ha az alt attribútumban az ikon megjelenését kezdenénk körülírni, például úgy, hogy felkiáltójel sárga háromszögben.

Más a helyzet, ha a szövegben is szerepel a figyelem szó:

Ekkor az ikon tulajdonképpen csak egy vizuális nyomatékosítás, azaz az adott szempontból nézve egy dekorációs célú kép. A cikk előző részében kifejtettem, hogy a dekorációs képeknél az alt attribútumot mindig üresen kell hagyni. Itt is ez a helyes megoldás, amit az is indokol, hogy a képernyőolvasó programnak felesleges közvetlenül egymás után kétszer beolvasnia, hogy Figyelem!.

Vagyis a hibaüzenet helyes kódolása ez lehet:

<p><img src="figy_ikon.png" alt="" /> <strong>Figyelem!</strong> A kapcsolat 5 perc múlva megszakad.</p>

Hasonló a helyzet akkor is, ha egy szöveges link mellett szerepel ikon. Itt is az a kérdés, hogy az ikon jelentése megegyezik-e a link szövegével, vagy esetleg plusz információval egészíti ki azt? Ha szó szerint megegyeznek, akkor az ikon alt attribútuma maradjon üres.

A következő példában szöveges menüpontok mellett szerepelnek ikonok:

Ennek helyes kódolása így néz ki:

<ul>
  <li><a href="index.html"><img src="fooldal_ikon.png" alt="" /> Főoldal</a></li>
  <li><a href="kapcsolat.html"><img src="kapcsolat_ikon.png" alt="" /> Kapcsolat</a></li>
  <li><a href="webshop.html"><img src="webshop_ikon.png" alt="" /> Webshop</a></li>
</ul>

Ilyenkor az üres alt attribútum miatt a képernyőolvasó program az ikonokat teljesen figyelmen kívül hagyja, és csak a menüpont szövegét olvassa fel. Ha az alt attribútumot kitöltenénk az adott menüpont szövegére, akkor mindegyik menüpontban kétszer egymás után hangzana el a menüpont neve. Ugyanezen ok miatt az is kerülendő, hogy az ikon és a szöveg külön-külön linkben legyen.

Egyébként itt is áll, hogy ezeket a „dekorációs” ikonokat inkább a CSS segítségével érdemes megjeleníteni, és akkor nincs gond az alt attribútum meghatározásával.

Végezetül fontos, hogy az ikon szó ne szerepeljen az ikon alt attribútumában, mert nem az az érdekes, hogy az adott kép ikon, hanem az, hogy miért van ott, ahol van. Teljesen felesleges az olyan megfogalmazás, hogy Kosárba ikon, Főoldal ikon, vagy PDF dokumentum ikon.

Logók

Kezdjük két egyszerű szabállyal:

1. Nem kell körbeírni, hogy a logó mit ábrázol.
2. Nem kell a logó alt attribútumában a "logó" szónak szerepelni.

E két szabály alól legfeljebb akkor lehet kivétel, ha a szövegkörnyezet kifejezetten az adott logó megjelenését elemzi.

Ha a logó sima képként szerepel az oldalon, és nincs fellinkelve, akkor az alt attribútumába annak a cégnek, terméknek, stb. nevét érdemes beleírni, amit vagy akit a logó reprezentál.

<img src="valami_logo.png" alt="Valami Kft." />

Ahogy említettem a logó szónak nem kell szerepelnie, még úgy sem, hogy "Valami Kft. logója".

Ha a logó után közvetlenül nyers HTML szövegként is megjelenik a cég, vagy termék neve, akkor a logó alt attribútuma akár üresen is maradhat. Ez a szituáció nagyon hasonlít az ikonoknál leírt helyzetre.

<p><img src="valami_logo.png" alt="" /> Valami Kft.</p>

Amennyiben a logó egyben link is, akkor megint nem maga a logó az érdekes, hanem az, hogy a link mit csinál, hova mutat.

Viszonylag könnyű a helyzet, ha a link az adott cég, vagy termék honlapjára visz, hisz ilyenkor ugyanúgy a cég, vagy a termék neve kerülhet az alt attribútumba.

<a href="http://www.valami.hu"><img src="valami_logo.png" alt="Valami Kft." /></a>

A honlap logója

A legtipikusabb logóhasználat az, amikor az adott honlap logója valahol az oldal elején (tetején) jelenik meg, egyfajta cégérként. A felhasználók azt is megszokták, hogy ezekre rákattintva visszajutnak az adott honlap főoldalára, vagyis ezen minőségükben interaktív funkcióval rendelkező képek is.

Ezek fényében milyen alt attribútumot adjunk nekik?

Igazából erre sem adható egzakt válasz. Az akadálymentességgel foglalkozó szakemberek, és az érintett felhasználók véleménye is megoszlik a kérdésben.

Vannak akik azt mondják, hogy a honlap logója csak egy díszítőelem, mert a honlap neve a szövegkörnyezetből amúgy is kiderül. Például az oldal title jelölőelemében, vagy a fejlécben elhelyezett h1 elemből is megtudható. De mivel a logó az imént említett okokból linkként is működik, ezért az álláspontjuk szerint elég, ha az alt attribútum csak a link funkciójára utal. Például így:

<a href="index.html"><img src="valami_logo.png" alt="Ugrás a főoldalra" /></a>

Mások azon a véleményen vannak, hogy a logó alt attribútumába - a link funkcióján túl - valamilyen módon érdemes belecsempészni honlap nevét is. Például így:

<a href="index.html"><img src="valami_logo.png" alt="Vissza a Valami Kft. főoldalára" /></a>

Vagy egyszerűen csak így:

<a href="index.html"><img src="valami_logo.png" alt="Valami Kft. főoldala" /></a>

Megint mások abból indulnak ki, hogy a felhasználói megszokások a képernyőolvasót alkalmazók körében is élnek, vagyis az oldal elején lévő, linkkel ellátott cégnév az a logó lesz, ami általában visszavisz a honlap főoldalára. Tehát elég a cégnév, és nem kell a link funkcióját külön megmagyarázni:

<a href="index.html"><img src="valami_logo.png" alt="Valami Kft." /></a>

Ha megkérdeznék tőlem, hogy szerintem melyik verzió az ideális, én sem tudnék egyértelműen állást foglalni. Leginkább az első megoldás felé hajlok, de volt, amikor az utolsó verziót használtam. Bár azt is megjegyzem, hogy sokszor a logót (mint img elem) eleve nem is teszem bele az oldalba, hanem valamelyik fejlécben szereplő egyéb elem CSS háttereként használom.

Összegzés

Az alt attribútum a HTML-ben egy látszólag aprócska attribútum, mégis nagyon fontos szerepe van. Amikor kitöltjük, akkor ne azért tegyük ezt, hogy kipipálhassunk valami kötelező dolgot. Főleg ne az járjon a fejünkben, hogy mindegy mit írunk oda, csak legyen ott valami. Ne görcsöljünk azon se, hogy vajon van-e valamilyen előírás az adott alt szövegre. Inkább józan ésszel gondolkozzunk el egy pillanatra, hogy melyik szituációban, milyen szöveg könnyítheti meg a felhasználók életét.

Végezetül gyakorlati tapasztalatból tudom, hogy az alt attribútum szövegét a különböző tartalomkezelő (CMS) rendszerek elterjedésével ma már nem feltétlenül a fejlesztők, hanem inkább a tartalomfeltöltők adhatják meg. Nagyon fontos lenne, hogy a tartalomkezelő rendszer bevezetésekor ők is megtanulják az alternatív szöveg megfogalmazási technikáit.