Was ist Barrierefreiheit von Formularen?
Barrierefreiheit von Formularen bedeutet, Eingabefelder, Beschriftungen, Anweisungen und Fehlermeldungen so zu gestalten und zu kodieren, dass die Formulare von allen genutzt werden können, auch von Personen, die auf Bildschirmlesegeräte, Tastaturnavigation oder andere unterstützende Technologien angewiesen sind.
Beispiel: Ein gut zugängliches Kontaktformular enthält klar beschriftete Felder wie:
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required />
Außerdem werden hilfreiche Anweisungen gegeben und Fehlermeldungen klar beschrieben, nicht nur mit roten Umrissen oder Symbolen, sondern mit Text wie: "Bitte geben Sie eine gültige E-Mail-Adresse ein."
Warum Barrierefreiheit von Formularen wichtig ist
Formulare sind allgegenwärtig: Kontakt formulare, Anmeldungen, Checkouts, Feedback. Wenn Benutzer ein Formular nicht ausfüllen können, können sie ihre Aufgabe nicht erfüllen. Barrierefreiheit ist hier gleichbedeutend mit Ausgrenzung.
Gesetze wie:
- WCAG (Barrierefreiheit srichtlinien für Webinhalte)
- ADA (Amerikanisches Gesetz für Menschen mit Behinderungen)
- BFSG (deutsches Barrierefreiheitsstärkungsgesetz)
verlangen alle barrierefreie Formulare für die Einhaltung der Barrierefreiheit
Barrierefreie Formulare tragen zur Barrierefreiheit im Internet bei, unterstützen die digitale Integration und sind der Schlüssel zu einem positiven Nutzererlebnis.
WCAG-Empfehlungen für barrierefreie Formulare
Zu den wichtigsten Richtlinien der WCAG 2.1 für die Barrierefreiheit von Formularen gehören:
- ✅Kennzeichnung (1.3.1): Jede Eingabe muss mit einem sichtbare und programmatisch zugeordnete Beschriftung.
- ✅Anweisungen (3.3.2): Geben Sie klare Anweisungen, bevor die Benutzer mit den Eingaben interagieren.
- ✅Fehleridentifizierung (3.3.1): Lassen Sie die Benutzer wissen, was falsch gelaufen ist (z. B. fehlendes Feld oder ungültige Eingabe).
- ✅Vorschläge zur Korrektur (3.3.3): Teilen Sie den Benutzern mit, wie sie Fehler beheben können.
- ✅Fokus Reihenfolge (2.4.3): Sorgen Sie für logisches Tabbing durch Formularfelder.
Tipps für TYPO3, WordPress und Webplattformen
Tipps zur TYPO3-Implementierung:
- Verwenden Sie eingebauteFormularelemente mit verständlichen Bezeichnungen und Fehlerbehandlung.
- Passen Sie Vorlagen mit geeigneten <label>- und aria-describedby-Attributen an.
- Fügen Sie klare Feldanweisungen mit Hilfe von Hilfetext oder Platzhaltertext hinzu (verlassen Sie sich nicht nur auf Platzhalter).
WordPress-Tipps:
- Wählen SieFormular-Plugins mit eingebauter Barrierefreiheit, z. B. Gravity Forms oder WPForms mit Einstellungen für Barrierefreiheit.
- Vermeiden Sie rein visuelle Hinweise (wie rote Umrandungen); bieten Sietextuelles Feedback.
- Testen Sie Ihre Formulare nur mit einer Tastatur und einem Bildschirmleseprogramm wie NVDA oder VoiceOver.
Universelle Best Practices:
- Verwenden Sie Feldsätze und Legenden für gruppierte Formulareingaben (z. B. Optionsfelder).
- Validieren Sie Eingaben sowohl client- als auch serverseitig, und stellen Sie sicherzugängliches Feedback zurückgegeben wird.
- Verlassen Sie sich nicht allein auf die Farbe, um erforderliche Felder anzuzeigen, sondern verwenden Sie * und unterstützenden Text.
Häufige Fehler und wie man sie behebt
❌ Keine Beschriftung der Formularfelder ✔️ Fügen Sie ein <label for="input-id">Feldname</label> für jede Eingabe hinzu.
❌ Platzhalter werden als Beschriftungen verwendet ✔️ Verwenden Sie Platzhalter als Beispiele, nicht als primäre Beschriftungen, sie verschwinden, sobald die Eingabe beginnt.
❌ Keine Fokus-Stile oder Tastatur-Traps ✔️ Stellen Sie sicher, dass jedes Feld mit der Tastatur erreichbar und bedienbar ist. Fangen Sie niemals den Fokus ab.
❌ Unklare Fehlermeldungen ✔️ Sagen Sie nicht einfach "Ungültige Eingabe". Seien Sie konkret: "Die Telefonnummer muss 10 Ziffern haben."
Erkunden Sie verwandte Glossareinträge: Tastaturnavigation, Fokusindikator, WCAG, ARIA, kognitive Behinderungen
Wichtigste Erkenntnis
Formulare müssen von allen Menschen genutzt werden können, unabhängig von ihren Fähigkeiten. Durch barrierefreies Formular design stellen Sie sicher, dass sich die Benutzer ohne Barrieren registrieren, anmelden, übermitteln und erfolgreich sein können.
Möchten Sie die Barrierefreiheit Ihres Formulars testen?
Lassen Sie Ihr Formular durch den T3AA Accessibility Analyzer laufen oder nutzen Sie unsere Checkliste für barrierefreie Formulare für CMS-Benutzer Jedes Feld zählt, erstellen Sie Formulare, die jeden willkommen heißen.