Képek alt szövege

Aki nem látja a képet, az alt szövegből tudja meg, mi van rajta: a képernyőolvasó ezt olvassa fel. Ha a kép nem tölt be, a böngésző is ezt jeleníti meg. A WCAG 2.2 1.1.1-es sikerességi feltétele (Non-text Content, A szint) minden nem szöveges tartalomhoz szöveges alternatívát kér.

Hogyan mérjük

A riport egy valódi böngészőben betölti az oldalt, és lefuttatja a Lighthouse image-alt auditját (az axe-core szabálya, a riport Lighthouse 13.6 és axe-core 4.14 változattal dolgozik).

• Megfelelő: minden <img> elemnek van elfogadható szöveges alternatívája. Elfogadott: bármilyen alt attribútum (az üres alt="" is, ez jelzi, hogy a kép díszítő), aria-label, aria-labelledby, nem üres title, vagy role="presentation" / role="none".
• Hiba: van <img>, amelyiken ezek egyike sincs, vagy az alt értéke csak egy szóköz.
• Nem értékelhető: az oldalon nincs <img> elem.

Figyelmeztető szint nincs. A mérés két dolgot nem vizsgál: nem tudja megítélni, hogy az alt szöveg jó-e (egy alt="kép" is megfelel), és csak az <img> elemekkel foglalkozik, a CSS-ből betöltött háttérképekkel, az SVG-kkel és a <input type="image"> elemekkel nem.

Hogyan javítsd

• Tartalmas kép (fotó, ábra, termékkép): az alt röviden írja le, amit a kép a szövegkörnyezetben közöl. Ne kezdd azzal, hogy „kép erről”; a képernyőolvasó maga is bemondja, hogy kép.
• Díszítő kép: adj üres alt="" értéket. Az attribútumot ilyenkor sem szabad kihagyni, mert az üres érték mondja meg a képernyőolvasónak, hogy ki lehet hagyni.
• Kép, ami link vagy gomb: az alt azt írja le, hová visz a link vagy mit csinál a gomb, nem azt, mi látszik a képen.

HTML

HTML

<img src="kep.webp" alt="A kép rövid leírása">

Díszítő kép:

HTML (díszítő kép)

<img src="dekor.webp" alt="">

WordPress

• A médiatárban a kép adatlapján töltsd ki az „Alternatív szöveg” mezőt; a szerkesztőben a kép blokk beállításai között is megadható. A WordPress ezt írja az alt attribútumba.
• Díszítő képnél a mezőt hagyd üresen, majd az oldal forrásában (lásd lent) ellenőrizd, hogy a kép alt="" értékkel jelenik-e meg; ha az alt attribútum teljesen hiányzik, a sablonban pótold.
• Ha a téma vagy egy bővítmény sablonja írja ki a képet, a sablonban kell az alt attribútumot megadni. Gyermektémában módosítsd.

Hogyan ellenőrizd

1. A riportban futtasd újra a mérést.

2. Böngészőben a fejlesztői eszközök Konzoljában (F12) listázhatod az alt nélküli képeket:

   Konzol

   [...document.querySelectorAll('img:not([alt])')].map((i) => i.src)

   Az eredmény legyen üres lista.

3. A Chrome Lighthouse paneljén (Accessibility kategória) ugyanez az audit külön is lefuttatható.