Formular-Beschriftungen: Labels und Hinweise
Also called: Feldbeschriftungen, Formular-Labels, Beschriftungen oder Anweisungen
Definition
Formular-Beschriftungen sind die sichtbaren Texte, die benennen, was ein Feld erwartet, etwa „E-Mail-Adresse“. WCAG 3.3.2 verlangt Beschriftungen oder Anweisungen überall dort, wo Eingaben erwartet werden – inklusive Formaten und Pflichtfeldern.
Formular-Beschriftungen sind die kurzen Texte an einem Feld, die sagen, was hineingehört: „Vorname“, „E-Mail-Adresse“, „Geburtsdatum (TT.MM.JJJJ)“. Sie entscheiden darüber, ob ein Formular beim ersten Versuch klappt oder nach dem dritten Fehler abgebrochen wird. Gute Beschriftungen sind für alle sichtbar und im Code mit ihrem Feld verknüpft, damit auch Screenreader sie ansagen.
Was es bedeutet
WCAG 3.3.2 Beschriftungen oder Anweisungen (Stufe A, WCAG 2.2) verlangt Beschriftungen oder Anweisungen, wenn Inhalte eine Eingabe erfordern. Das W3C versteht „erfordern“ als „annehmen oder erwarten“ – die Regel gilt also für jedes Feld, nicht nur für Pflichtfelder. Anweisungen sollen auch ungewöhnliche Formate und Pflichtangaben erklären.
Auch jede Option einer Gruppe braucht eine Beschriftung: jeder Radiobutton, jede Checkbox. Gleichzeitig warnt das W3C vor dem Gegenteil – so viel Text, dass das Formular unübersichtlich wird.
| Situation | Bewertung |
|---|---|
Sichtbares <label>, per for/id verknüpft (H44) |
Erfüllt 3.3.2 und gibt dem Feld seinen zugänglichen Namen |
| Datumsfeld mit „TT.MM.JJJJ“ daneben (G89) | Erfüllt – das Format ist erklärt |
Radiogruppe mit <fieldset> und <legend> (H71) |
Erfüllt – Frage und jede Option sind beschriftet |
Name nur im aria-label, nichts sichtbar |
Kann 4.1.2 erfüllen, laut W3C aber trotzdem gegen 3.3.2 verstoßen |
| Drei Telefonnummer-Felder ohne Text (F82) | Verstoß – Layout und Satzzeichen sind keine Beschriftung |
3.3.2 regelt, ob eine Beschriftung vorhanden und sichtbar ist. Ob sie im Code richtig verknüpft ist, betrifft 1.3.1 und 4.1.2 – das Thema fehlendes Formular-Label.
Praxisbeispiele
<!-- Gut: sichtbares Label, verknüpft, mit Formathinweis -->
<label for="geb">Geburtsdatum</label>
<input id="geb" name="geb" aria-describedby="geb-hinweis" required>
<p id="geb-hinweis">Format: TT.MM.JJJJ</p>
<!-- Gut: Gruppe von Optionen -->
<fieldset>
<legend>Versand</legend>
<input type="radio" id="std" name="versand"><label for="std">Standard (3–5 Tage)</label>
<input type="radio" id="exp" name="versand"><label for="exp">Express (1 Tag)</label>
</fieldset>
<!-- Schlecht: nur ein Platzhalter -->
<input type="email" placeholder="E-Mail">Setzen Sie über oder neben jedes Feld eine sichtbare Beschriftung und verknüpfen Sie sie mit for und id. Kennzeichnen Sie Pflichtfelder im Label („E-Mail (Pflichtfeld)“), erklären Sie Formate vor der Eingabe und fassen Sie zusammengehörige Optionen mit fieldset und legend zusammen.
Verlassen Sie sich nicht auf Platzhalter, Symbole oder Layout allein, blenden Sie Beschriftungen nicht für ein „cleaneres“ Design aus, schreiben Sie keine vagen Labels wie „Feld 1“ und stellen Sie lange Anweisungen nicht ans Formularende.
So prüfen Sie Formular-Beschriftungen
Häufige Fragen
Kann ein Platzhalter eine Formular-Beschriftung ersetzen?
Nein. Ein Platzhalter verschwindet, sobald jemand tippt – die Information fehlt also genau dann, wenn sie gebraucht wird. Behalten Sie ein sichtbares Label und nutzen Sie den Platzhalter höchstens für ein Beispiel.
Erfüllen versteckte Labels die WCAG?
Eine Beschriftung, die nur Screenreader erhalten, etwa per aria-label, kann einem Feld für 4.1.2 seinen zugänglichen Namen geben. Laut W3C kann sie trotzdem gegen 3.3.2 verstoßen, weil Sehende sie nicht sehen. Ein Suchfeld mit klar erkennbarem Such-Button ist ein üblicher, akzeptierter Fall.
Wie kennzeichne ich Pflichtfelder barrierefrei?
Sagen Sie es in Text, etwa „(Pflichtfeld)“ im Label oder als Erklärung am Formularanfang, und setzen Sie das Attribut required, damit Screenreader es ansagen. Ein Sternchen allein braucht diese Erklärung.
Wo sollten Formular-Beschriftungen stehen?
Die W3C-Technik G162 empfiehlt vorhersehbare Positionen: über oder links von Textfeldern, rechts von Checkboxen und Radiobuttons. So bleiben Beschriftung und Feld klar zusammen, auch bei starker Vergrößerung.
Kann allyWay fehlende Formular-Beschriftungen 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
Fehlendes Formular-Label: Fehler erklärt und behoben
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.
Read definition: Fehlendes Formular-Label: Fehler erklärt und behobenZugänglicher Name: Was er ist und woher er kommt
Der zugängliche Name ist der Text, den der Browser an assistive Technologien weitergibt, um ein Element zu benennen – etwa die Worte, die ein Screenreader für einen Button, Link oder ein Formularfeld ansagt. WCAG 4.1.2 verlangt für jedes Bedienelement einen programmatisch ermittelbaren Namen.
Read definition: Zugänglicher Name: Was er ist und woher er kommtaria-label: Elemente richtig benennen
aria-label ist ein ARIA-Attribut, das den zugänglichen Namen eines Elements als Text festlegt. Screenreader sagen diesen Namen statt des Elementinhalts an – deshalb wird es vor allem für Bedienelemente ohne sichtbaren Text verwendet, etwa Icon-Buttons.
Read definition: aria-label: Elemente richtig benennenARIA-Live-Regionen: Statusmeldungen ansagen
Eine ARIA-Live-Region ist ein Seitenbereich, der mit aria-live oder einer Live-Rolle wie status oder alert ausgezeichnet ist. Ändert sich sein Inhalt, sagt der Screenreader den neuen Text an, ohne dass der Fokus dorthin wandern muss.
Read definition: ARIA-Live-Regionen: Statusmeldungen ansagen