# Formular-Beschriftungen: Labels und Hinweise

Source: https://allyway.ai/de/glossary/formular-beschriftungen

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](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html) (Stufe A, [WCAG 2.2](https://allyway.ai/de/regulations/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](https://allyway.ai/de/glossary/zugaenglicher-name) |
| 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 |

> **Warning:** > **Ein Platzhalter ist keine Beschriftung**
> Platzhaltertext verschwindet beim Tippen, hat oft zu wenig Kontrast und wird nicht von jedem Screenreader zuverlässig angesagt. Nutzen Sie ihn höchstens für ein Beispiel, nie als einzige 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](https://allyway.ai/de/glossary/fehlendes-formular-label).

## Praxisbeispiele

```html title="Beispiel"
<!-- 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">
```

**Do:** Do

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.

**Don't:** Don't

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

Q: Kann ein Platzhalter eine Formular-Beschriftung ersetzen?
A: 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.

Q: Erfüllen versteckte Labels die WCAG?
A: 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.

Q: Wie kennzeichne ich Pflichtfelder barrierefrei?
A: 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.

Q: Wo sollten Formular-Beschriftungen stehen?
A: 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.

Q: Kann allyWay fehlende Formular-Beschriftungen automatisch beheben?
A: 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](https://allyway.ai/de/automatic-accessibility-fixes-for-website) setzt das allyWay-Skript um; Änderungen, die Besucher sehen, gehen erst nach Ihrer Freigabe live, und jede Korrektur wird protokolliert. [Kostenlos starten](https://app.allyway.ai/register) und Ihre Formulare für Screenreader-Nutzer bedienbar machen.