1. Was ist das Ziel dieses Kriteriums?
Formulare sind das Herzstück des modernen Webs – vom Newsletter-Anmeldung über Online-Banking bis zum Kontaktformular. Aber was, wenn du vor einem Eingabefeld stehst und nicht weißt, was erwartet wird? Menschen mit kognitiven Einschränkungen, Lernschwierigkeiten oder auch einfach Nutzer in stressigen Situationen sind dann schnell überfordert.
Das Ziel von Erfolgskriterium 3.3.2 der WCAG ist klar: Jedes Eingabefeld braucht eine verständliche Beschriftung oder Anweisung. Nutzer sollen sofort wissen, welche Informationen erwartet werden – bevor sie mit der Eingabe beginnen und bevor Fehler passieren.
2. Was fordert das Erfolgskriterium genau?
Ganz konkret geht es um alle Bereiche einer Website, wo Nutzereingaben erforderlich sind. Das bedeutet:
Jedes Eingabefeld muss beschriftet oder erklärt werden: Textfelder, Dropdown-Menüs, Checkboxen, Radiobuttons – alles braucht eine klare Kennzeichnung, die erklärt, was eingegeben werden soll.
Spezielle Formate müssen erläutert werden: Wenn ein Datum im Format DD.MM.YYYY erwartet wird oder eine Telefonnummer mit Ländervorwahl – das muss vorab kommuniziert werden.
Pflichtfelder müssen erkennbar sein: Nutzer müssen wissen, welche Felder sie ausfüllen müssen und welche optional sind.
Auswahlmöglichkeiten brauchen verständliche Beschriftungen: Bei Radiobuttons oder Checkboxen muss klar sein, wofür jede Option steht.
Wichtig: Es geht hier nicht um die technische Verknüpfung von Labels mit Feldern (das regelt 1.3.1) oder um programmatische Namen für Screenreader (das ist 4.1.2) – sondern darum, dass alle Nutzer die benötigten Informationen sichtbar bekommen.
3. Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du füllst ein Formular aus, aber bei jedem Feld musst du raten, was gemeint ist. Das ist frustrierend für alle – aber für Menschen mit Einschränkungen kann es unmöglich werden.
Klare Labels und Anweisungen schaffen Barrierefreiheit, weil sie:
- Menschen mit kognitiven oder Lernschwierigkeiten helfen, Formulare erfolgreich auszufüllen
- Sprachbarrieren reduzieren durch eindeutige Beschreibungen und Beispiele
- Stress und Verwirrung minimieren, die zu Eingabefehlern führen
- Nutzer vor frustrierenden Fehlermeldungen bewahren
- Zeit sparen, weil weniger Korrekturen nötig sind
- Das Vertrauen in die Website stärken durch verständliche Kommunikation
Und nicht zuletzt: Sie verbessern die Nutzerfreundlichkeit für alle – auch für Menschen ohne Einschränkungen, die schnell und fehlerfrei durch Formulare navigieren möchten.
4. So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Gute Labels und Anweisungen sind meist eine Frage des Textes, nicht der Technik. Hier deine Roadmap für nutzerfreundliche Formulare:
Grundregeln für Labels:
- Verwende kurze, prägnante Beschriftungen, die sofort klar machen, was gefragt ist
- Platziere Labels direkt über oder neben dem zugehörigen Eingabefeld
- Vermeide Fachbegriffe – schreibe so, wie deine Nutzer sprechen
- Kennzeichne Pflichtfelder deutlich (z.B. mit Sternchen oder dem Wort "Pflichtfeld")
Anweisungen und Beispiele:
- Gib das erwartete Format vor: "Datum (TT.MM.JJJJ)" statt nur "Datum"
- Nutze Beispiele in Klammern: "Telefonnummer (+49 xxx xxxx)"
- Erkläre besondere Anforderungen: "Passwort (mindestens 8 Zeichen, davon 1 Großbuchstabe)"
- Verwende Platzhaltertexte ergänzend, aber nie als Ersatz für Labels
Bewährte Praxis-Tipps:
- Gruppiere zusammengehörige Felder mit fieldset und legend (z.B. Adressdaten)
- Bei komplexeren Formularen: Erkläre den Prozess vorab in einem einleitenden Text
- Setze auf progressive Enthüllung: Zeige zusätzliche Felder erst, wenn sie relevant werden
- Teste deine Formulare mit echten Nutzern – idealerweise auch mit Menschen mit Einschränkungen
Tools und Techniken:
- HTML-Labels richtig verknüpfen mit for-Attribut oder indem das Input ins Label-Element eingeschlossen wird
- ARIA-Eigenschaften wie aria-describedby für ausführlichere Erklärungen
- Fieldset/Legend für gruppierte Eingaben wie Adresse oder Kontaktdaten
- Required-Attribut und visuelle Kennzeichnung für Pflichtfelder
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Auch bei Erfolgskriterium 3.3.2 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.
1. Conversion-Rate steigern
Schlechte Labels führen zu Abbrüchen. Nutzer, die nicht verstehen, was von ihnen erwartet wird, verlassen frustriert die Seite. Klare Anweisungen reduzieren Formular-Abbrüche und erhöhen die Erfolgsquote bei Anmeldungen, Bestellungen oder Kontaktanfragen erheblich.
2. Support-Aufwand reduzieren
Verwirrende Formulare erzeugen Supportanfragen. Wenn Nutzer nicht wissen, wie sie Felder ausfüllen sollen, wenden sie sich an deinen Kundenservice. Gute Labels und Anweisungen reduzieren solche Anfragen und entlasten dein Team.
3. Datenqualität verbessern
Klare Vorgaben führen zu besseren Daten. Wenn Nutzer von Anfang an wissen, welches Format erwartet wird, machen sie weniger Eingabefehler. Das bedeutet weniger fehlerhafte Datensätze, weniger Nachbearbeitung und verlässlichere Kundendaten für dein CRM.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
6. Das Erfolgskriterium im Wortlaut der W3
Success Criterion 3.3.2 Labels or Instructions (Level A)
Labels or instructions are provided when content requires user input.