Feedback-Mechanismen umsetzen

Formulare sind wesentliche Bestandteile von Nutzerinteraktionen in Webauftritten und Apps. In Formularen können Nutzer*innen Texte eingeben, aus Listen Einträge auswählen, Optionsfelder markieren und durch eine Schaltfläche die eingegebenen Daten absenden.

Menschen mit Behinderungen können bei der Nutzung von Formularen auf zahlreiche Probleme stoßen. Neben den Barrieren die beispielsweise auch auf normalen Webseiten vorkommen, treten einige Barrieren ausschließlich in Formularen auf. Standards wie die Web Content Accessibility Guidelines (WCAG) 2.1 nehmen deshalb mit einigen Kriterien explizit Bezug auf Formulare und zeigen barrierefreie Techniken auf.

Die in der BITV des Bundes festgelegten Anforderungen an die digitale Barrierefreiheit können durch Anwendung der harmonisierten Norm DIN EN 301 549 erfüllt werden. Diese enthält sowohl für Apps als auch für Webseiten Kriterien für die barrierefreie Umsetzung und nimmt Bezug auf die WCAG 2.1.

Ein Formular zum Melden von Barrieren, egal ob auf einer Webseite oder in einer nativen App, muss grundsätzlich alle Barrierefreiheitsanforderungen erfüllen, die sich den vier Grundprinzipien digitaler Barrierefreiheit zuordnen lassen. Werden diese bei der Formulargestaltung berücksichtigt, ist die Meldemöglichkeit für alle Nutzer*innen wahrnehmbar, bedienbar, verständlich und für alle eventuell eingesetzten Hilfsmittel technologisch robust gestaltet.

Um ein Formular auszufüllen, muss für jedes Eingabefeld der Zweck des Feldes bekannt sein. Für Felder, die keine eindeutig zugeordnete Beschriftung haben, ist der Zweck nicht von einer Software bestimmbar. Wenn ein Eingabefeld aktiv wird, kann ein Screenreader also keine Beschriftung feststellen und diese auch nicht vorlesen. Jedes Feld muss deshalb mit einer Beschriftung verknüpft werden, sodass diese von einer Software als solche erkannt werden kann.

Erfahren Sie mehr zu App-Barrieren in der Beschriftung von Formularen in der Teilhabe 4.0-Demonstrator-App.

Die Verwendung von eindeutig zugeordneten Beschriftungen hat noch einen weiteren positiven Effekt. Da der Browser die Zuordnung kennt, kann auch die Beschriftung mit der Maus angeklickt werden. Menschen mit einer Körperbehinderung, die zum Beispiel aufgrund eines Tremors der Hand kleine Flächen mit der Maus nur schwer treffen, steht so eine größere Fläche zur Verfügung. Besonders die kleinen Optionsfelder (Radiobuttons) oder Kontrollkästchen (Checkboxen) sind so wesentlich leichter mit der Maus zu treffen.

Beschriftungen sind unter anderem entsprechend der folgenden Anforderungen in den Web Content Accessibility Guidelines (WCAG) 2.1 beziehungsweise der DIN EN 301 549 barrierefrei umzusetzen:

Jedes Eingabefeld in einem Formular benötigt eine Beschriftung:

Für Nutzer*innen von Screenreadern muss diese Verknüpfung technisch im HTML-Quellcode der Webseite bzw. im Quellcode der App hergestellt werden.

Die klassische Bedienung einer App per Touchscreen des Mobilgerätes erfordert meist ein gutes Sehvermögen und ausreichende Feinmotorik. Sind diese Fähigkeiten aufgrund einer Behinderung oder auch zeitweise situativ eingeschränkt, stehen den Nutzer*innen auch andere Wege für die Bedienung einer App oder Webseite zur Verfügung.

Menschen mit Einschränkungen des Sehens können mithilfe der in mobilen Betriebssystemen integrierten Sprachausgabe, dem Screenreader, und durch einfache Gesten, wie Antippen oder Wischen, schrittweise von Eingabefeld zu Eingabefeld springen. Auch die Navigation per Tabulatortaste mithilfe einer beliebigen externen Tastatur, die per Bluetooth verbunden werden kann, ist möglich.

Die Navigation per Tabulatortaste oder entsprechenden anderen Eingabegeräten, auf die die Funktion der Tabulatortaste gelegt wurde, ist auch bei Web-Anwendungen die Methode, um sich von Element zu Element zu bewegen.

