Partner Stúdio

Képzeld el, hogy csukott szemmel böngészel, és a telefonod felolvassa neked a weboldalt. Szépen halad a szöveg, aztán egyszer csak ezt hallod: „IMG aláhúzás 4821 pont jpg”. Ennyi. Ez volt a kép.

Nem túlzás. A W3C akadálymentességi oktatóanyaga kifejezetten figyelmeztet rá, hogy ha a képnél hiányzik az alt attribútum, egyes képernyőolvasók a fájlnevet mondják be helyette. A látássérült látogató tehát nem csendet kap, hanem zajt. És közben a Google is lemarad valamiről: a saját dokumentációja szerint az alt szöveg a legfontosabb kiegészítő adat, amit egy képhez megadhatsz.

Szerintem ez a weboldalad egyik legszerencsésebb pontja. Itt a keresőoptimalizálás és az akadálymentesség pontosan ugyanazt kéri tőled – csak mindkét táborban másképp szokták elrontani.

Mire való ez a pár szó a kép mögött?

Az alt a kép szöveges párja. Ez jelenik meg, ha a kép nem töltődik be, ezt olvassa fel a képernyőolvasó, és ebből (meg a környező szövegből) rakja össze a kereső, mi lehet a képen.

Az akadálymentességi irányelvek (WCAG) legelső követelménye, az 1.1.1-es pont arról szól, hogy minden nem szöveges tartalomnak legyen olyan szöveges alternatívája, ami ugyanazt a célt szolgálja. Ebben a mondatban a „cél” a lényeg. Nem az a dolgod, hogy aprólékosan leírd a képet, hanem hogy átadd, miért van ott egyáltalán.

A Google oldaláról nézve a képes keresőoptimalizálási útmutató azt mondja, hogy a kereső az alt szöveget a gépi látással és az oldal tartalmával együtt használja. Ha a kép link, akkor az alt horgonyszövegként is számít – vagyis úgy kezeli, mint egy kattintható felirat szövegét.

Öt kérdés, és tudod, mit írj

A W3C WAI készített egy döntési fát, ami pár kérdéssel eldönti helyetted, milyen alt kell. Én ebben a sorrendben mennék végig rajta:

1. Van szöveg a képen? Ha ugyanez a szöveg rendes szövegként ott van mellette, vagy csak díszítés, maradjon üres az alt. Ha a képen lévő szöveg funkciót jelöl (mondjuk egy ikon), akkor a funkciót írd le. Ha a szöveg sehol máshol nem szerepel, kerüljön az alt szövegbe.
2. Egy link vagy gomb része, és nélküle nem derül ki, hova visz? Akkor nevezd meg a célt vagy a műveletet.
3. Hozzátesz valamit a tartalomhoz? Egyszerű fotónál, grafikánál elég egy rövid leírás, ami ezt a többletet átadja. Diagramnál, bonyolultabb ábránál az információnak máshol is ott kell lennie az oldalon. Ha a szöveg már mindent elmond, amit a kép, üres alt.
4. Csak dísz? Üres alt.
5. Egyik sem stimmel? A fa nem fed le minden esetet, ilyenkor a W3C részletesebb képes oktatóanyagában érdemes körülnézni.

Feltűnt? Négy ág is üres alt szöveghez vezet. És pont itt csúsznak el a legtöbben, akik SEO-szemüvegen át nézik a dolgot: minden képre kulcsszavas leírást gyártanak, pedig sok kép sokkal jobban jár egy kis csenddel.

Az üres alt nem ugyanaz, mint a hiányzó

Kicsi különbség a kódban, nagy a fülnek. Az alt="" azt üzeni a segítő technológiának: ezt a képet nyugodtan átugorhatod. Ha viszont az attribútum egyszerűen nincs ott, a program nem tudja, mit kezdjen vele – és jön a fájlnév.

A W3C dekoratív képekről szóló oldala ilyen eseteket sorol a „nyugodtan hallgathat” kategóriába:

• keretek, elválasztók, sarokdíszek;
• linkszöveg mellé tett ikon, ha a szöveg már elmondja, hova visz a link;
• hangulatkép, ami szép, de információt nem hordoz;
• kép, amit a mellette álló szöveg már azonosít és leír.

Tipikus eset: egy cikk tetején ott a szokásos irodai fotó – laptop, kávé, egy cserép zöld. A cikk a számlázásról szól. Ennek a képnek nincs mit mondania. Az üres alt itt nem lustaság, hanem udvariasság: a felolvasót használó olvasódnak nem kell végighallgatnia, hogy „laptop egy fa asztalon egy csésze kávé mellett”.

