A <label> egy hozzáférhető nevet és nagyobb kattintási célt biztosít az űrlap-vezérlőhöz. Két módja van az asszociálásnak, és ezt megtenni nélkülözhetetlen az akadálymentességhez.
for + id (explicit)Email address
A címke for értéke megfelel a bemeneti mező id értékének. Ez akkor is működik, ha nincsenek szomszédosak a jelölésben.
<label>
Email address
<input type="email" />
</label>
A bemeneti mező a címkén belül van beágyazva — nem szükséges id.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
A placeholder eltűnik, amikor a felhasználó gépel, és nem jelenik meg megbízhatóan — soha ne használja egyedüli címkeként.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Az aria-label (vagy aria-labelledby) csak akkor használja, ha a látható címke valóban nem lehetséges.
A megfelelően asszociált címkék az egyik leghatásosabb akadálymentesítési gyakorlat az űrlapokhoz — nevet adnak minden vezérlőnek a támogató technológia számára, és nagyobbá teszik a kattintási célt mindenki számára.
Előnyben részesítse a valódi <label> használatát; csak szükség esetén térjen vissza az aria-label használatára, és soha ne függjön a placeholder címkeként való használatától.