En <label> gir en skjemakontroll et tilgjengelig navn og et større klikkmål. Det er to måter å knytte dem sammen på, og det å gjøre det er essensielt for tilgjengelighet.
for + id (eksplisitt)Email address
Etikett for samsvarer med input id. Dette fungerer selv om de ikke er tilstøtende i oppmaringen.
<label>
Email address
<input type="email" />
</label>
Inputen er nestet inne i etiketten — ingen id nødvendig.
<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 forsvinner når brukeren skriver og blir ikke pålitelig kunngjort — bruk den aldri som eneste etikett.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Bruk aria-label (eller aria-labelledby) bare når en synlig etikett virkelig ikke er mulig.
Riktig tilknyttede etiketter er en av de mest påvirkende tilgjengelighetspraksisene for skjemaer — de gir hver kontroll et navn for hjelpeteknologi og forstørrer klikkmål for alle.
Foretrukk en ekte <label>; fall bare tilbake til aria-label når det er nødvendig, og stol aldri på placeholder som etikett.