Az alt szöveg a HTML <img> elem alt attribútuma: egy rövid mondat arról, mit ábrázol a kép. Ezt olvassa fel a képernyőolvasó, és ez jelenik meg a kép helyén akkor is, ha a fájl nem töltődik be.
Hogyan működik
A böngésző a képet megjeleníti, az alt értékét viszont szövegként kezeli. Hibás vagy hiányzó fájlnál az alt szöveg marad a helyén. A segítő technológiák ugyanezt mondják ki a felhasználónak.
Az alt nem azonos a fájlnévvel és nem azonos a title attribútummal. A fájlnév technikai azonosító. A title csak egérrel, hover állapotban jelenik meg, érintőképernyőn gyakorlatilag soha.
Miért más ez a generatív keresőknek
A legtöbb crawler nem elemzi a kép pixeleit. Ami marad neki: az alt, a képaláírás és a környező bekezdés. A Google Képek részben erre épít. A nyelvi modellek pedig szövegként fűzik be a kép jelentését a kontextus-ablakba. Egy adatokkal teli diagram üres alt mellett számukra nem létezik.
Mikor számít igazán
- Termékfotóknál, ahol a kép hordozza a variánst: szín, méret, kivitel.
- Infografikáknál és diagramoknál, ahol az adat csak a képen szerepel.
- Képként kirakott szövegnél, például árlistánál vagy nyitvatartásnál.
- Lazy loading (lusta betöltés) mellett, mert a későn betöltő képek első körben csak alt szöveggel léteznek.
Röviden: az alt szöveg a kép egyetlen gépi olvasható jelentése.
Technikai példa
<!-- Rossz: nincs alt attribútum -->
<img src="/kep/ferfi-felcipo-barna.jpg">
<!-- Rossz: kulcsszólista -->
<img src="/kep/ferfi-felcipo-barna.jpg"
alt="cipő, férfi cipő, bőr cipő, olcsó cipő, cipő webshop">
<!-- Jó: leíró és rövid -->
<img src="/kep/ferfi-felcipo-barna.jpg"
alt="Barna bőr férfi félcipő oldalnézetből, varrott talppal"
width="800" height="800" loading="lazy">
<!-- Dekoratív elem: üres alt, a felolvasó átugorja -->
<img src="/kep/valaszto-vonal.svg" alt="" role="presentation">
A width és height megadása nem az alt miatt kell, hanem a elrendezés-elmozdulás ellen. Együtt érdemes javítani őket.
# Az alt nélküli img tagek kilistázása a szerver által küldött HTML-ből
curl -s https://pelda.hu | grep -o '<img[^>]*>' | grep -v 'alt='
Ez csak a nyers HTML-t nézi. Ha a képeket JavaScript rakja ki, a böngésző devtools Console-ja ad pontos képet.
Gyakori kérdések
Milyen hosszú legyen egy alt szöveg?
Jellemzően 5-15 szó, egy tagmondat elég. Írd le, mi látszik a képen, és mi a szerepe az oldalon. Ha hosszabb magyarázat kell, például egy diagramnál, azt tedd a kép alá szövegként vagy képaláírásba. Az alt maradjon rövid.
Kell alt szöveg a dekoratív képekhez is?
Igen, de üresen: alt="". Így a képernyőolvasó tudja, hogy átugorhatja. Ha teljesen elhagyod az attribútumot, sok felolvasó a fájlnevet mondja ki helyette. Ez rosszabb, mint a semmi.
Segít az alt szöveg a Google-ben való rangsorolásban?
A Google Képekben közvetlenül számít, a sima találati oldalon inkább közvetett a hatása. Nem kulcsszómező, hanem leírás. A
hatása önmagában alacsony, de a hiánya akadálymentességi hiba, és az már súlyosabb.
Generálhatom AI-jal az alt szövegeket?
Nagy képmennyiségnél ez jó kiindulás, több bővítmény és API kínálja. A generált szöveget viszont nézd át, mert a modell nem ismeri a termékvariánst és a kontextust. Egy „barna cipő fehér háttéren” leírás pontos, de nem mondja meg, melyik modellről van szó.
Mi a különbség az alt és a title attribútum között?
Az alt a kép szöveges alternatívája, a felolvasók és a keresők ezt használják. A title csak egérrel hover állapotban jelenik meg buborékként. Érintőképernyőn nem látszik, ezért soha ne rá bízd a fontos információt.
