Wie Sie barrierefreie Formulare erstellen und gleichzeitig die Absprungrate verbessern

Formulare sind ein essenzieller Bestandteil in der Welt des Internets. Täglich interagieren tausende von Nutzern mit Formularen, um viele verschiedene Services in Anspruch zu nehmen.

Von der Registrierung für einen Newsletter bis hin zu einem Checkout Formular für eine E-Commerce Seite ist alles dabei. Jedoch sagen etwa 80% (The Manifest) der Nutzer, sie hätten ein bereits angefangenes Formular abgebrochen. Neben Sicherheitsbedenken werden vor allem Schwierigkeiten bei der Navigation und die Länge der Formulare als Gründe angegeben. Der Großteil der abgesprungenen User kommt nicht zu dem Formular zurück.

Wie man an diesen Werten sieht, gibt es selbst nach fast 25 Jahren Erfahrung und der Allgegenwart solcher Formulare Optimierungsbedarf.

In diesem Beitrag werde ich die wichtigsten Aspekte von barrierefreien Formularen beleuchten und welche Auswirkungen eine starke Barrierefreiheit für Ihr Unternehmen haben kann.

Barrierefreiheit: Was und wie?

Barrierefreiheit im Internet bedeutet, dass alle Nutzer Angebote uneingeschränkt und unabhängig von vorhandenen Einschränkungen in Anspruch nehmen können. Im Kontext von Formularen bedeutet dies, dass jeder Nutzer in der Lage sein soll, dieses Formular ohne Hindernisse ausfüllen zu können.

Getrieben werden diese Anforderungen von staatlichen Institutionen und gesetzlichen Regelungen wie dem Behindertengleichstellungsgesetz (BGG) und dem Barrierefreiheitsstärkungsgesetz(BSFG). Für die Standards werden Richtlinien wie die Web Content Accessability Guidelines (WCAG), welche von der Internationalen W3C Organisation erstellt wurden, hinzugezogen. Diese Richtlinien bilden die Basis, auf der ein barrierefreies Internet aufbauen soll.

Doch was bedeuten diese Vorgaben für ein Unternehmen?

Laut dem BSFG werden ab Mitte 2025 bestimmte Webseiten und Betreiber gesetzlich verpflichtet, ihre Inhalte nach dem European Accessability Act(EAA)  barrierefrei anzubieten.

“[...] Digital technologies are the focus of the European Accessibility Act. The Act covers the following products and services: 

Products

• Computers and operating systems
• Smartphones and other communication devices
• TV equipment related to digital television services
• ATMs and payment terminals…
• E-readers
• Ticketing and check-in machines

Services

• Phone services
• Banking services
• E-commerce
• Websites, mobile services, electronic tickets and all sources of information for air, bus, rail and waterborne transport services
• E-books
• Access to Audio-visual media services (AVMS)
• Call to the European emergency number 112

The Act [...] does not impose detailed technical restrictions to make products and services accessible. Microenterprises (i.e., a small business with fewer than 10 employees) [...] are exempted from the obligations of the Act.”

Konkret heißt dies, dass nicht barrierefreie Inhalte nicht nur zu einer geringeren Conversion Rate führen, sondern im schlimmsten Fall zu rechtlichen Problemen. 

Warum sollte man nicht auf barrierefreie Formulare verzichten?

Nicht nur im rechtlichen Raum kann eine fehlende Barrierefreiheit zum Hindernis werden und Konsequenzen für das Unternehmen bedeuten, sondern auch in der Generierung von Leads und der Conversion Rate. Die Zahl an Menschen, die auf barrierefreie Inhalte angewiesen sind, steigt stetig an. Je mehr Hürden in einem Formular vorhanden sind, desto höher ist die Absprungrate.

Die Absprungrate erhöht sich selbst bei kleinen Komplikationen auf über 67% (WP-Forms). Für Menschen mit Einschränkungen erhöht sich diese um das Vielfache, da die vorhandenen Hürden in vielen Fällen zu hoch sind. 

Nicht nur gehen somit einem Unternehmen wertvolle Leads verloren, auch bisherige Kunden können durch schlecht implementierte Formulare verloren gehen. Je besser Ihre Formulare an die Bedingungen der Benutzer angepasst sind, desto größer ist die Wahrscheinlichkeit, dass Formulare erfolgreich versendet werden.

Wir müssen jetzt mehr an Barrierefreiheit denken

Mit einer alternden Generation und einer stärkeren Vernetzung im digitalen Zeitalter wird das Thema der Barrierefreiheit immer präsenter. Immer mehr Menschen sind auf die Interaktion mit digitalen Endgeräten angewiesen. Ein Trend, der sich nicht aufhalten lässt. Immer mehr Menschen mit unterschiedlichen Einschränkungen wie Sehschwäche, Farbschwäche, Gehörschwäche oder körperlichen Einschränkungen, die das Benutzen einer Maus verhindern, nehmen aktiv im Internet teil. Dieser Vielfalt an möglichen Nutzern muss man beim Anbieten eines Services gerecht werden. Nicht nur aus rechtlicher Sicht, sondern auch aus einer ethischen Perspektive. Eine Gesellschaft, welche eine großen Teil ihrer Mitglieder durch Unachtsamkeit oder Ignoranz ausschließt, ist keine inklusive und erstrebenswerte Gesellschaft. 

