Een <label> geeft een formuliercontrole een toegankelijke naam en een groter klikdoel. Er zijn twee manieren om ze te koppelen, en dit doen is essentieel voor toegankelijkheid.
for + id (expliciet)Email address
De for van het label komt overeen met de id van de input. Dit werkt zelfs als ze niet aangrenzend zijn in de opmaak.
<label>
Email address
<input type="email" />
</label>
De input is genest in het label — geen id nodig.
<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 -->
Een placeholder verdwijnt wanneer de gebruiker typt en wordt niet betrouwbaar aangekondigd — gebruik het nooit als enig label.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Gebruik aria-label (of aria-labelledby) alleen wanneer een zichtbaar label echt niet mogelijk is.
Correct gekoppelde labels zijn een van de meest impactvolle toegankelijkheidspraktijken voor formulieren — ze geven elk controle een naam voor ondersteunende technologie en vergroten klikdoelen voor iedereen.
Geef de voorkeur aan een echte <label>; val alleen terug op aria-label wanneer nodig, en vertrouw nooit op placeholder als label.