Die Reihenfolge der Elemente in einem Formular kann von unterschiedlichen Faktoren abhängen. In manchen Entwicklungsumgebungen gibt es einen Dialog-Editor, mit dem die Reihenfolge bestimmt werden kann. Häufig entspricht die Reihenfolge der Textfelder aber auch einfach nur der Reihenfolge im Quellcode.

Erfahren Sie mehr zu App-Barrieren in unserer Teilhabe 4.0-Demonstrator-App.

Ein weiteres Problem sind Fehler bei der Eingabe. Ein Formular muss Fehleingaben erkennen und die Fehlerbeschreibung auf barrierefreie Art den Nutzer*innen mitteilen. Um von vornherein Fehleingaben zu vermeiden, müssen klare und verständliche Anweisungen zur Eingabe gemacht werden.

Erfahren Sie mehr zu App-Barrieren in Formularen bei der Fehlerbehandlung in der Teilhabe 4.0-Demonstrator-App.

Hinweise

Die relevanten Anforderungen entsprechend der DIN EN 301 549 beziehungsweise der WCAG 2.1 wurden bereits im Abschnitt Beschriftungen erwähnt.

Formatvorgaben rechtzeitig mitteilen

Wenn in einem Eingabefeld nur ein bestimmtes Datenformat akzeptiert und vom Server verarbeitet werden kann, dann müssen Sie der Nutzerin oder dem Nutzer dieses Format mitteilen, und zwar bevor sie oder er beginnt, die Eingabe zu tätigen. Es reicht nicht aus, die Nutzer*innen erst bei einem Fehler auf das richtige Datenformat hinzuweisen.

Am sichersten ist es, wenn Sie das geforderte Datenformat kurz im Label des Eingabefeldes beschreiben.

In der Regel ist der verfügbare Platz im Label aber beschränkt, sodass eine ausführliche Anweisung dort nicht immer möglich ist. In diesem Fall ist es sinnvoll, die zweite Alternative zu nutzen und vor dem Formular eine ausführliche Textanweisung zu verfassen. Hier können Sie neben der Formatbeschreibung auch Beispiele einfügen. Beispiele sind für Nutzerinnen und Nutzer meistens besser verständlich.

Pflichtfelder kennzeichnen

Wenn Sie ein Formular mit Pflichtfeldern nutzen, müssen Sie die Pflichtfelder kennzeichnen. Zur Hervorhebung der Pflichtfelder müssen Sie unter anderem beachten, dass Sie sich dabei nicht allein auf Farben verlassen dürfen. Eine zusätzliche Kennzeichnung ist nötig. Üblich ist es zum Beispiel, Pflichtfelder zusätzlich mit einem Stern "*" im Label zu kennzeichnen. Aber, auch ein Texthinweis in Klammern würde funktionieren.

Wenn Sie die Pflichtfelder markieren, müssen Sie vor dem ersten Formularfeld auf die Pflichtfelder und deren Markierung hinweisen. Beachten Sie dabei, dass Sie sich bei dem Hinweis nicht nur auf sensorische Eigenschaften verlassen dürfen. Ein Hinweis wie: "Pflichtfelder sind rot beschriftet" reicht demnach nicht, es muss auch auf die "*"-Markierung hingewiesen werden.

Behandlung von Fehlern

Bei jedem Formular wird es zu Fehleingaben kommen. In der Regel löst die Eingabe von Daten auf dem Server eine Reaktion aus. Der Server kann nur korrekt arbeiten, wenn die eingegebenen Daten ebenfalls korrekt sind. Deshalb muss jede Formulareingabe durch den Server auf Fehler überprüft werden.

Ist ein Fehler erkannt worden, muss den Nutzer*innen der Fehler mitgeteilt werden, denn die vom Server erwartete Arbeit kann nicht korrekt durchgeführt werden. Die Erwartung der Nutzer*innen wird in diesem Fall nicht erfüllt. Wenn sich zum Beispiel jemand zu einem Newsletter anmelden möchte, wird eine falsch eingegebene E-Mail-Adresse dazu führen, dass die Nutzerin oder der Nutzer nie einen Newsletter erhalten wird. Erkennt der Server eine ungültige E-Mail-Adresse, muss dies den Nutzer*innen mitgeteilt werden.