Viele Services und sogar staatliche Organe wechseln zu einer immer mehr digitalisierten Version. Damit Teile unserer Gesellschaft nicht zurückbleiben, müssen wir uns damit befassen, wie wir die digitale Welt zugänglich für alle machen können.   

Barrierefreie Formulare und ihre Bestandteile

Grundsätzlich besteht ein barrierefreies Formular aus den gleichen Bausteinen wie ein Formular ohne Fokus auf Barrierefreiheit. Der größte Unterschied besteht in der Art und Weise, wie diese Bausteine genutzt werden.

Die wichtigsten Elemente eines Formulars sind folgende:

• Label - Werden über andere Elemente platziert um zu beschreiben was gefragt ist
• Input Felder - Hier kann der User eine Zeile Text eingeben
• Checkbuttons - Checkbuttons können eine Mehrfachauswahl haben
• Radiobuttons - In einer Gruppe von Radiobuttons können nur jeweils ein Button aktiviert werden
• Freitext Felder - Hier kann der User einen längeren Text eingeben
• Upload Felder - Hier können Dateien vom User hochgeladen werden
• Passwort Feld - Hier kann die Eingabe automatisch maskiert werden
• Button zum Abschicken des Formulars

Je nachdem, wie das Formular aufgebaut ist, können diese Bestandteile mehr oder weniger vorhanden sein. 

Alle Elemente können mit reinem HTML erstellt und eingebunden werden. Diese Bestandteile geben die einzelnen Funktionen im Formular wieder, allerdings benötigt man für ein gutes Formular mehr als nur Bausteine.

Barrierefreie Formulare müssen nämlich gewissen Anforderungen gerecht werden:

• Elemente müssen mit klaren und verständlichen Legenden und Beschriftungen markiert werden. Jedes Element muss unmissverständlich einem Label zuweisbar sein. 
• Das gesamte Formular muss über die Tastatur navigierbar sein. Menschen mit Screenreadern oder alternativen Eingabegeräten können Webseiten nur mit einer Tastatur bedienen.
• Fehlermeldungen und Validierungen von Eingaben müssen verständlich und hilfreich sein. Benutzer müssen ausreichendes und konstruktives Feedback bekommen, um eventuelle Fehler zu korrigieren.
• Kontrast und Farbe müssen in einem Verhältnis von 4,5:1 stehen. Elemente mit zu geringem Kontrast können nur schwer oder gar nicht wahrgenommen werden, während bestimmte Farben eventuell gänzlich nicht wahrgenommen werden können.

Man muss sich als Ersteller eines Formulars Gedanken machen, welche Struktur und welches Design genommen werden soll und welche Informationen man vom User braucht. Um diesen Prozess zu vereinfachen, werden im nächsten Abschnitt alle Schritte für das Erstellen eines erfolgreiches Formular dargestellt.

Wie erstelle ich ein barrierefreies Formular?

Zunächst ist es wichtig, sich mit den Vorgaben an eine barrierefreie Website vertraut zu machen. Weitere Informationen zum Thema Barrierefreiheit finden Sie hier: Aktion-Mensch Barrierefreie Website Pflichten.

Legen Sie eine erste Struktur fest: 

Überlegen Sie, welche Informationen vom User wirklich benötigt werden und welche redundant oder unwichtig sind. Je weniger Formularfelder ausgefüllt werden müssen, desto weniger läuft man Gefahr, Dinge zu übersehen und unabsichtlich Hindernisse einzubauen. 

Überprüfen Sie die Anordnung:

Überlegen Sie genau, ob und wann Formularfelder angezeigt werden. Die Reihenfolge der Formularfelder sollte logisch und stringent sein. Ein Upload-Feld zwischen Name und Telefonnummer zu platzieren ist z.B. nicht sinnvoll, da eine solche Anordnung von persönlichen Informationen zu einem anderen Themenbereich und zurück springt.   

Versuchen Sie dabei auch Formularfelder zu gruppieren. Dies kann ihnen bei der technischen Umsetzung eine große Hilfe sein.

Erstellen Sie einen ersten Prototypen:

Bei einem ersten Prototypen sind Dinge wie Serverabfragen oder eine funktionierende Datenübermittlung noch nicht relevant. Dieser Prozess soll Ihnen dabei helfen, einen Einblick darüber zu erlangen, ob das, was Sie im vorigen Schritt ausgearbeitet haben, tatsächlich sinnvoll ist. Nutzen Sie beim Testen Ihres Prototypen auch die Funktionen für Barrierefreiheit, welche bereits in Ihrem Browser integriert sein sollten. Diese Funktionen finden Sie in den meisten Browsern unter den Entwicklerwerkzeugen. In Firefox können Sie z.B. unter dem Reiter Barrierefreiheit die komplette Seite nach Problemen in der Barrierefreiheit scannen. Somit gewinnen Sie einen ersten Überblick über mögliche Probleme.

