Fehlendes Formular-Label: Fehler erklärt und behoben
Also called: Formularfeld ohne Beschriftung, Eingabefeld ohne Label, Fehlende Beschriftung
Definition
Ein fehlendes Formular-Label bedeutet, dass ein Eingabefeld, eine Checkbox, eine Auswahlliste oder ein Textbereich keine verknüpfte Beschriftung und keinen anderen zugänglichen Namen hat. Screenreader sagen nur den Feldtyp an.
Ein fehlendes Formular-Label gehört zu den häufigsten Fehlern in Barrierefreiheitsberichten: Ein Eingabefeld hat keine Beschriftung, die im Code mit ihm verknüpft ist. Prüftools melden das als „Formularelement ohne Label“ oder „Form element has no label“. Der Screenreader sagt dann nur „Eingabefeld, leer“ – und die Person muss raten, ob Name, E-Mail-Adresse oder Gutscheincode gemeint ist.
Was es bedeutet
Viele Formulare sehen beschriftet aus, sind es technisch aber nicht. Das Wort „E-Mail“ steht zwar direkt über dem Feld, ohne Verknüpfung über for und id ist es aber nur Text in der Nähe. Auch ein Platzhaltertext im Feld ersetzt keine Beschriftung: Er verschwindet beim Tippen und wird nicht zuverlässig als Name angesagt.
Der Scanner-Fehler gehört zu WCAG 4.1.2 Name, Rolle, Wert (Stufe A): Jedes Formularelement braucht einen Namen, den assistive Technologien auslesen können. Eng damit verbunden sind zwei weitere Kriterien der Stufe A in WCAG 2.2. 3.3.2 Beschriftungen oder Anweisungen verlangt Beschriftungen, wenn Eingaben nötig sind – und zwar sichtbar für alle, nicht nur für Screenreader. 1.3.1 Info und Beziehungen prüft, ob die sichtbare Beschriftung im Code tatsächlich mit ihrem Feld verbunden ist. Das W3C weist darauf hin, dass ein Feld eine dieser Regeln erfüllen und eine andere trotzdem verletzen kann.
| Situation | Zugänglicher Name? | Ergebnis |
|---|---|---|
<label for="email"> + id="email" |
Ja, aus dem Label | Besteht |
Feld innerhalb von <label> |
Ja, aus dem Label | Besteht |
Nur aria-label, kein sichtbarer Text |
Ja, aber unsichtbar | Besteht 4.1.2, verletzt 3.3.2 |
| Nur Platzhaltertext | Nicht zuverlässig | Fehlendes Formular-Label |
| Sichtbarer Text ohne Verknüpfung | Nein | Fehlendes Formular-Label |
Praxisbeispiele
<!-- Fehlendes Formular-Label: Text sichtbar, aber nicht verknüpft -->
<p>E-Mail</p>
<input type="email" placeholder="name@beispiel.at">
<!-- Behoben: Label über for/id verknüpft -->
<label for="email">E-Mail</label>
<input type="email" id="email" autocomplete="email">
<!-- Behoben: Suchfeld mit verstecktem Label und benanntem Button -->
<input type="search" aria-label="Shop durchsuchen">
<button>Suchen</button>Der Such-Button im letzten Beispiel hat Text. Ohne ihn entstünde direkt neben dem Feld ein leerer Button.
Jedem Feld ein sichtbares <label> geben und es über for/id verknüpfen. Bei geteilten Feldern (Tag, Monat, Jahr) jeden Teil beschriften, ebenso jeden Radio-Button und jede Checkbox. Zusammengehörige Optionen mit <fieldset> und <legend> gruppieren.
Platzhaltertext als einzige Beschriftung nutzen, ein Label neben das Feld setzen, ohne es zu verknüpfen, oder mehreren Feldern dieselbe id geben.
So beheben Sie ein fehlendes Formular-Label
Formulare aus Plugins und Formular-Baukästen sind eine häufige Fehlerquelle. Unter WordPress lohnt sich zuerst ein Blick auf Kontakt-, Newsletter- und Checkout-Formulare. Labels und Fehlermeldungen brauchen außerdem ausreichenden Farbkontrast.
Häufige Fragen
Was bedeutet „Formularelement hat kein Label“?
Ein Feld hat keinen zugänglichen Namen. Screenreader können den Feldtyp ansagen, aber nicht, was eingegeben werden soll.
Reicht ein Platzhaltertext als Beschriftung?
Nein. Der Platzhalter verschwindet beim Tippen und ist kein verlässlicher Name. Nutzen Sie ein sichtbares Label und den Platzhalter höchstens als zusätzlichen Hinweis.
Darf ich aria-label statt eines sichtbaren Labels verwenden?
Das Feld bekommt damit einen Namen und erfüllt 4.1.2. WCAG 3.3.2 verlangt aber Beschriftungen, die alle sehen können – ein sichtbares Label ist daher die sichere Wahl.
Wie finde ich Formularfelder ohne Beschriftung?
Prüfen Sie Ihre Startseite mit dem kostenlosen WCAG-Scanner. Er meldet fehlende Formular-Labels zusammen mit Fehlern wie einem leeren Link.
Kann allyWay fehlende Formular-Labels automatisch beheben?
Ja. allyWay findet Felder ohne Beschriftung und ergänzt Labels, die die KI aus Ihren Seiteninhalten schreibt – so lässt sich jedes Formular ausfüllen. Die automatischen Korrekturen setzt das allyWay-Skript um; Änderungen, die Besucher sehen, gehen erst nach Ihrer Freigabe live, und jede Korrektur wird protokolliert. Kostenlos starten und Ihre Formulare für Screenreader-Nutzer bedienbar machen.
Related terms
Leerer Button: Fehler verstehen und beheben
Ein leerer Button ist eine Schaltfläche ohne zugänglichen Namen – ohne Text, ohne aria-label und ohne Alternativtext im enthaltenen Bild. Screenreader sagen nur „Schalter“ an, nicht aber, was er bewirkt.
Read definition: Leerer Button: Fehler verstehen und behebenLeerer Link: Fehler verstehen und beheben
Ein leerer Link ist ein Link ohne zugänglichen Namen – ohne Text, ohne Alternativtext im enthaltenen Bild und ohne aria-label. Screenreader können nur ansagen, dass es ein Link ist, aber nicht, wohin er führt.
Read definition: Leerer Link: Fehler verstehen und behebenFarbkontrast: WCAG-Kontrastverhältnis einfach erklärt
Farbkontrast ist der Helligkeitsunterschied zwischen Text oder Bedienelementen und ihrem Hintergrund, angegeben als Verhältnis von 1:1 bis 21:1. Die WCAG verlangen mindestens 4,5:1 für normalen und 3:1 für großen Text.
Read definition: Farbkontrast: WCAG-Kontrastverhältnis einfach erklärt