Mi legyen az alt attribútum szövege? .1. rész
A cikk témái:
A webfejlesztők körében talán az egyik legismertebb akadálymentességi lehetőség a képekhez írható alt
attribútum. Ettől függetlenül még mindig kevesen alkalmazzák, vagy ha mégis, akkor gyakran helytelen szöveggel. Cikksorozatomban azt szeretném tisztázni, hogy mi is az alt
attribútum valódi szerepe, és ennek megfelelően mikor, milyen szöveget tartalmazzon.
Mi az a szöveges alternatíva?
A nyers szöveg a web akadálymentesség alfája és omegája. A nyers szöveget kivétel nélkül minden felhasználóhoz eljuttathatjuk valamelyik érzékszervén keresztül. Vizuálisan megjeleníthetjük, beszédszintetizátorral felolvastathatjuk, vagy akár egy Braille írásra alapuló eszköz segítségével tapintható információvá alakíthatjuk.
A képek, videók és hangok csak meghatározott érzékszerveken keresztül jutnak el a felhasználóhoz. Ha például a felhasználó az adott érzékszerv használatában korlátozott, akkor hozzá biztosan nem jut el a médiaelem által hordozott információ.
Régi alapelv, hogy ezeknél a médiaelemeknél is a nyers szöveg az akadálymentes információátadás eszköze. Vagyis ha a médiaelem által közvetített vizuális vagy auditív információt valamilyen módon szöveges formában is biztosítjuk, akkor az már szabadon áttranszformálható bármelyik érzékszervhez. Ezt a szöveges változatot hívjuk az adott médiaelem szöveges alternatívájának.
Képek esetén a szöveges alternatíva hordozója jellemzően az alt attribútum, és a kép környezetében lévő szöveges tartalom.
Az alt
attribútum mindig kötelező
A HTML szabvány szerint a képek beágyazásához használt img
jelölőelemnek két kötelező attribútuma van. Az src
adja meg a kép forrását, míg az alt
a kép rövid szöveges alternatíváját. A két attribútum sorrendje lényegtelen.
<img src="kep.jpg" alt="Ide jön a kép rövid szöveges alternatívája" />
Néhányan elkövetik azt a hibát, hogy az alt
attribútum kötelező jelenlétét úgy „oldják meg”, hogy minden képhez egy üres alt
(alt=""
) attribútumot rendelnek hozzá. Ez a megoldás sajnos néha rosszabb, mintha a kép maradt volna alt
attribútum nélkül. Ennek oka, hogy az üres alt
attribútumnak megszabott jelentése van. Erről a cikkben még szó lesz. Elöljáróban annyit, hogy csak azoknál a képeknél szabad üres alt
attribútumot megadni, amelyek pusztán dekorációs célt szolgálnak. Ha egy kép nem ilyen jellegű, és mégis üres alt
attribútumot kap, akkor végleg eltűnik bizonyos felhasználók elől.
Fontos: az img
jelölőelem title
attribútuma nem ugyanazt a célt szolgálja, mint az alt
attribútum. Mindig az alt
attribútumot használjuk a kép szöveges alternatívájának megadásához!
Az alt
attribútum nem csak a vak felhasználóknak segít
A szöveges alternatíva minden olyan felhasználónak fontos, aki valamilyen oknál fogva nem látja a képeket.
Értelemszerűen ide tartoznak a vak felhasználók, akikhez az alt
attribútum szövege képernyőolvasó program segítségével hallható, vagy Braille-kijelző segítségével tapintható formában jut el.
De ide tartoznak azok a felhasználók is, akik a képeket valamilyen technikai ok miatt nem látják. Például olyan lassú internetkapcsolattal rendelkeznek, hogy a böngészéskor inkább lekapcsolják a képek letöltését. Vannak akik úgynevezett szöveges böngészőprogramot használnak, amiben eleve nincs képmegjelenítés. De bármelyikünkkel előfordulhat, hogy a kép letöltése egyéb technikai ok miatt hiúsul meg. Ezekben az esetekben a kép helyén az alt
attribútumban lévő szöveges alternatíva jelenhet meg.
Mindenképpen említésre méltó, hogy az alt
szövegének komoly szerepe van az oldal keresőbarátsága szempontjából is. A keresőoptimalizálás (SEO) egyik lényeges alapelve, hogy a keresőrobotok is ezen keresztül értesülhetnek a kép információtartalmáról. Arra azonban ügyelni kell, hogy a humán akadálymentesség és a SEO szempontjai mindig egészséges egyensúlyban legyenek.
Mit írjunk az alt
attribútumba?
Ez az a kérdés, amire sajnos nem mindig adható egzakt válasz, hiszen az alt
szövege csak részben függ magától a kép tartalmától.
A kép környezete a döntő
Elképzelhető, hogy ugyanaz a kép, különböző kontextusban más és más alt
szöveget kaphat, de akár üresen is maradhat.
Ne vigyük túlzásba!
Létezik egy mondás, miszerint egy kép felér száz szóval
. De vajon a fordítottja igaz-e az alt
szövegére? A helyzet az, hogy nem feltétlenül. Itt inkább a kevesebb néha több
elve a domináns. A tömör, lényegre törő fogalmazás adott esetben hasznosabb a felhasználó számára. Persze a felhasználók igyényei sem egyformák. A képernyőolvasót használók között is van, aki a lehető legtöbb részletre kíváncsi, míg mások megelégszenek az adott pillanatban számukra legfontosabb információkkal.
Milyen hosszú legyen az alt
attribútum?
Nincsen semmilyen előírás vagy szabvány az alt
attribútum ideális vagy maximális hosszára. Általános megállapodás alapján valahol 75 és 100 karakter között javasolt meghúzni a felső határt. Ha ennél nagyságrendileg több lenne a szöveges alternatíva hossza, akkor annak már biztosan nem az alt
attribútumban van a helye.
Mindig tegyük fel a kérdést: milyen célt szolgál az adott kép a weboldalon?
Minden képről elmondható, hogy meghatározott okból került a weboldalba. Ha tudjuk, hogy a kép az adott weboldalon milyen célt szolgál, akkor megérthetjük, hogy az oldal látogatói számára milyen szempontból lesz fontos (vagy nem fontos). Ez pedig döntően befolyásolja a kép alt
szövegét.
Felhasználás alapján minden kép nagyjából besorolható az alábbi kategóriák valamelyikébe:
- Tisztán dekorációs célt szolgáló kép
- Vizuálisan gazdag, és az adott témához szorosan kapcsolódó kép
- Grafikon, diagram, térkép
- Képként reprezentált szöveg
- Funkcióval bíró kép (pl. képként megvalósított link vagy gomb)
- Ikon
- Logó, embléma
Persze a fenti lista nem teljes, de talán a jellegzetes eseteket lefedi. Sajnos nehezíti a dolgunkat, hogy a kategóriahatárok nem élesek, és esetenként átfedéseket mutatnak. Például érdekes lehet, hogy egy fellinkelt logó, ami visszavisz a webhely főoldalára, hova tartozik.
A következőkben nézzük meg az egyes kategóriák jellegzetességeit a szöveges alternatíva szempontjából.
Tisztán dekorációs célt szolgáló képek alt attribútuma
Ezekre a képekre az jellemző, hogy kizárólag a vizuális élményt erősítik. Még a látó felhasználók számára sincs funkcionális, vagy információs értékük.
Alapelv, hogy a dekorációs képeknek nem kell szöveges alternatíva, hiszen nincs információértékük.
Tipikusan ilyen dekorációs képek a sorminták, vonalak, körívek, csillanások, vagy egyéb, a weboldalt díszítő dizájnelemek. Ezeknél értelmetlen az olyan típusú szöveges alternatíva, hogy elválasztóvonal
, csillanás
, stb.
Nagyon sok esetben a látszólag mondanivalóval rendelkező fotók is dekorációs képnek minősülnek. A következő kép tipikus példája ennek. Rengeteg céges weboldalon látni valami ilyesmit:

