Űrlapcímkék

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

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

Beágyazott változat:

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ő.