Jedes Formularelement muss ein Label haben

Casandra Visser

Autor

Yotam Flohr

Forscher

Ritvik Shrivastava

Experte

Juli 29, 2024

Betroffene Behinderungen: Blind Sehbehindert Hören Mobilität

Standards: WCAG 2.2 Level A

Laut Webzugänglichkeitsstandards muss jedes Formularelement ein programmatisch verknüpftes label-Element haben.

Warum es wichtig ist

Formularlabels sind entscheidend für die Zugänglichkeit von Formularen. Screenreader-Benutzer benötigen Formularlabels, um Felder korrekt zu identifizieren.

Ohne Labels wissen Nutzer nicht, welche Daten sie eingeben müssen.

Ohne Labels können Felder beim Vorlesen durch Screenreader nicht fokussiert werden. hne Label haben Nutzer mit eingeschränkter Motorik keinen erweiterten Klickbereich, da ein Label das zugehörige Steuerelement aktivieren kann.

Behebung des Problems

Labels müssen programmatisch mit allen Formularsteuerelementen verknüpft werden. Die beste Methode ist die Verknüpfung eines label-Elements mit einem Feld über die for– und id-Attribute.

Alle id-Werte müssen eindeutig sein, und der Label-Text muss für Screenreader-Nutzer sinnvoll sein.

Formularelemente, die ein Label benötigen:

Texteingabefelder, z. B. <input type=”text”>, <input type=”password”> und <textarea>
Radiobuttons, <input type=”radio”>
Checkboxen, <input type=”checkbox”>

Die einzigen Ausnahmen für diese Anforderung sind:

Schaltflächen – sind selbsterklärend
Versteckte Eingaben (<input type=”hidden”>) – nicht für Benutzer sichtbar

Gutes Code-Beispiel

Codebeispiel

<label for="firstname">Vorname:</label>
<input type="text" id="firstname">

Kopieren

Das Label kann auch implizit sein, indem das <label>-Element um die Eingabe gewickelt wird:

Codebeispiel

<label>Vorname:
<input type="text">
</label>

Kopieren

Wenn die Eingabe bereits visuell auf andere Weise gekennzeichnet ist, z. B. durch ein Lupensymbol auf einer Suchschaltfläche, kann es akzeptabel sein, aria-label zu verwenden, um ein unsichtbares Textlabel für Screenreader bereitzustellen.

Codebeispiel

<input type="text" aria-label="Suche"> Kopieren

Eine alternative Methode (manchmal verwendet, wenn das Hinzufügen eines <label>-Tags die Funktionalität oder das Design beeinträchtigen würde oder wenn mehrere Labels auf dieselbe Eingabe angewendet werden), besteht darin, stattdessen aria-labelledby zu verwenden:

Codebeispiel

<div id="firstname">Vorname:</div> <input type="text" aria-labelledby="firstname">
<!--Visuelle Beschriftungen können sich an anderer Stelle im Inhalt befinden, z. B. in Tabellenüberschriften--><div id="temperature">Temperatur:</div><div id="high">Hoch:</div><div id="low">Niedrig:</div><!-- Die Eingaben--><input type="text" aria-labelledby="temperature low"><input type="text" aria-labelledby="temperature high">

Kopieren

Schließlich kann ein Platzhalterattribut verwendet werden, um Texteingaben einen zugänglichen Namen zu geben. Dies ist keine empfohlene Lösung, da die visuelle Beschriftung (der Platzhaltertext) entfernt wird, sobald der Benutzer Text in die Eingabe eingibt, sodass er nicht weiß, wofür die Eingabe dient.

Codebeispiel

<input type="text" placeholder="Suche"> Kopieren

Beispiel für fehlerhaften Code

Codebeispiel

Vorname: <input type="text" name="fname"> Kopieren

Testfälle

Weitere Beispiele finden Sie in der ATC-Regelbibliothek von W3C auf GitHub.