Et <label>-element giver et formularfelt et tilgængeligt navn og et større klikbereich. Der er to måder at forbinde dem på, og at gøre dette er væsentligt for tilgængelighed.
for + id (eksplicit)Email address
Labelets for stemmer overens med inputets id. Dette virker selv hvis de ikke er tilstødende i markup'en.
<label>
Email address
<input type="email" />
</label>
Inputtet er indlejret inde i labelen — intet id er nødvendigt.
<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 -->
En placeholder forsvinder når brugeren skriver og er ikke pålideligt annonceret — brug den aldrig som det eneste label.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Brug aria-label (eller aria-labelledby) kun når et synligt label ikke er muligt.
Korrekt forbundne labels er en af de vigtigste tilgængelighedspraktikker for formularer — de giver hver kontrol et navn for hjælpeteknologi og forstørrer klikbereich for alle.
Fortrinsbehandle et rigtigt <label>; fald tilbage til aria-label kun når det er nødvendigt, og stol aldrig på placeholder som et label.