Ein <label> gibt einem Formularelement einen zugänglichen Namen und ein größeres Klickziel. Es gibt zwei Möglichkeiten, diese zu verbinden, und dies zu tun ist für die Barrierefreiheit wesentlich.
for + id (explizit)Email address
Das for des Labels stimmt mit der id der Eingabe überein. Dies funktioniert auch wenn sie im Markup nicht nebeneinander angeordnet sind.
<label>
Email address
<input type="email" />
</label>
Die Eingabe ist verschachtelt innerhalb des Labels — keine id erforderlich.
<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 -->
Ein placeholder verschwindet, wenn der Benutzer tippt, und wird nicht zuverlässig angesagt — verwende ihn niemals als einziges Label.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Verwende aria-label (oder aria-labelledby) nur wenn ein sichtbares Label wirklich nicht möglich ist.
Richtig verbundene Labels sind eine der wirkungsvollsten Barrierefreiheitspraktiken für Formulare — sie geben jedem Steuerelement einen Namen für Hilfstechnologien und vergrößern Klickziele für alle.
Bevorzuge ein echtes <label>; falls zurück auf aria-label nur wenn notwendig und verlasse dich niemals auf placeholder als Label.