Hacsak az oldal tartalma éppen nem a helyes kézfogási technikákat mutatja be, akkor ez a kép pusztán egy elcsépelt dekorációs elem. Biztosan nem kell hozzá olyan alternatív szöveget rendelni, hogy kézfogás
vagy üzletemberek kezet fognak a sikeres üzletkötésre
. (Megjegyzem a fenti képhez én írtam alt
attribútumot, hiszen a cikkemben nem dekorációs célból szerepel, hanem a mondanivalómat támasztja alá.)
Én mindig azt javaslom a fejlesztőknek, hogy a tisztán dekorációs célú képeket eleve ne tegyék img
jelölőelembe. A HTML kód alapvetően az oldal tartalmát írja le. Márpedig ezek a képek nem tartoznak az oldal tartalmához. Kizárólag a megjelenéséhez.
Dekorációs képek üres alt
attribútummal
Ha valamilyen ok miatt mégis img
jelölőelemmel kell egy dekorációs képet beillesztenünk, akkor az alt
attribútumát üres értékkel adjuk meg.
<img scr="vonal.gif" alt="" />
Lényeges, hogy az alt
attribútum idézőjelei között még szóköz se legyen.
A bevezetőben már utaltam rá, hogy ezzel a technikával a képet tulajdonképpen elrejtjük a képernyőolvasó programok és egyéb kisegítő technikák elől. A képernyőolvasó program átlép ezeken az elemeken, így a felhasználó még a kép létezéséről sem értesül. Arra is utaltam, hogy súlyos hibalehetőség, ha egy olyan képnél alkalmazzuk az üres alt
attribútumot, ami mondjuk fontos funkcióval bír. A felhasználó ilyenkor képtelen lesz az adott funkció végrehajtására.
Fontos: Teljesen más eset, ha az alt
attribútum abszolút hiányzik az img
jelölőelemből. Ilyenkor a felolvasóprogram jelzi a felhasználónak, hogy egy kép jön, de a tartalmát - az alt
attribútum hiányában - egyéb módon próbálja átadni. Végső esetben például beolvassa az src
attribútumban lévő fájlnevet, amiből hátha következtetni lehet valamire. A gond csak akkor van, ha a fájlnév is semmitmondó (pl. img_1023.jpg). Ebből is látszik, hogy az alt
szöveg szerepe kiemelkedő.
A dekorációs képek jobb helyen vannak a CSS-ben
A dekorációs képeket jobb valamelyik elem háttérképeként elhelyezni a CSS background-image
tulajdonság segítségével.
div.elvalaszto {
background-image: url(vonal.gif);
background-repeat: none;
}
Az így elhelyezett képek minden esetben rejtettek a képernyőolvasó program számára.
Megjegyzem az utóbbi időben azt tapasztalom, hogy sokan átesnek a ló túloldalára. Azaz a tartalmilag fontos képeket is kizárólag CSS háttérképként definiálják. Talán nem kell kifejtenem, hogy ez miért nem jó.
Vizuálisan gazdag, és az adott témához szorosan kapcsolódó képek alt
attribútuma
Ebbe a kategóriába sorolható minden olyan fénykép, rajz, festmény, ami a weboldal egészének vagy adott szakaszának tartalmához szorosan kapcsolódik, és több, mint pusztán dekoráció. Kiegészíti vagy alátámasztja a kép környezetében lévő írott szöveget.
Ezeknél a képeknél az alt
attribútum szövege a képen látható vizuális információ rövid és tömör leírása, szigorúan a kapcsolódó téma aspektusából.
Fogalmazási technikák az alt
szöveghez
Viszonylag jó technika lehet, ha elképzeljük, hogy egy ismerősünknek 1-2 mondatban telefonon keresztül kell elmondanunk azt, hogy mi látszik a képen. Mi az, ami nekünk egyből feltűnik rajta? Mi lenne az, amit lényegtelennek ítélnénk? Hogyan adnánk át a kép hangulalát? Semmiképpen nem jó, ha nagyon apró részletekbe is belemegyünk, de az sem jó, ha túlságosan elnagyoljuk a látottakat. Ráadásul végig figyelni kell arra is, hogy mi az a téma, mi az a szövegkörnyezet, aminek kapcsán a képről beszélünk.
A fogalmazás másik bevált technikája az lehet, ha felteszi magának a kérdést: ha az adott helyen nem használhatnék képet, akkor mit írnák helyette?
Ha erre az a válasz, hogy semmit
, akkor gyorsan gondolkodjon el azon, hogy biztosan kell-e a kép az adott helyre, vagy nem-e mégis dekorációs képről van szó.
Figyeljünk arra is, hogy a felhasználók valamilyen módon automatikusan értesülnek arról, hogy képpel van dolguk. A képernyőolvasó szoftverek például az img
elemhez érve automatikusan beolvassák, hogy Ábra
vagy Kép
. Vagyis az alt
attribútum szövegébe nekünk ezt már nem kell belefogalmazni. Lehetőség szerint tehát kerüljük az olyan fordulatokat, hogy Kép Gipsz Gézáról
, vagy Gipsz Géza fotója
. Utóbbi legfeljebb akkor lehet jó, ha feltétlenül hangsúlyozni szeretnénk, hogy a kép Gipsz Gézáról készült fotó, és nem karikatúra, vagy festmény.
A fogalmazás kihívásaira lássuk a következő példát:

