Einleitung
Stell Dir vor, Dir erzählt jemand, dass 96 Prozent der meist genutzten Webseiten in Deutschland nicht uneingeschränkt genutzt werden können. Was wäre Deine Reaktion? Laut einer WebAIM-Studie (Stand: März 2023) erfahren Menschen mit Beeinträchtigungen keine gleichberechtigte Teilhabe am gesellschaftlichen Leben im Internet. (Quelle: webaim.org)
Wenn Deine Webseite nicht für alle Menschen zugänglich ist, dann schließt Du eine große Zielgruppe von Vorneherein von Deiner Webseite aus. Und wer möchte das schon?
Du möchtest wissen, warum Du Dir den 28. Juni 2025 rot im Kalender eintragen solltest? Wie Du nicht nur die Förderung von digitaler Inklusion vorantreibst, sondern auch Deine Reichweite und die Nutzbarkeit Deiner Webseite erhöhst? Dann ist dieser Beitrag genau das Richtige für Dich! Lasst uns gemeinsam eine digitale Welt gestalten, in der alle Menschen teilhaben können.
Was sind barrierefreie Formulare?
Eine Webseite und deren darauf integrierten Formulare mit sämtlichen Formularelementen werden als barrierefrei definiert, wenn die Nutzer:innen mit z.B. einer Sehbehinderung, einer Hörschwäche, motorischer oder kognitiver Störung die Webseite inklusive aller Formularfelder uneingeschränkt nutzen können.
Barrierefreiheit (Accessibility) für Formularelemente ist somit gegeben, wenn inhaltlich-gestalterische und technische Hindernisse für alle Nutzer:innen beseitigt wurden. Eine Checkliste mit den wichtigsten Punkten sowie den gängigsten Fehlern stelle ich Dir im Laufe dieses Artikels zusammen.
Gesetzliche Anforderungen und Richtlinien
Die Umsetzung von digitaler Barrierefreiheit bei Formularen ist bereits seit dem 23. September 2018 Pflicht für einige Internetseiten. Dazu zählen Webseiten der öffentlichen Verwaltung, Krankenhäusern und Universitäten. Die Barrierefreiheit für Webseiten in der Privatwirtschaft ist der nächste Schritt für die Stärkung digitaler Inklusion:
- Mit dem European Accessibility Act (EAA) sollen Corporate Websites sowie Webangebote von E-Commerce-Shops ab 2025 für alle Nutzer:innen in der Europäischen Union zugänglich und zu bedienen sein. (Quelle: ec.europa.eu)
- Deutschland setzt mit dem Barrierefreiheitsstärkungsgesetz (BFSG) die Anforderungen der EU-Richtlinie inhaltlich um. Die Barrierefreiheit wird mit dem Stichtag des 28. Juni 2025 zur Pflicht. (Quelle: bmas.de)
- Grundlage für die Umsetzung von Barrierefreiheit bilden die Web Content Accessibility Guidelines (WCAG). Diese Richtlinie ist international anerkannt und definiert anhand von Erfolgskriterien und Konformitätsstufen den technischen Standard für die Gestaltung und Entwicklung barrierefreier Webseiten und Formularelemente seit 2018.
Die Richtlinien der Web Content Accessibility Guidelines (WCAG) treiben die Entwicklung von Webinhalten voran, die für alle Menschen zugänglich sind. Die Einhaltung von WCAG gewährleistet gleichen Zugang für alle Nutzer:innen.
Die Leitprinzipien der WCAG beziehen sich stets auf die Inhalte sowie die Benutzerfläche Deiner Formularelemente. Die Prinzipien lauten:
- Wahrnehmbar (Perceivable): Alle Informationen sowie die Felder in Deinem Formular sollen so gestaltet werden, dass sie von sämtlichen Nutzer:innen wahrgenommen werden können. Hierzu gehören alternative Texte für Bilder, Transkriptionen für Audioinhalte, Beschriftungen und Fehledermeldungen sowie die Möglichkeit der User:innen Texte in verschiedenen Größen und Farben anzupassen.
- Bedienbarkeit (Operable): Unabhängig von der Art der Interaktion, die Besucher:innen in Deinem Web-Formular tätigen – Die Inhalte und Formularfelder müssen bedienbar sein. Als Interaktion wird die Navigation mit der Tastatur, ausreichende Zeitintervalle für interaktive Elemente und die Vermeidung von Inhalten, die zu epileptischen Anfällen führen können, gezählt.
- Verständlich (Understandable): Die Formulare auf Deiner Webseite sollen für alle Benutzer:innen verständlich sein. Die Anforderung besteht darin, dass die Elemente klar und konsistent sind, Formulierungen verständlich und Interaktionen vorherbar sind.
- Robust (Robust): Deine Formulare sollen so „robust“ sein, dass die Formularfelder stets richtig interpretiert werden können, unabhängig von der Plattform oder dem Gerät, das die User:innen verwenden, um Fehlermeldungen vermieden werden. Somit können auch Benutzeragenten die Steuerelemente Deiner Formulare fehlerfrei interpretieren.
Diese vier Leitprinzipien bilden die Grundlage der Anforderungen an Gestaltung und Bewertung von barrierefreien Webinhalten gemäß den WCAG-Richtlinien. Statt Mobile-first wird also ab sofort Accessibilty-first Dein Leitgedanke zur Erstellung von Webseiten inklusive sämtlicher Dokumente und Formularfelder sein. Das Ziel dabei ist, dass Du durch neue Designprinzipien digitale Angebote von Anfang an für alle Menschen stets leicht bedienbar gestaltest und optimierst. Mehr dazu findest du hier.
Die Leitprinzipien gewährleisten dabei, dass Personen mit unterschiedlichen Einschränkungen Webinhalte effektiv wahrnehmen, bedienen, verstehen und darauf zugreifen können.
(Quelle: w3.org)
Ausnahmen
Private sowie rein geschäftliche Angebote unterliegen nicht dem Barrierefreiheitsstärkungsgesetz. Kleinunternehmen sind ebenfalls von den gesetzlichen Anforderungen des BFSG ausgenommen. Zu Kleinunternehmen gehören Unternehmen, die weniger als 10 Beschäftigte oder einen Jahresumsatz von höchstens 2 Millionen Euro verzeichnen.
Falls die Änderungen für barrierefreie Formulare ein wirtschaftliches Risiko auch für die Unternehmen darstellen, die hierzu in 2025 verpflichtet werden, kann das Unternehmen von den neuen Richtlinien ausgeschlossen werden.
Eine individuelle Beratung zur Erstellung und Optimierung von barrierefreien Webseiten, deren Elemente, wie Formulare, lohnt sich jedoch für Jeden und bringt Dich als Marketer:in einen Schritt voraus, um die Web-Zugänglichkeit zu steigern.
Konsequenzen bei Nichtbeachtung
Die Einhaltung der gesetzlichen Anforderungen für digitale Barrierefreiheit wird von den einzelnen Bundesländern überwacht. Wenn eine Marktüberwachungsbehörde Deines Bundeslandes feststellt, dass Dein Webauftritt nicht barrierefrei ist, wirst Du im ersten Schritt dazu aufgefordert die Barrierefreiheit (wieder-) herzustellen. Eine festgelegte Deadline für die Umsetzung der Anforderungen wurde bisher noch nicht bekannt gegeben.
Kommst Du dieser Aufforderung wiederholt nicht nach, kann die Behörde bis zur Erfüllung der Anforderungen Deinen elektronischen Geschäftsprozess einstellen. Zudem können Bußgelder von mehreren tausend Euro erhoben werden.
Die Marktaufsichtbehörde kann von selbst auf Deinen Webauftritt und fehlenden barrierefreien Elementen aufmerksam werden. Von Verbraucher:innen können Missstände ebenfalls gemeldet werden. (Quelle: barrierefreiheit-dienstekonsolidierung.bund.de)
Checkliste für barrierefreie Formulare
Bei der Gestaltung barrierefreier Formulare (Formularfelder, Beschriftungen, Steuerelementen etc.) ist es wichtig, klare und verständliche Anweisungen bereitzustellen, um sicherzustellen, dass alle Nutzer:innen den Inhalt des Formulars verstehen können. Grundsätzlich unterscheidet man zwischen inhaltlich-gestalterischen und technischen Hürden bei der Gestaltung von Formularen.
Inhaltlich-gestalterische Herausforderungen:
[ ] Schriften: Sehr häufig werden in Formularen kleine Schriftgrößen verwendet, was zu einer einschränkenden Wahrnehmung für Menschen mit einer Sehschwäche führen kann. Für ein barrierefreies Formular wird empfohlen, eine Mindestschriftgröße von 14 Pixel für Texte zu verwenden. Wenn heller Text auf dunklem Hintergrund zur Anwendung kommt, kannst Du die Schrift um 10 Prozent vergrößern. Überschriften können gerne größer dargestellt werden, um den Unterschied des Inhalts auch grafisch darzustellen und sich abzugrenzen. Dies ist eine gute Richtlinie, um sicherzustellen, dass der Text für die meisten Benutzer:innen leicht lesbar ist. Insbesondere für Menschen mit Sehbeeinträchtigungen oder ältere Menschen, die Schwierigkeiten beim Lesen kleinerer Beschriftungen haben könnten.
Für eine optimale Darstellung auch in der Mobile-Ansicht Deines Formulars solltest Du darauf achten, dass die Schriftgrößen in den einzelnen Elementen skalierbar sind. Somit können Nutzer:innen die Schrift bei Bedarf vergrößern, ohne dass Dein Formular an Lesbarkeit verliert oder einzelne Felder mit Beschriftungen überdeckt werden.
[ ] Schriftarten: Nutze serifenlose Schriften oder feine sowie fette Schriftstärken für die Beschriftung der Formularfelder. Für Menschen mit Sehbehinderungen sind serifenlose Schriftarten gut geeignet. Hervorhebungen durch Fettung einzelner Wörter solltest Du sparsam einsetzen. Die Verwendung von Großbuchstaben erschwert ebenfalls die Lesbarkeit für Personen mit Sehschwäche.
[ ] Texte: Texte helfen dabei, Deinen User:innen durch die Formularfelder eines Formulars zu navigieren. Die Anforderung liegt darin, Nutzer:innen das Ausfüllen der Formularelemente so einfach zu gestalten, dass nur in den seltensten Fällen Nuzer:innen Fehler machen und somit Fehlermeldungen ausgelöst werden. Doch achte darauf, dass Erklärungstexte nicht zu komplex geschrieben sind oder durchgängig Fremdwörter oder Abkürzungen verwenden. Achte auf eine einfache und verständliche Sprache. Vermeide lange und verschachtelte Sätze, um zum Beispiel Legastheniker:innen die Möglichkeit zu geben Dein Formular unmissverständlich ausfüllen zu können.
[ ] Textausrichtung: Für den optimalen Zeilenabstand gilt die Faustregel von 120 Prozent, der von Dir genutzten Schriftgröße in den Beschriftungen der Formularfelder. Der Fließtext sollte aus einer Zeilenlänge von maximal 80 Zeichen pro Element bestehen und linksbündig ausgerichtet werden. Zentrierte oder rechtsbündige Texte solltest Du für Deine Formularfelder, aber auch für andere Elemente, wie z.B. in Dokumenten, vermeiden.
[ ] Farben: Auch kontrastarme Farben sorgen bei Menschen mit einer Sehschwäche für eine Barriere. Achte daher auf die Nutzung kontrastreicher Farben. Um den Anforderungen der EU-Richtlinie nachzukommen, solltest Du ein Kontrastverhältnis von mindestens 4,5: 1 umsetzen. Ob die von Dir verwendeten Farben einen idealen Kontrast haben, kannst Du online mit verschiedenen Kontrastrechnern testen.
Versuche ebenfalls zu vermeiden, Inhalte an Farben zu koppeln. Insbesondere blinde Menschen haben Schwierigkeiten dabei die richtigen Inhalte bzw. Felder in Deinem Formular zu finden. Ein Call-to-Action mit kombinierten Text- und Farbinformation ist für blinde Menschen kaum zu entschlüsseln. Zum Beispiel: „Die rote Schaltfläche links unten klicken“. Diese Aufforderung wird zu einer erhöhten Anzahl an Fehlern bei User:innen führen.
In diesem Beispiel hätten sogar Menschen mit einer Rot-Grün-Sehschwäche Schwierigkeiten, den richtigen CTA auf Anhieb zu finden.
[ ] Videos: Du bindest Videos auf Deiner Website ein, um zu erklären wie Das Formular mit seinen Elementen ausgefüllt werden muss? Prima! Denke bitte auch daran Untertitel für schwerhörige und gehörlose Menschen anzubieten.
[ ] Nachtmodus (Dark Mode): Der dunkle Modus einer Webseite ist nicht nur überaus beliebt, sondern hilft besonders Menschen mit speziellen Augenerkrankungen (z.B. Linsentrübungen) beim Lesen. Die Augen ermüden nicht so schnell und werden bei Sonneneinstrahlung weniger belastet. Der Nachtmodus ist daher eine tolle Option für Deine Webseite, jedoch kein Muss!
Technische Barrieren:
[ ] HTML-Struktur: Baue Deine Webseiten mit einer klaren semantischen HTML-Struktur auf, damit Screenreadern und Braillezeilen die Steuerelemente erfassen können. Diese zwei Hilfsmittel unterstützen blinde Menschen. Sie lesen Texte Deiner Formulare in Form von Audiodateien vor.
Geeignete Tags, wie zum Beispiel <header>, <nav>, <main>, <article>, <section> usw. sollten verwendet werden, um die Strukturelemente der Seite eine Bedeutung zuzuweisen.
[ ] ARIA-Attribute (Accessible Rich Internet Applications): Die ARIA-Attribute helfen unterstützenden Technologien, dynamische Inhalte Deiner Formularelemente genauer zu interpretieren. Verwende ARIA-Landmarken um es Bildschirmleser:innen zu ermöglichen, wichtige Abschnitte Deiner Website, wie Kopf- und Fußzeilen oder Hauptinhaltsbereiche zu identifizieren.
[ ] Alternativtext (Alt-Text): Hinterlege für Deine eingebundenen Medien einen aussagekräftigen Alternativtext. Achte auch darauf, dass die Beschreibung seitenübergreifend konsistent ist. D.h. der Text für ein- und dieselbe Funktion soll in unterschiedlichen Formularen nicht voneinander abweichen. Nur wenn dieser sogenannten ALT-Tag hinterlegt ist, können Hilfsmittel, wie z.B. Screenreader, das Bild beschreiben und richtig interpretieren.
[ ] Mobile-Ansicht: Von Mobile-first haben wir alle schon gehört. Hast Du auch Deine Webseite getestet und geprüft, ob alle Formulare responsive sind oder werden an der ein oder anderen Stelle doch noch Texte abgeschnitten? Wenn Deine Webseite einen alten Technikstand aufweist, ist dieses Problem nicht unüblich. In der heutigen Zeit solltest Du jedoch garantieren, dass alle User:innen Deine Webseite geräteunabhängig besuchen können und es möglich ist, Deine Formulare zu bedienen.
[ ] Eingabefelder: Eingabefelder, wie z.B. Pflichtfelder (Abfrage des Vornamens, Nachnamens und der E-Mail-Adresse) mit vorgegebenen Werten solltest Du textlich kennzeichnen. Im Idealfall nimmst Du diese Informationen in der Beschriftung (z.B. dem LABEL-Element) auf.
[ ] Skalierbarkeit: Wie bereits im Abschnitt der inhaltlich-gestalterischen Herausforderungen angemerkt, spielt das Thema Größenanpassung eine bedeutende Rolle. Hierbei geht es nicht nur um Texte, sondern um sämtliche Elemente Deiner Formulare. Dazu gehören sämtliche Formularelemente: Von der Beschriftung der einzelnen Felder bis hin zur Fehlermeldung.
Bevor Du hinter all diesen Anforderungen ein Häkchen setzt, nutze die Benutzererfahrung von Menschen unterschiedlicher Behinderungen bzw. Einschränkungen. Solche Benutzertests können dazu beitragen, wichtige Zugänglichkeitsprobleme in Deinen Formularen zu identifizieren.
Beispiele für barrierefreie Formulare
Aktion Mensch
Die deutsche Sozialorganisation Aktion Mensch setzt sich stark für die Förderung von Projekten und Maßnahmen für Menschen mit Behinderungen ein. Auch bei ihrer eigenen Webseite werden die Anforderungen zur Barrierefreiheit verfolgt.
Die Aktion Mensch hat sich in der Vergangenheit darauf konzentriert ihre Webseite für Menschen mit verschiedenen Arten von Behinderungen zugänglich zu machen. Dies schließt die Gestaltung von Formularen ein, um sicherzustellen, dass alle Benutzer:innen die Informationen und Dienstleistungen der Aktion Mensch ohne Einschränkungen nutzen können.
Schaue gerne mal auf der Webseite vorbei. Dort findest Du neben Infomaterial zur Umsetzung barrierefreier Webseiten auch Analysen zum Ist-Zustand Deiner jetzigen Webseite. (Quelle: aktion-mensch.de)
Deutsche Bahn AG
Ein Beispiel für ein Unternehmen, welches sich für die Schaffung barrierefreier Webseiten und Formulare schon seit Jahren beschäftigt, ist die Deutsche Bahn AG. Die Deutsche Bahn hat sich selbst schon vor Jahren das Ziel auferlegt, sämtliche digitale Angebote (Download von Dokumenten, Formularelemente, Steuerelemente auf der Webseite) barrierefrei zu gestalten.
Im „4. Programm zur Barrierefreiheit der Deutschen Bahn AG“ (Stand: Mai 2021) positioniert sich die Deutsche Bahn mit ihrem Engagement für Inklusion und Zugänglichkeit nicht nur auf Bahnhöfen. Auf ihrer Webseite will die DB den Zugang zur Buchung von Bahnfahrkarten für alle Reisenden erleichtern. Auch wenn eine Barrierefreiheit der gesamten Webseite noch nicht vollständig gegeben ist, gilt die Deutsche Bahn als Vorbild zur Umsetzung barrierefreier Formulare. (Quelle: 248050-329573.pdf)
Ausblick
Ein Blick auf die gesetzliche Lage verdeutlicht, dass der Staat die Notwendigkeit erkannt hat, digitale Inhalte für alle Benutzer:innen zugänglich zu machen. Hierzu werden Unternehmen in die Verantwortung gezogen. Die langfristigen Anforderungen und weitere Gewinnung an Bedeutung von digitaler Barrierefreiheit sind gegeben. Die Gesellschaft ist in der letzten Vergangenheit sensibler für Fragen der Inklusion und Barrierefreiheit geworden.
Als Marketer:in ergeben sich für Dich folgende potentielle Auswirkungen auf Dein tägliches Business:
- Verbessertes Markenimage und Kundenbindung: Dein Unternehmen, welches sich für die Inklusion digitaler Barrierefreiheit aktiv einsetzt, wird sein Markenimage stärken und das Vertrauen zu Deinen Kunden und Kundinnen stärken. Dein Engagement für den Einsatz von Menschen mit Behinderungen wird positiv die Wahrnehmung Deiner Marke beeinflussen und Dich bei dem Aufbau von langfristigen Kundenbindungen unterstützen.
- Erweiterung der Zielgruppe: Barrierefreie Formulare auf Deiner Webseite oder Deinem Webshop ermöglichen es Dir Deine Reichweite zu erweitern und neue Zielgruppen zu erschließen. Indem Du Deine Inhalte für Jeden zugänglich gestaltest, erweiterst Du Deine potentielle Kundenbasis und identifizierst eine vorher vermutlich nicht berücksichtigte Zielgruppe.
- Differenzierung von Mitbewerbern: Dein frühzeitiges Engagement für die Umsetzung barrierefreier Formulare kann Dich von Deinen Mitbewerbern deutlich abgrenzen. Gewähre Dir einen Vorsprung gegenüber anderen Unternehmen, die die Prinzipien digitaler Inklusion noch nicht berücksichtigen. Scheue nicht davor Fehler bei der Umsetzung der Anforderungen zu machen. Sondern implementiere die Umsetzung einer barrierefreien Webseite in Deiner Strategie: Schritt für Schritt. Verschaffe Dir somit einen wichtigen Wettbewerbsvorteil, indem Du Dich in Deiner Branche für zugängliche Webinhalte und Inklusion positionierst.
- SEO-Optimierung: Auch Suchmaschinen, wie Google & Co. werden zukünftig barrierefreie Webinhalte immer stärker bevorzugen. Du verbesserst somit nicht nur die Sichtbarkeit Deiner Formulare für Menschen mit Behinderungen, sondern erhöhst auch Deine Sichtbarkeit im Netz und generierst mehr Traffic.
- Einhaltung gesetzlicher Richtlinien: Neben den zuvor aufgeführten Vorteilen, wird für viele Unternehmen die Einhaltung von Barrierefreiheitsstandards im kommenden Jahr zur Pflicht. Wenn Dein Unternehmen dazu gehört, dann beugst Du mit der Implementierung barrierefreier Formulare rechtliche Risiken vor und vermeidest finanzielle Strafen, die sich aus Verstößen gegen das Barrierefreiheitsstärkungsgesetz ergeben.
Die Entwicklung zu barrierefreien Formularen wird nicht nur das Nutzererlebnis Deiner User:innen verbessern, sondern auch positive Auswirkungen auf Deine Markenwahrnehmung haben. Ergreife die Chance Deine Reichweite, Reputation und Wettbewerbsfähigkeit Deines Unternehmens zu stärken.
Fazit
Das Barrierefreiheitsstärkungsgesetz beschert dem Thema Inklusion durch Barrierefreiheit im Internet nicht nur eine größere Aufmerksamkeit, sondern setzt konkrete Anforderungen an deutsche Unternehmen vor. Nachdem Webseiten der öffentlichen Verwaltung den ersten Schritt bereits getan haben, werden nun auch Unternehmen in die Pflicht zur Erstellung barrierefreier Webseiten und Formulare genommen.
Die Richtlinien und Vorgaben zur digitalen Barrierefreiheit stellen Dir als Marketer:in eine große Möglichkeit zur Erschließung neuer Zielgruppen, der Stärkung Deines Markenimages sowie einem Wettbewerbsvorteil. Sieh die Schaffung der Barrierefreiheit Deiner Formulare nicht als Hindernis, sondern als Vorteil für alle Menschen. Egal, ob mit oder ohne Einschränkung.
Es liegt an Dir, ob Du Dich schon heute mit der Barrierefreiheit Deiner Webseite beschäftigst und Dich bis spätestens zum Stichtag am 28. Juni 2025 für digitale Inklusion positionierst.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
