Die barrierefreie Umfrage: Formulare, die jeder ausfüllen kann

Du kannst saubere Fragen schreiben und trotzdem die Antwort verlieren. Wenn ein Teilnehmer das Label nicht sehen kann oder nicht erkennt, welches Optionsfeld er gerade ausgewählt hat, schickt er dir keine schlechten Daten. Er schickt gar nichts. Und er ist weg, bevor das erste Diagramm lädt. Barrierefreiheit ist der Teil der Umfragegestaltung, der entscheidet, wer überhaupt antworten kann.

Eine nicht barrierefreie Umfrage verzerrt deine Ergebnisse

Etwa einer von sechs Menschen lebt mit einer Behinderung. Noch mehr lesen dein Formular auf einem Smartphone in hellem Sonnenlicht oder füllen es mit einer Hand in der Bahn aus. Jeder von ihnen ist ein Teilnehmer, den du eingeladen hast. Wenn das Formular nur mit einer Maus und ausreichend Sehvermögen funktioniert, ist die Gruppe, die abbricht, kein zufälliger Querschnitt. Diese Menschen unterscheiden sich von denen, die durchkommen, also verbiegt ihre Abwesenheit das Ergebnis in eine Richtung, die du weder sehen noch im Nachhinein korrigieren kannst. Das nennt sich Non-Response-Verzerrung. Sie steht direkt neben den Antworten niedriger Qualität, die du ohnehin schon herausfilterst: Beide sind Gründe dafür, dass ein ordentlich aussehendes Exportdokument trotzdem in die Irre führen kann.

Es gibt auch eine rechtliche Seite. Die europäische Barrierefreiheitsrichtlinie gilt seit dem 28. Juni 2025 und zieht viele digitale Dienste in Richtung eines technischen Standards, den der Rest des Feldes bereits verwendet: WCAG, die Web Content Accessibility Guidelines. Section 508 und der ADA tun dasselbe in den Vereinigten Staaten. Die aktuelle Version ist WCAG 2.2, eine W3C-Empfehlung, die im Dezember 2024 überarbeitet wurde. Stufe AA ist das, was fast alle meinen, wenn sie "barrierefrei" sagen. Du musst sie nicht auswendig lernen. Die Prüfpunkte weiter unten bauen darauf auf.

Gib jedem Feld ein echtes Label

Der häufigste Fehler bei Umfrageformularen ist die Verwendung des Platzhalters als Label: ein Feld mit blassgrauem Text "Deine E-Mail" und nichts darüber. Es sieht aufgeräumt aus. Dann beginnt der Teilnehmer zu tippen, der Hinweis verschwindet, und jeder, der kurz pausiert hat, hat den einzigen Hinweis darauf verloren, was das Feld wollte. Das Grau auf Weiß besteht den Kontrasttest selten. Einige Screenreader kündigen Platzhaltertext überhaupt nicht an. Das Feld klingt dann wie "Bearbeiten, leer".

Ein Label ist ein sichtbarer Text, der mit seinem Eingabefeld verknüpft ist. Ein Klick darauf setzt den Fokus auf das Feld, und ein Screenreader liest beides zusammen vor. Platziere es oberhalb des Feldes. Willst du ein Format oder Beispiel zeigen, tu das in separatem Hilfetext neben dem Feld. Das ist WCAG 3.3.2, und es kostet eine Zeile Markup.

Matrixfragen sind das Problem für Screenreader

Ein Raster mit Aussagen auf der Seite und einer Bewertungsskala oben funktioniert gut auf einem breiten Monitor und ist ein Albtraum für einen Screenreader. Sehende Teilnehmer werfen einen kurzen Blick auf die Spaltenüberschriften, dann arbeiten sie die Zeilen ab. Ein Screenreader wirft keine Blicke. Er landet auf dem dritten Optionsfeld in Zeile vier und kündigt, sofern du das Raster nicht sorgfältig gebaut hast, "Optionsfeld, nicht ausgewählt" an, ohne irgendeinen Hinweis darauf, welche Aussage oder welcher Punkt auf der Skala das ist.

Jede Option im Raster braucht einen zugänglichen Namen, der beide Teile trägt: die Zeile, zu der sie gehört, und den Wert, den sie darstellt. "Das Dashboard ist einfach zu navigieren, stimme voll zu" kann beantwortet werden. Ein nacktes Optionsfeld nicht. Wenn du das nicht garantieren kannst, teile die Matrix in einzelne Fragen auf, eine Aussage pro Frage. Das liest sich auf einem Smartphone besser, wo das Raster ohnehin zusammengebrochen wäre. Mehr Scrollen, viel weniger Fehler. Klare Formulierungen helfen hier ebenfalls: Eine Matrix aus Fragen, die jeweils auf eine Entscheidung abzielen, ist von vornherein kürzer.