Annyi biztos, hogy ez a kép is egy kézfogást ábrázol. Viszont attól függően, hogy a kép milyen témához kapcsolódik, még néhány további látható információt is fontos lehet kihangsúlyozni:
- A képen két katona fog kezet.
- Láthatóan azért fognak kezet, mert az egyik katona gratulál a másiknak.
- Egy idős katona gratulál egy fiatal katonának.
- A képen egy harmadik, középkorú katona is látható, aki közvetlenül az idős katona mellett áll.
- Vélhetően a középkorú katona is gratulált, vagy gratulálni fog a fiatal katonának.
- A kép egy teremben készült.
- A katonák nem harci, hanem hétköznapi egyenruhában vannak, és sapkát nem viselnek.
- Az idős és a középkorú katona arcán büszke megelégedettség, a fiatal katona arcán enyhe megilletődőttség látszik.
- Ha felismerhető, és a szövegkörnyezetből másoknak is kiderül, akkor név szerint kik vannak a képen. Nem feltétlenül mindenkié. Lehet, hogy csak az érdekes, hogy ki vagy kik gratuláltak, esetleg kinek.
- Ha a kézfogás technikája a téma, akkor lényeges lehet, hogy a fiatal katona vízszintesen előre, míg az idős katona enyhén felfelé tartja a kezét. Mindketten egymás szemébe néznek.
- Ha a fotó egy fényképezésről szóló szövegkörnyezetben van, ami például a fotókomponálási vagy exponálási technikákról szól, akkor a fotó ezen jellemzői lehetnek lényegesek.
Ami valószínűleg kevésbé lényeges, vagy abszolút lényegtelen:
- A kép hátterében három darab kék szék látszik.
- Az idős katona szemüveget és órát visel.
- A középkorú katona piros névkitűzőt visel.
- Az idős és a középkorú katona a kép bal oldalán, a fiatal katona a kép jobb oldalán van.
- A fiatal katona kicsit magasabb az idős katonánál, de nála is magasabb a középkorú katona.
A példából is látható, hogy ennyi információ birtokában a rövid, tömör szöveges alternatíva megfogalmazása nem is olyan egyszerű feladat. Némi gyakorlással azonban rá lehet érezni.
Megjegyzés: ha a kép olyan sok és érdemi információt tartalmaz, hogy leírása az alt
attribútumba nem tömöríthető össze, akkor egyéb HTML technikával kell biztosítani a részletes képleírást. Erről egy másik cikkemben fogok írni.
Amikor a tartalmi képről kiderül, hogy mégis dekorációs
Cikkek, hírek mellé gyakran tesznek a témához illő, de a témához plusz információt nem adó, úgynevezett stock fotókat. Ezek döntő többsége jellemzően csak dekorációs kép, így ha egyéb funkciójuk nincs (pl. nem linkek), akkor nyugodtan lehet üres az alt
attribútumuk. Ilyenre volt példa a közeli kézfogást ábrázoló fotó.
Ugyanez igaz azokra képekre is, amelyek alt
attribútuma szóról szóra megegyezne a kép szomszédságában lévő szöveges tartalommal. Ha ezeknél a képeknél az alt
attribútumot üresen hagyjuk, akkor a felhasználót információveszteség nem éri, sőt megkíméljük őt a zavaró szövegismétléstől.
Vegyük példának a következő képernyőfotót, ami egy képzeletbeli webshop egyik termékét mutatja. A termék neve és ára közvetlenül a termék fotója alatt van (és nem csak vizuálisan, hanem a HTML kódban is).

