Online-Formulare sind ein fester Bestandteil moderner Websites – ob für Newsletter-Anmeldungen, Kontaktanfragen oder Bestellvorgänge. Doch gerade bei Pflichtfeldern gibt es eine Stolperfalle: Wenn du nicht deutlich machst, welche Angaben erforderlich sind, führt das zu Verwirrung und schlechter Nutzererfahrung. Besonders Menschen mit Behinderungen profitieren von einer klaren, barrierefreien Gestaltung deiner Formulare. Wir zeigen dir, worauf du achten solltest – und wie du Pflichtfelder so kennzeichnest, dass sie für alle verständlich und zugänglich sind.
Warum ist Barrierefreiheit bei Formularen wichtig?
Ganz klar: Du möchtest, dass deine Besucher*innen deine Formulare problemlos ausfüllen können. Eine deutliche Kennzeichnung von Pflichtfeldern hilft dabei, Fehler zu vermeiden und den Prozess zu beschleunigen. Aber für Menschen mit Behinderungen geht es um mehr als nur Bequemlichkeit:
- Screenreader-Nutzer*innen: Screenreader lesen die Beschriftungen der Formularfelder vor. Ohne eine explizite Kennzeichnung wissen Nutzer*innen nicht, welche Felder zwingend ausgefüllt werden müssen. Das führt zu Verwirrung und Frustration.
- Nutzer*innen mit kognitiven Einschränkungen: Eine klare visuelle und textliche Kennzeichnung hilft, die notwendigen Schritte im Formular zu verstehen.
- Tastaturnutzer*innen: Auch für Menschen, die nur mit der Tastatur navigieren, ist es wichtig zu wissen, welche Felder relevant sind, um das Formular erfolgreich abzuschicken.
Ab Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz viele Website-Betreibende in Deutschland dazu, ihre digitalen Angebote barrierefrei zu gestalten – darunter auch Formulare. Je früher du dich darum kümmerst, desto besser.
Weitere Rechtsprobleme vermeidest du mit unserem Ratgeber DSGVO-Regeln für Webdesigner und Entwickler.
Was genau sind Pflichtfelder?
Pflichtfelder sind Formularfelder, die zwingend ausgefüllt werden müssen, damit das Formular abgeschickt werden kann – etwa die E-Mail-Adresse beim Newsletter oder die Versandanschrift beim Onlinekauf. Werden diese Felder nicht oder falsch ausgefüllt, erscheint meist eine Fehlermeldung.
Doch nicht jede*r erkennt auf Anhieb, welche Felder Pflicht sind. Besonders Nutzer*innen von Screenreadern oder Menschen mit kognitiven Einschränkungen brauchen hier klare Hinweise.
Wie kennzeichnest du Pflichtfelder barrierefrei?
Es gibt ein paar bewährte Methoden, um Pflichtfelder in deinen Formularen zugänglich zu machen:
- Visuelle Kennzeichnung:
- Asterisk (*): Ein kleines Sternchen neben der Feldbezeichnung ist eine gängige Methode. Aber Achtung: Das Sternchen allein ist nicht barrierefrei genug!
- Farbe: Du kannst Pflichtfelder farblich hervorheben (z. B. mit einer anderen Hintergrundfarbe oder einer farbigen Umrandung). Aber auch hier gilt: Farbe allein ist nicht ausreichend, da farbenblinde Menschen diese Unterscheidung möglicherweise nicht wahrnehmen können.
- Textliche Kennzeichnung:
- Expliziter Hinweis: Füge direkt in der Nähe der Feldbezeichnung einen Text wie „(Pflichtfeld)“ oder „(erforderlich)“ hinzu. Das ist für Screenreader-Nutzer*innen eindeutig verständlich.
- ARIA-Attribut aria-required="true": Dieses Attribut signalisiert Screenreadern, dass das Feld ausgefüllt werden muss. Du fügst es dem <input>, <textarea> oder <select>-Element hinzu.
- Kombination ist Trumpf: Die beste Lösung ist, visuelle und textliche Kennzeichnungen zu kombinieren. Verwende beispielsweise ein Asterisk (*) und den Text „(Pflichtfeld)“ neben der Feldbezeichnung und ergänze das aria-required="true"-Attribut im HTML.
Extra-Tipp: Weniger ist mehr
Zu viele Pflichtfelder schrecken Besucher*innen ab. Frage wirklich nur die Informationen ab, die du unbedingt brauchst. So senkst du die Abbruchrate – und machst es auch aus barrierefreier Sicht einfacher. Überlege dir also gut: Muss die Telefonnummer wirklich ein Pflichtfeld sein?
Wusstest du, dass du mit dem Homepage-Baukasten von GoDaddy Zugriff auf barrierefreie Formulare hast, die du ganz einfach deinen Ansprüchen anpassen kannst.
Best Practices für barrierefreie Formulare
Neben der Kennzeichnung von Pflichtfeldern gibt es noch weitere Aspekte, die du für barrierefreie Formulare beachten solltest:
- Verwende <label>-Elemente: Verknüpfe jedes Formularfeld mit einem <label>-Element. Das verbessert die Klickfläche für Nutzer*innen und hilft Screenreadern, das Feld korrekt zuzuordnen. Nutze das for-Attribut im <label> und die id des zugehörigen Formularelements.
- Gib klare Anweisungen: Erkläre am Anfang des Formulars, wie Pflichtfelder gekennzeichnet sind (z. B. „* = Pflichtfeld“).
- Strukturiere dein Formular logisch: Verwende Überschriften und Fieldsets (<fieldset>) mit Legenden (<legend>), um zusammengehörige Felder zu gruppieren. Das erleichtert die Navigation und das Verständnis.
- Gib aussagekräftige Fehlermeldungen: Wenn Nutzer*innen ein Pflichtfeld vergessen haben, zeige eine klare und verständliche Fehlermeldung an, die idealerweise direkt beim betroffenen Feld platziert wird. Auch diese Fehlermeldungen sollten für Screenreader zugänglich sein (z. B. durch ARIA-Attribute wie aria-describedby).
- Teste deine Formulare mit Screenreadern: Der beste Weg, um sicherzustellen, dass deine Formulare barrierefrei sind, ist, sie selbst mit einem Screenreader zu testen (wie im Artikel „Barrierefreiheit testen: Screenreader-Kompatibilität sicherstellen“ beschrieben).
Ein Beispiel für barrierefreie Pflichtfelder
HTML
<label for="name">Name <span aria-hidden="true">*</span><span class="visually-hidden">(Pflichtfeld)</span></label><input type="text" id="name" name="name" aria-required="true">
<label for="email">E-Mail <span aria-hidden="true">*</span><span class="visually-hidden">(Pflichtfeld)</span></label> <input type="email" id="email" name="email" aria-required="true">
In diesem Beispiel verwenden wir:
- Ein Asterisk (*) zur visuellen Kennzeichnung (mit aria-hidden="true", damit er nicht unnötig vom Screenreader vorgelesen wird).
- Den Text „(Pflichtfeld)“ in einem <span> mit der Klasse visually-hidden, um ihn für sehende Nutzer auszublenden, aber für Screenreader zugänglich zu machen (diese CSS-Klasse musst du natürlich definieren, um den Text visuell zu verstecken).
- Das aria-required="true"-Attribut im <input>-Element für die semantische Kennzeichnung für Screenreader.
- Ein korrekt verknüpftes <label>-Element.
Tools zum Testen deiner Formulare
Du willst wissen, ob dein Formular wirklich barrierefrei ist? Diese Tools helfen dir weiter:
- WAVE Web Accessibility Evaluation Tool
Prüft HTML-Formulare auf Barrierefreiheit und zeigt, wo es hakt. - axe DevTools (Browser-Erweiterung)
Findet schnell typische Fehler bei Pflichtfeldern, Labels oder Fehlermeldungen. - NVDA Screenreader (Windows) oder VoiceOver (Mac)
Damit kannst du testen, wie gut dein Formular mit Screenreader bedienbar ist.
Mehr Informationen zum Thema findest du in unserem Artikel Screenreader-Kompatibilität testen.
Mit einer Domain fängt alles an!
- Wechsle mit deiner Domain zu GoDaddy & optimiere deinen Webauftritt mit Hilfe von KI So einfach geht’s.
- Ist deine Wunschdomain noch frei? Jetzt prüfen!
- Hol dir kreative Ideen für Domain-Namen - mit unserem kostenlosen Domainnamen-Generator
- Deine Wunschdomain ist schon vergeben? Wir helfen weiter.
Fazit
Die barrierefreie Kennzeichnung von Pflichtfeldern ist ein wichtiger Schritt, um deine Online-Formulare für alle Nutzer*innen zugänglich zu machen. Durch die Kombination visueller und textlicher Hinweise sowie die Verwendung von ARIA-Attributen stellst du sicher, dass wirklich alle wissen, welche Angaben zwingend erforderlich sind. So vermeidest du unnötigen Frust und schaffst eine positive Nutzererfahrung. Denk daran: Barrierefreiheit ist ein fortlaufender Prozess, also teste und optimiere deine Formulare regelmäßig!
