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:

Kézfogás, ahol a partnereknek csak a kézfeje és a csuklója látszik
Fotó: buddawiggi

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:

Két katona kezet fog egy harmadik társuk jelenlétében
Fotó: Hector Alejandro

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.

A faágas fotó a cikk címe mellett van
Fotó: bsabarnowl

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.