Ha a termékfotó alt
attribútumának a termék nevét, vagyis a Virágmintás gyertya
szöveget adnánk, akkor a képernyőolvasót használó vásárló a következőt hallaná:
Ábra Virágmintás gyertya Virágmintás gyertya 560 Ft
Ezzel szemben teljesen korrekt megoldás, ha üresen hagyjuk a kép alt
attribútumát, hiszen a fotót követő terméknév ugyanazt az információt hordozza, mint amit a kép ábrázol. Nyilván feltételezzük, hogy a termék többi jellemzője (mérete, színe, stb.) a termék adatlapján szerepel, és nem kizárólag a képből derül ki. Érdekes lenne, ha csak a kép alapján kellene bárkinek is rájönnie arra, hogy a kérdéses gyertya például 10 centiméter magas. De ugyanígy érdekes lenne az is, ha a fejlesztő ezt az információt csak az alt attribútumban osztaná meg, mondván aki nem látja a képet, az is tudja, hogy milyen magas
. Ezzel a következő fontos elvet hágja át.
Az alt
szövege ne mondjon többet, mint ami a képen látszik
Gyakori hiba, hogy a fejlesztő kötelességtudatból olyan információt is elhelyez az alt
attribútumban, amit a látó felhasználók sem kapnak meg, amikor a képet, illetve az oldalt megnézik.
Például tételezzünk fel egy cikket, aminek az a címe, hogy Pusztító erejű vihar söpört végig az országon
. A cikk beharangozójához tartozó fotó egy letört faágakkal teli utcarészletet ábrázol.

