# Űrlapcímkék

> A teszt azt nézi, hogy minden beviteli mezőnek van-e címkéje. Kösd a mezőt egy label for elemhez; a placeholder nem helyettesíti a látható címkét.

Az űrlapmezőnek kell egy neve, ami megmondja, mit kell beírni. A képernyőolvasó ezt a nevet mondja be a mezőnél, a látó felhasználó pedig a látható címkén keresztül tudja meg. A kattintható `<label>` ráadásul megnöveli a találati felületet: a címkére kattintva a mező is fókuszba kerül, ami érintőképernyőn sokat segít. A WCAG 2.2 szerint a mezőknek legyen címkéjük vagy útmutatásuk (3.3.2 Labels or Instructions, A szint), és a vezérlőknek legyen programozottan kiolvasható nevük (4.1.2 Name, Role, Value, A szint).

## Hogyan mérjük

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

A szabály az `<input>` és `<textarea>` elemeket vizsgálja. Nem vizsgálja azokat az `<input>` elemeket, amelyek típusa `hidden`, `image`, `button`, `submit` vagy `reset`.

- **Megfelelő:** minden vizsgált mezőnek van neve. Elfogadott: `<label for>` vagy a mezőt körülvevő `<label>`, `aria-label`, `aria-labelledby`, nem üres `title`, nem üres `placeholder`, vagy `role="presentation"` / `role="none"`.
- **Hiba:** van mező, amelyiknek egyik sem van meg, vagy a címkéje el van rejtve a hozzáférhetőségi fából.
- **Nem értékelhető:** az oldalon nincs vizsgálandó mező.

Figyelmeztető szint nincs.

**Eltérés a riport saját szövegétől és a bevált gyakorlattól:** a mérés elfogadja a nem üres `placeholder` attribútumot is címkeként, vagyis a csak placeholderrel rendelkező mező is megfelel. A riport javító kártyája ugyanakkor azt írja, hogy a placeholder nem helyettesíti a címkét, és ez a helyes gyakorlat: a placeholder begépeléskor eltűnik, ezért a kitöltő nem látja, mit kellett volna beírnia. Ha a riport nem jelez hibát, de a mezőidnek csak placeholder van, tegyél mellé látható `<label>`-t.

A `<select>` elemet ez a mérés nem vizsgálja.

## Hogyan javítsd

Minden mezőhöz tegyél látható `<label>` elemet, és kösd hozzá a mezőt. Két módszer van: a `for` és az `id` párosítása, vagy a mező beágyazása a `<label>` belsejébe. Az `id` egyedi legyen az oldalon.

### HTML

```html title="HTML"
<label for="email-mezo">E-mail-cím</label>
<input id="email-mezo" name="email" type="email" autocomplete="email">
```

Beágyazott változat:

```html title="HTML (beágyazott címke)"
<label>E-mail-cím
  <input name="email" type="email" autocomplete="email">
</label>
```

Ha a címke vizuálisan nem fér el (például egy keresőmezőnél, ahol a gomb magyarázza a mezőt), akkor is legyen név, például `aria-label="Keresés"`; ez azonban csak kivétel, a látható címke az alapeset.

### WordPress

- Űrlap-bővítményeknél (kapcsolatfelvételi űrlap, hozzászólás-mező, keresőmező) a mező beállításai között keresd a „Címke” vagy „Label” mezőt, és ne csak a helyőrző szöveget töltsd ki.
- A téma saját űrlapjainál (kereső, hozzászólás, bejelentkezés) a sablonfájlban kell a `<label>`-t megadni. Gyermektémában módosítsd.

## Hogyan ellenőrizd

1. A riportban futtasd újra a mérést.
2. Kattints az űrlap címkéjére: ha a mező fókuszba kerül, a címke össze van kötve vele.
3. A Chrome Lighthouse paneljén (Accessibility kategória) a „Form elements do not have associated labels” audit külön is megnézhető.