Eine Möglichkeit, um ein gutes Nutzungserlebnis für ein Formular sicherzustellen, ist die Berücksichtigung von Barrierefreiheit. Die Web Content Accessibility Guidelines (WCAG) zeigen, was ein Formular braucht, damit es für alle Nutzenden gut nutzbar ist. Nicht bloss Menschen mit einer Behinderung profitieren von dieser Richtlinie. Gute UX und Barrierefreiheit nach WCAG gehen Hand in Hand – gerade bei Formularen.

Wir haben für Sie die wichtigsten Anforderungen für barrierefreie Formulare zusammengetragen:

• Ausreichende Kontraste (WCAG EK 1.4.3 & 1.4.11): Achten Sie nicht nur bei Text auf Kontrast-Anforderungen. Auch Feld-Umrandungen, Icons und Fehlermeldungen müssen einen ausreichenden Kontrast zum Hintergrund haben, damit alle Nutzer:innen diese gut erkennen können.
• Klare Labels statt Placeholders (WCAG EK 1.3.1 & 3.3.2): Placeholders ersetzen keine Labels. Sie verschwinden bei der Eingabe und sind als alleinige Orientierung unzuverlässig. Stellen Sie für jedes Feld ein verständliches Label oder klare Instruktionen bereit und verknüpfen Sie das Label im Code korrekt mit dem Feld, zum Beispiel mit <label for=«…»> und id=«…». Wenn ein Label aus gestalterischen Gründen visuell versteckt wird (davon raten wir ab), muss es trotzdem im Markup vorhanden und für assistive Technologien verfügbar sein.
• Sichtbarer Fokus-Stil (WCAG EK 2.4.7): Der Standard-Fokusrahmen des Browsers darf nicht ohne einen sichtbaren Ersatz entfernt werden (outline: none; ist der Feind!). Tastatur-Nutzer:innen müssen jederzeit sehen, wo sie sich befinden. Obschon von den WCAG nicht gefordert, empfehlen wir ein gutes Kontrastverhältnis zwischen Fokus und Hintergrund. Der Browser-Standardfokus ist für viele Nutzende nicht genügend wahrnehmbar.
• Verständliche Hinweise und Fehlermeldungen (WCAG EK 1.3.1, 3.3.1, 3.3.2 & 4.1.3): Formulieren Sie Hilfetexte und Fehlermeldungen klar, präzise und feldbezogen. Fehlermeldungen sollen so platziert sein, dass Nutzende sie schnell finden, zum Beispiel direkt beim Feld oder zusätzlich in einer Übersicht am Formularanfang. Verknüpfen Sie Hilfetexte und Fehlermeldungen programmatisch mit dem jeweiligen Feld, zum Beispiel über aria-describedby, damit Screenreader den Zusammenhang zuverlässig herstellen können. Wenn ein bestimmtes Format erforderlich ist, nennen Sie es konkret, zum Beispiel «Bitte Datum im Format TT.MM.JJJJ angeben». Behandeln Sie Systemmeldungen wie «Dieser Dienst ist zurzeit nicht verfügbar» als Statusmeldung und machen Sie sie für Screenreader unmittelbar wahrnehmbar, zum Beispiel mit role=«status» oder bei dringenden Meldungen mit role=«alert».
• Gute Führung bei Fehlern nach dem Absenden (WCAG EK 3.3.1 & 2.4.3): Nach dem Absenden sollen Nutzer:innen effizient zu den fehlerhaften Eingaben geführt werden. Setzen Sie den Fokus entweder auf eine Fehlermeldungs-Übersicht am Formularanfang mit Sprunglinks zu den betroffenen Feldern oder noch besser direkt auf das erste fehlerhafte Feld. So ersparen Sie Nutzer:innen die mühsame Suche nach dem Problem.
• Smarte Eingabehilfen (WCAG EK 1.3.5): Nutzen Sie die richtigen Eingabetypen (type=«email») und autocomplete-Attribute. Das erleichtert das Ausfüllen auf allen Geräten und ist eine direkte WCAG-Anforderung.
• Eindeutige Pflichtfelder (WCAG EK 3.3.2 & 1.4.1): Ein Sternchen allein reicht nicht aus, um Pflichtfelder zuverlässig zu kennzeichnen, da es von Screenreadern oft nicht angesagt wird. Ergänzen Sie eine Sternchen-Kennzeichnung daher immer mit einer semantischen Auszeichnung, zum Beispiel mit dem HTML-Attribut required, oder bei benutzerdefinierten Komponenten mit aria-required=«true». Eine Kennzeichnung nur über Farbe reicht ebenfalls nicht aus, da Information nicht ausschliesslich über Farbe vermittelt werden darf. 
• Klare Gruppierung (WCAG EK 1.3.1): Gruppieren Sie zusammenhängende Felder (z.B. für eine Adresse) mit <fieldset> und <legend>. Das gibt Screenreader-Nutzer:innen den nötigen Kontext, den sehende Nutzer:innen sofort erfassen.

Wenn Sie alle aufgeführten Punkte bei der Umsetzung berücksichtigen, sollten Ihre Formulare grösstenteils barrierefrei sein. Damit verbessern Sie die User Experience für alle. Es können mehr Vorgänge, die von Nutzenden angefragt oder ausgelöst werden, erfolgreich abgeschlossen werden und Anbieter:innen können mehr Menschen erreichen.