# Képek alt szövege

> A teszt azt nézi, hogy minden img elemnek van-e alt attribútuma. Írd le röviden a kép tartalmát, a díszítő képeknek pedig adj üres alt="" értéket.

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 title="HTML"
<img src="kep.webp" alt="A kép rövid leírása">
```

Díszítő kép:

```html title="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:

   ```js title="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ó.