Jede Skala muss per Tastatur bedienbar sein

Sternebewertungen und Emoji-Schieberegler sind meist die hübschesten Bedienelemente in einer Umfrage. Bedienbar sind sie kaum. Zu oft sind es anklickbare Bilder oder einfache div-Elemente mit einem Klick-Handler, die also mit einer Maus funktionieren und mit sonst nichts. Ein Tastaturbenutzer tabbt einfach vorbei.

WCAG 2.1.1 ist eindeutig: Alles muss per Tastatur bedienbar sein. Der zuverlässige Weg, eine Bewertungsfrage zu bauen, sind echte Optionsfelder, die wie Sterne oder Zahlen aussehen. Der Browser gibt dir dann Tastaturfokus und Pfeiltastenauswahl kostenlos. Schieberegler sind am schwierigsten richtig zu machen, weil der Wert angekündigt werden muss, während er sich ändert, und in einzelnen Schritten erreichbar sein muss. Für eine Empfehlungsbewertung von 0 bis 10 sind einfache Optionsfelder immer besser. Nimm die Hand von der Maus und probiere die Frage selbst aus.

Gruppiere die Optionen so, dass die Frage mitreist

Optionsfelder und Kontrollkästchen sind eine Gruppe, und sie müssen als eine angekündigt werden. Wenn eine Gruppe von Optionen im Markup nicht mit ihrer Frage verknüpft ist, liest ein Screenreader jede Auswahl für sich vor: "Unter 18. 18 bis 24. 25 bis 34." Die Person hört eine Liste von Altersangaben, ohne Ahnung, was gefragt wird. Umschließe jede Gruppe so, dass der Fragetext zum Gruppennamen wird und die Optionen darin liegen. Jede Option wird dann vorgelesen als "Wie alt sind Sie, 25 bis 34" und die Frage reist mit der Antwort. Das ist die Mechanik hinter WCAG 1.3.1: unsichtbar, bis jemand das Layout nicht sehen kann, das die Bedeutung trug.

Farbe darf niemals das einzige Signal sein

Farbe ist eine Ergänzung zur Botschaft, und für viele Menschen fällt sie weg. Ein Pflichtfeld, das nur mit einem roten Sternchen markiert ist, existiert für einen farbenblinden Teilnehmer nicht. Ein Fehler, der nur durch einen roten Rahmen angezeigt wird, auch nicht. Rot-Grün-Farbenblindheit allein betrifft etwa einen von zwölf Männern. Setze ein Wort neben die Farbe: Schreibe "Pflichtfeld" und markiere eine ausgewählte Option mit einem Häkchen neben der Farbänderung. Prüfe auch den Kontrast. Fließtext braucht nach WCAG 1.4.3 ein Verhältnis von mindestens 4,5 zu 1 gegenüber dem Hintergrund, und dieses blasse Platzhaltergrau erreicht diesen Schwellenwert fast nie.

Schreibe Fehlermeldungen, die sagen, was zu korrigieren ist

Der schlimmste Moment in einem nicht barrierefreien Formular: Du kannst nicht weiter und weißt nicht warum. Eine Pflichtfrage wurde übersprungen, du drückst auf Weiter, und die Seite bleibt stehen oder scrollt irgendwohin, wo du gerade nicht hinschaust. Für einen Screenreader-Benutzer, der keine Ankündigung gehört hat, ist die Umfrage jetzt kaputt, ohne Erklärung.

Verschiebe den Fokus auf das erste Feld, das nicht korrekt war. Ein Tastaturbenutzer landet dann auf dem Problem, statt danach suchen zu müssen. Nenne das Feld und die Lösung in der Fehlermeldung selbst: "Frage 4 muss beantwortet werden, bevor du fortfahren kannst" schlägt "ungültige Eingabe" jedes Mal. Das ist, worum WCAG 3.3.1 und 3.3.3 bitten: Identifiziere den Fehler, schlage die Lösung vor.

Gib eingeblendeten Fragen eine Stimme