Egy csavar azért van a dologban. A W3C szerint azt, hogy egy kép dísz vagy információ, csak a szerző döntheti el. Ugyanaz a fotó egy kávézó oldalán már igenis mond valamit, hiszen megmutatja, hogyan néz ki a hely.

Rossz, jobb, legjobb – pár ismerős helyzet

A Google útmutatója egy kiskutyával szemlélteti a skálát. Rossz, ha nincs alt. Rossz, ha kulcsszavak halmaza. Jobb a „puppy”, és a legjobb a „Dalmatian puppy playing fetch” (dalmata kölyök apportíroz). Fordítsuk ezt le néhány vállalkozói helyzetre.

Egy fodrászat bemutatja, mit tud

• Rossz: alt="fodrász budapest hajvágás festés melír olcsó fodrász"
• Gyenge: alt="kép a szalonról"
• Jó: alt="Fodrász balayage-festést készít egy vendég hosszú, barna haján"

Az első klasszikus kulcsszóhalmozás. A Google ezt kifejezetten kerülendőnek tartja, mert rossz élmény a felhasználónak, és az oldal akár spamnek is tűnhet tőle. A második semmit nem árul el, és a „kép a…” kezdet is fölösleges. A WebAIM útmutatója szerint a képernyőolvasó magától is jelzi, hogy képről van szó, így a „kép a…” vagy „fotó, amelyen…” csak az idődet rabolja – meg a hallgatóét.

A logó a fejlécben, ami a főoldalra visz

• Rossz: alt="logo"
• Rossz: alt="vissza a főoldalra, kattints ide"
• Jó: alt="Kovács és Társa Könyvelőiroda"

A WebAIM szerint a logó alt szövege általában egyszerűen a cég neve; maga a „logó” szó ritkán tesz hozzá bármit. A „link ide” és „kattints ide” szintén mehet a kukába, mert a felolvasó a linket enélkül is linknek jelzi. Egy dologra viszont figyelj: ha a kép egy link egyetlen tartalma, az üres alt sosem jó megoldás. Akkor ugyanis a linknek nem marad neve.

A funkciót jelző ikonokkal ugyanez a helyzet. A keresést indító nagyító alt szövege nem „nagyító”, hanem „Keresés”.

Webshopban a különbséget írd le, ne a kategóriát

Egy webshopban az alt szöveg keményen dolgozik, hiszen a vásárló a képek alapján dönt. Ha a terméknév ott van a kép alatt, az alt ne mondja el még egyszer szóról szóra – a WebAIM a fölösleges ismétlést kifejezetten kerülendőnek tartja. Inkább azt írd bele, amit a kép mutat, a szöveg viszont nem.

Nézzünk egy cipő galériáját:

• Rossz (mind az öt képen ez áll): alt="Férfi bőrcipő"
• Jó: alt="Barna bőr oxford cipő oldalról, látható a varrott rámás talp"
• Jó: alt="Ugyanaz a cipő felülről, ötlyukas, zárt fűzéssel"
• Jó: alt="A cipő talpa: gumi sarokbetét, bőr talprész"

Így a felolvasót használó vásárló végiglapozhatja a galériát, és minden képtől kap valami újat. A kereső pedig öt konkrét leírást lát, nem egyet ötször. Ha a szín vagy a minta a lényeg, mondd ki bátran: „sötétkék alapon fehér pöttyös”. Ami viszont nem kell bele: ár, akció, „ingyenes szállítás”. Ezek nem látszanak a képen.

És milyen hosszú legyen? A WebAIM szerint általában pár szó elég, ritkán egy-két rövid mondat. Ha egy termékfotó leírása bekezdésnyire hízik, gyanús, hogy a termékleírás egy darabja csúszott bele.

Mit kezdj az árlistával, ami csak egy kép?

A legtöbb fejfájást az összetett képek okozzák. Ismerős a „2026-os árlistánk” feliratú, táblázatot ábrázoló kép? Az összes ár nem fér bele az alt szövegbe, és nem is kell beleférnie. A W3C összetett képekről szóló oldala két részre bontja a feladatot:

• egy rövid alt, ami azonosítja a képet, és ha kell, megmondja, hol találod a részleteket;
• egy hosszú leírás minden lényeges információval, lehetőleg úgy, hogy minden látogató lássa.