Wenn Sie Fehler oder Schwierigkeiten finden, haben Sie jetzt noch die Gelegenheit, diese Fehler zu beseitigen.

Ausarbeitung und Implementierung:

Nachdem der erste Prototyp erfolgreich erstellt und provisorisch getestet wurde, kann nun die technische Umsetzung erfolgen. Hierfür eignen sich wie oben geschrieben professionelle Agenturen. Achten Sie bei diesem Schritt darauf, dass hinzukommende Funktionen keinen negativen Einfluss auf die Barrierefreiheit haben.

Testing:

Jetzt sind Sie an dem Punkt angelangt, wo Sie Ihr Formular auf Herz und Nieren prüfen müssen. Nutzen Sie alle Tools (z.B. Accessability Checker von Intent, Lighthouse von Google oder Browserinterne Tools), die Ihnen zur Verfügung stehen, um die Navigation, die Lesbarkeit, den Kontrast, die Fehlermeldungen und die Darstellung auf mobilen Endgeräten zu testen.

Worauf sollte ich beim Erstellen eines barrierefreien Formulars achten?

Wie oben bereits beschrieben, bestehen alle Formulare aus den gleichen Bausteinen. Diese Bausteine sind in den meisten Browsern schon so gut integriert, dass man nur mit diesen bereits einen großen Schritt Richtung Barrierefreiheit nehmen kann. 

Konkret heißt dies, wenn ein HTML Element die gewünschte Funktion bereits integriert hat, sollte dieses Element anstelle einer eigenen Lösungen implementiert werden. Selbst programmierte Lösungen können theoretisch funktionieren, allerdings besteht keine Garantie, dass alle Assistenzfunktionen eines Browsers diese auch erkennen und verwenden können.

Vernachlässigen Sie eine gute mobile Darstellung nicht. Sie wissen nie, in welcher Situation ein User auf ihr Formular stößt und damit arbeiten muss. Je mehr Situationen Sie in Ihren Entwurfsprozess einbeziehen, desto höher ist die Conversion Rate.

Achten Sie besonders darauf, dass Ihr Corporate Design nicht die Funktionalität Ihres Formulars einschränkt. Wenn Sie besondere Icons, Animationen oder Farben auf Ihrer Website verwenden, müssen Sie eventuell Abstriche für Formulare in Kauf nehmen. Menschen mit Protanopie können z.B. rot markierte Formularfelder nicht so einfach wahrnehmen. Mit gut platzierten und aussagekräftigen Icons können Sie diese Nutzer beim Verständnis unterstützen.

Menschen mit Sehschwäche könnten von aufwendigen Animationen abgelenkt oder verwirrt werden, da sie nicht genau erkennen können, was passiert. Verzichten Sie daher bei Formularen auf Animationen.

Ziehen Sie die Benutzung des One Thing per Page Prinzips in Erwägung. Teilen Sie Ihr Formular in voneinander unabhängige Abschnitte und zeigen Sie nur einen Teil des Formulars an. Kombinieren Sie dieses Prinzips mit Fortschrittsbalken, um lange und aufwendige Formulare übersichtlicher und einfacher zu machen. 

Alle Elemente eines Formulars sollten ein Label bekommen und direkt über das HTML miteinander verbunden werden. Sie sollten gut sichtbar und in einfacher Sprache über dem Eingabefeld stehen. Eine beliebte Technik ist der Verzicht auf Labels, die stattdessen mit Placeholdern im Eingabefeld ersetzt werden. Dies macht das gesamte Formular zwar kompakter, allerdings leidet die Bedienbarkeit stark darunter. Beim Fokussieren des Feldes verschwindet der Placeholder und man hat keinen Hinweis mehr darauf, was gefordert ist. Ein Screenreader hat mit solchen Formularfeldern starke Probleme, da nicht erkennbar ist, was für ein Feld gerade ausgewählt ist. 

Fazit

Barrierefreiheit rückt immer mehr in den Fokus für die Entwicklung des Internets. Da Formulare einen wichtigen Bestandteil der digitalen Welt darstellen, ist es unausweichlich, sich mit der Thematik näher zu beschäftigen. 

Nicht nur lässt die Implementierung von barrierefreien Aspekten auf vielen Webseiten zu wünschen übrig, sie wird bald zur Pflicht. Allerdings hat die Implementierung nicht nur Vorteile für Menschen mit Einschränkungen, sondern für alle Benutzer. 

Mit Formularen, die den Fokus auf Barrierefreiheit setzen, können Unternehmen nicht nur neue Kunden generieren, sondern auch ihren bereits bestehenden Kundenstamm in Zukunft mit zugänglichen und ansprechenden Formularen an sich binden. 

Falls auch Sie unangenehme Erfahrungen mit Online-Formularen gemacht haben, teilen Sie diese doch unten in den Kommentaren! 

Und im Falle, dass Sie Interesse an professionell umgesetzten Formularen haben, nehmen Sie gerne mit uns Kontakt auf.