Bedingte Logik ist gut für die Antwortqualität und leicht falsch umzusetzen. Wenn eine Antwort eine Folgefrage einblendet, sieht ein sehender Teilnehmer, wie sie einschiebt. Ein Screenreader-Benutzer sieht das standardmäßig nicht: Der Fokus bleibt, wo er war, nichts wird angekündigt, und eine ganze Frage geht ungehört vorbei. Wenn du eine Umfrage verzweigst, lass die neue Frage sich selbst ankündigen und verschiebe den Fokus darauf. Halte versteckte Fragen aus der Tab-Reihenfolge, bis sie zutreffen, damit niemand in ein ausgeblendetes Feld tabbt. Dieselbe bedingte Logik und Rückmeldung, die die Antwortqualität hebt, lässt Menschen feststecken, wenn die Einblendung stumm ist.

Halte den Fokus sichtbar und in der richtigen Reihenfolge

Die Tab-Reihenfolge muss der Lesereihenfolge folgen, damit der Fokus das Formular so durchläuft, wie das Auge es tut, nicht zu einer verstreuten Schaltfläche irgendwo. Und das fokussierte Element braucht einen sichtbaren Umriss. Browser stellen diesen standardmäßig bereit, und zu viele Designs entfernen ihn, sodass ein Tastaturbenutzer keinen Cursor hat. WCAG 2.2 fügte Regel 2.4.11 hinzu: Was auch immer du fokussierst, darf nicht hinter einem festen Header oder einem Cookie-Banner verschwinden. Hat deine Umfrage eine feste Leiste oben, sorge dafür, dass ein fokussiertes Feld frei davon scrollt.

Respektiere die Zeit und die Daumen der Menschen

Einige Umfragepanels platzieren einen Timer auf einer Seite oder lassen die Sitzung nach einer bestimmten Zeit ablaufen. Ein harter Timeout bestraft Menschen, die mehr Zeit brauchen: jemand, der ein Hilfsmittel verwendet, oder jemand, der jede Zeile über einen Screenreader liest. WCAG 2.2.1 verlangt, vor Ablauf der Zeit zu warnen und den Leuten zu erlauben, sie zu verlängern. Auf Smartphones gibt es auch ein physisches Problem. Ein dichtes Raster kleiner Optionsfelder ist ein Ziel, das kein Daumen sauber treffen kann. WCAG 2.2 legte in Kriterium 2.5.8 eine Untergrenze von 24 mal 24 CSS-Pixeln für ein interaktives Ziel fest. Gib den Optionen Platz. Verwendest du eine Drag-and-Drop-Frage, füge eine Alternative für Menschen hinzu, die nicht ziehen können, denn eine Ziehbewegung ist selbst eine Hürde.

Lass den Browser die langweiligen Felder ausfüllen

Demografische Fragen fragen nach denselben Dingen wie jedes Formular: Name, E-Mail, Postleitzahl, Land. WCAG 1.3.5 sagt, diese Felder mit ihrem Zweck zu kennzeichnen, damit Browser und Hilfsmittel sie automatisch ausfüllen und echtes Tippen für jemanden sparen, der es schwer findet. WCAG 2.2 fügte Regel 3.3.7 hinzu, die dagegen steht, Informationen erneut einzugeben, die du bereits im selben Prozess gesammelt hast. Wenn deine Umfrage auf Seite eins eine E-Mail-Adresse erfasst hat, frage nicht erneut danach auf Seite vier. Jedes Feld, das du vorausfüllen oder weglassen kannst, ist eine Sache weniger, durch die jemand kämpfen muss.

Teste es so, wie ein Teilnehmer es tun würde

Das funktioniert nur, wenn du es wirklich ausprobierst.

• Trenne die Maus ab und erreiche jede Frage, jede Option und die Senden-Schaltfläche mit Tab und den Pfeiltasten.
• Schalte VoiceOver auf einem Mac oder NVDA unter Windows ein und führe einen vollständigen Durchlauf mit ausgeschaltetem Bildschirm durch.
• Zoome die Seite auf 200 Prozent und schaue, was überläuft oder verschwindet.
• Führe axe oder Lighthouse für die mechanischen Prüfungen aus, vertraue dann aber dem manuellen Durchlauf mehr als dem automatisierten Score.

Automatisierte Tools erfassen vielleicht ein Drittel der Probleme. Der Rest braucht einen Menschen an der Tastatur. Mach das vor dem Start, denn sobald eine Umfrage live ist, sind Formulierung und Struktur faktisch eingefroren, und eine Korrektur zwischendurch teilt deine Daten.