A gyakorlatban: alt="Szolgáltatási árak 2026-ban, részletesen a kép alatti táblázatban", és a kép alatt ott van ugyanez rendes HTML-táblázatként. A W3C azt is javasolja, hogy a képet és a leírást egy <figure> elembe tedd, a leírást pedig <figcaption>-be – ez a kép és a hozzá tartozó felirat összetartozását jelző HTML-keret.

Diagramnál ugyanígy gondolkodj. Egy oszlopdiagram altja lehet „A webshop havi látogatószáma 2026 első negyedévében”, alatta pedig két mondatban a lényeg: melyik hónap ment a legjobban, és mekkora volt a változás.

A Google a kép körül is szaglászik

Az alt szöveg nem magányos harcos. A Google képes útmutatója szerint a kereső az oldal más részeiből is kikövetkezteti, mi van a képen – például a képaláírásból és a kép címéből. Ezért érdemes a képet a hozzá tartozó szöveg közelébe, témába illő oldalra tenni.

A fájlnév is számít. Az útmutató példája szerint a my-new-black-kitten.jpg jobb, mint az IMG00023.JPG, és ha teheted, kerüld az image1.jpg-féle semmitmondó neveket. Magyar oldalon én az ékezet nélküli, kötőjeles változatra szavaznék: barna-bor-oxford-cipo-oldalrol.jpg. Ha már a képeknél tartasz, a betöltési sebességet se felejtsd el – erről a Core Web Vitals mutatóiról szóló cikkünkben írtunk bővebben.

Egy apró csapda a képaláírásoknál: ha a <figcaption> és az alt szó szerint ugyanazt mondja, a felolvasó kétszer mondja el. A WebAIM is azt írja, hogy az alt ne ismételje a kép közelében már szereplő szöveget. A kettő inkább egészítse ki egymást.

WordPressben az alt szöveget a médiatárban és a képblokk beállításainál is megadhatod, csakhogy a kettő nem ugyanaz. Egy WordPress-fejlesztő a hibakövető egyik jegyében úgy fogalmazott, hogy a képblokk alt mezője „helyi”: ugyanaz a kép más-más bejegyzésben más alt szöveget kaphat, a médiatárban átírt érték pedig csak a kép következő beillesztésekor lesz az alapértelmezés. Ha régi cikkeket javítasz, a bejegyzésen belül, a képblokknál kell átírnod.

Kötelező is, vagy csak illik?

Itthon 2025. június 28-án lépett hatályba a 2022. évi XVII. törvény a termékek és szolgáltatások akadálymentességi követelményeiről. Ez az uniós akadálymentességi irányelv (European Accessibility Act) magyar változata. Többek között a fogyasztóknak nyújtott e-kereskedelmi szolgáltatásokra is kiterjed, vagyis a webshopokra és a fogyasztói szerződéskötésre szolgáló weboldalakra, mobilalkalmazásokra.

Két részlet érdekes lehet egy kisvállalkozásnak. A szolgáltatást nyújtó mikrovállalkozásoknak nem kell megfelelniük a szolgáltatásokra vonatkozó követelményeknek. (A törvény szerint ez 10 főnél kevesebb foglalkoztatottat jelent, és legfeljebb 2 millió eurónak megfelelő forint éves nettó árbevételt vagy mérlegfőösszeget.) A korábban megkötött, a követelményeknek nem megfelelő szolgáltatási szerződések pedig lejáratukig, de legfeljebb 2030. június 28-ig változatlanul maradhatnak. Hogy pontosan hova tartozol, az jogi kérdés – ezt egy szakemberrel érdemes tisztázni.

A mentesség viszont nem ok arra, hogy a képeid néma fájlnevek maradjanak. A Google a jó alt szöveget kötelezettség nélkül is értékeli, és egy látássérült vásárló pénze egy kis webshopban is pont annyit ér, mint bárki másé.

Egy délutánnyi házi feladat

Nyisd meg a főoldaladat és a három legforgalmasabb aloldalt, és minden képnél tedd fel a W3C-fa első kérdéseit: van rajta szöveg? Link? Hozzátesz valamit? A díszek kapjanak üres altot, a logó a cég nevét, a termékfotók egymástól eltérő, konkrét leírást, az árlista-kép mellé pedig kerüljön oda rendes táblázat is.

Aztán jön a legtanulságosabb rész. Kapcsold be a telefonod képernyőolvasóját (iPhone-on VoiceOver, androidos telefonon TalkBack), csukd be a szemed, és hallgasd végig az oldalt. Ami ott idegesít, azt hallja minden olyan látogatód is, aki nem tud egyszerűen csak ránézni.

Kép: StartupStockPhotos / Pixabay