Tulajdonképpen bármilyen fotó jó lenne a cikkhez, amin hasonló téma látszik. Lehet, hogy tudja a fejlesztő, hogy a kérdéses kép mondjuk Szegeden készült, de ha a képhez egyébként nem tartozik Szegedre utaló képaláírás, és a cikk sem említi konkrétan Szegedet, akkor semmi értelme a képnek a Szeged
alt
szöveget adni. Valószínűleg a képet látó felhasználók közül sem ismernék fel sokan, hogy a kép hol készült. Az adott képnek ebben a kontextusban nem a konkrét helyszín a lényege. (Megjegyzem, ez a kép egyébként nem Szegeden, hanem az amerikai Charlottesville-ben készült.)
Művészi képek, festmények, alkotások
Ezek a képek komoly kihívást jelentenek, hiszen nagyon nehéz feladat egy műalkotásról rövid leírást írni. Gondoljunk például egy elvont Picasso alkotásra, vagy egy gótikus templomról készült fotóra.
Ami biztos, hogy ilyen esetekben is a weboldal témája a domináns. Nem mindegy, hogy a kép csak dekorációs céllal került az oldalba, vagy egy művészettörténeti weboldalról beszélünk. Előbbi esetben az alt
akár üresen is maradhat, míg az utóbbinál az alt
csak a lényeget emelheti ki. Egyértelmű, hogy a kép részletes leírását a weboldal szövegének kell kifejtenie.
A cikk folytatódik
Cikksorozatom második részében a többi képkategória jellegzetességei kerülnek sorra.