Die Überprüfung kann auch durch eine JavaScript-Funktion vom Browser durchgeführt werden. Zu empfehlen ist dies aber nur als zusätzliche Überprüfung, denn durch Manipulationen der Script-Ausführung kann es immer noch dazu kommen, das ungültige Daten an den Server geliefert werden.

Wenn ein Fehler durch den Server entdeckt wird und dieser eine Fehlerseite ausliefert, sollte Sie bereits im Seitentitel darauf hinweisen, dass es sich um eine Fehlermeldung handelt. Ein blinder Mensch würde die Webseite sonst eventuell nicht bis zur Fehlermeldung lesen.

Wenn Sie Nutzer*innen Eingabefehler mitteilen, beachten Sie bitte Folgendes:

Wenn Sie eine fehlerhafte Eingabe hervorheben, müssen Sie unter anderem beachten, dass Sie sich dabei nicht allein auf Farben verlassen dürfen. Eine zusätzliche Kennzeichnung ist nötig. Häufig werden zum Beispiel, fehlerhafte Felder mit einem "Achtung"-Zeichen (aus dem Straßenverkehr) im Label gekennzeichnet. Wenn Sie eine Fehlerbeschreibung vor das Formular setzen, können Sie auch aus der Fehlerbeschreibung heraus, auf das Formularfeld verlinken.

Fehlervermeidung

"Vorbeugen ist besser als heilen", das sollte auch für Ihre Formulare gelten. Wenn das Ausfüllen eines Formulars zu direkten Konsequenzen führen kann, beispielsweise Kaufabschlüsse, Geldüberweisungen oder die Freigabe persönlicher Daten, dann müssen Sie konsequent versuchen Fehleingaben zu vermeiden. Je nach Art der Formularanwendungen müssen Sie eine oder mehrere der folgenden Möglichkeiten anbieten.

Stellen Sie durch die Gestaltung der Prozesse rund um den Feedback-Mechanismus sicher, dass die Melder*innen eine zeitnahe, wertschätzende und qualifizierte Rückmeldung erhalten.

Bei größeren Anbietern kann es hilfreich sein, die über das Formular erhaltenen Daten zur Barrieremeldung direkt in ein Ticketsystem einzupflegen. So kann zu jedem Zeitpunkt nachvollzogen werden, wann gemeldet wurde und welche Rückmeldung die Nutzer*innen erhalten haben beziehungsweise welche zusätzlich benötigten Daten bereits von den Nutzer*innen angefragt wurden.

Die Melder*innen sollten eine (automatische) Rückmeldung erhalten, dass ihre Barrieremeldung eingegangen ist und wie der weitere Bearbeitungsprozess ablaufen wird. Wenn möglich, sollte hierbei bereits der zuständige Ansprechpartner beziehungsweise Ansprechpartnerin mit Kontaktdaten für Nachfragen mitgeteilt werden.

Sie finden an verschiedenen Stellen weiterführende Hinweise zur technischen Umsetzung eines Feedback-Mechanismus.

• Weiterführende Hinweise zum Tool Feedback ermöglichen – Barrieren abbauen
• Informationen für öffentliche Stellen des „Informationstechnik Zentrums Bund“:
  • Informationen zur Komponenten-Bibliothek für die Barrierefreiheit, die zum Ziel hat wiederverwendbare Web Components barrierefrei anzubieten.
  • Komponenten-Bibliothek für die Barrierefreiheit bei GitHub: KoliBri
• Vermeidung der Verwendung von CAPTCHAs
• Projekt „Access & Use“ zu Formularen und Fehlerbehandlung
• Informationen für öffentliche Stellen im „Portal Barrierefreiheit der Dienstekonsolidierung des Bundes“:
  • Beschriftung von Formularelementen
  • Tastaturnavigation
• Tipps für die barrierefreie App-Entwicklung
• Informationen des World Wide Web Consortiums (W3C):
  • Forms Tutorial
  • Techniques for WCAG 2.1
  • Barrierefreie Webinhalte und Web-Applikationen mit ARIA
• Korrekte Verwendung des autocomplete-Attributes zum automatischen Ergänzen von Daten in Formularfeldern
  • Browser-PlugIn für Chrome „Autocomplete-Check“ auf GitHub
  • Aufzeichnung des Webinars zur Browsererweiterung für autocomplete-Attribut
  • Hintergrundinformationen zum WCAG 2.1 Kriterium 1.3.5 Identify Input Purpose