Wie muss der barrierefreie Online-Shop aussehen?

Obwohl es bis Mitte 2025 scheinbar noch viel Zeit ist, müssen sich Verantwortliche langsam aber sicher mit dem Thema Barrierefreiheit auseinandersetzen. Denn: Eine komplette Webseite umzugestalten, ist nicht über Nacht möglich. Daher sollte man sich schon jetzt mit den neuen Anforderungen vertraut machen.

Was verlangt das Gesetz für eine ausreichende Barrierefreiheit?

Fallen ein Produkt oder eine Dienstleistung unter das BFSG (darüber lässt sich alles Wissenswerte im ersten Teil unserer Themenreihe nachlesen), muss es, wie nicht anders zu erwarten, barrierefrei sein. Doch was heißt das konkret?

Zumindest hat der Gesetzgeber hier schon einmal vorgearbeitet und die konkreten Anforderungen an die Barrierefreiheit für Produkte und Dienstleistungen in einer gesonderten Verordnung sowie in internationalen Standards festgehalten, u. a. in

• der Verordnung zum Barrierefreiheitsstärkungsgesetz (BFSG-VO),
• den Web Content Accessibility Guidelines (WCAG) oder 
• der EN 301 549.

Produkte und Dienstleistungen sind barrierefrei, wenn sie für Menschen mit Behinderungen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe auffindbar, zugänglich und nutzbar sind. Online-Shops müssen zusammengefasst auf angemessene Weise wahrnehmbar, bedienbar, verständlich und robust ausgestaltet sein sowie auf die Bedürfnisse von Menschen mit Behinderungen ausgerichtet werden. Die sogenannten WCAG-Standards konkretisieren die Anforderungen noch einmal und erfordern im Wesentlichen vier Grundprinzipien:

1. Wahrnehmbarkeit
   Inhalte müssen für mindestens zwei Sinne zugänglich gemacht werden (z. B. durch Alt-Texte für Bilder und Untertitel für Videos), damit Informationen wahrnehmbar sind, egal welche Einschränkungen die jeweilige Person hat (sogenanntes Zwei-Kanal-Prinzip, z. B. Informationen hör- UND sichtbar machen).
2. Bedienbarkeit
   Benutzeroberflächen und Navigation müssen so gestaltet sein, dass sie mit verschiedenen Eingabemethoden genutzt werden können (z. B. per Tastatursteuerung, Screenreader, Sprachbefehl usw.).
3. Verständlichkeit
   Informationen, Benutzeroberflächen und Bedienung müssen klar und einfach sein, z. B. durch verständliche Sprache und vorhersehbares Verhalten von Bedienelementen.
4. Robustheit
   Inhalte müssen so entwickelt werden, dass sie auch mit unterschiedlichen Technologien und Assistenzsystemen kompatibel sind, um eine langfristige und flexible Zugänglichkeit sicherzustellen.

Weil das Gesetz in allen Fällen entweder ziemlich sperrig und/oder lang formuliert ist (die vier WCAG-Grundprinzipien werden beispielsweise noch einmal in 86 Unterkriterien unterteilt), sehen wir uns gleich die wichtigsten Punkte im Detail an. Zuvor machen wir nur noch einen kleinen Exkurs dazu, welche Teile der Webseite überhaupt betroffen sind.

Die barrierefreie Gestaltung des Shops – Welche Bereiche sind betroffen?

Fällt ein Unternehmen unter die Vorschriften des BFSG und kann keine Ausnahme oder Sonderregelung für sich beanspruchen (siehe Teil 1), müssen folgende Teile der Webseite bzw. Services barrierefrei gestaltet werden:

• Die gesamte Customer Journey des B2C-Shops muss barrierefrei sein: vom Einstieg auf eine Website (z. B. Cookie-Banner) bis hin zum Abschluss des Vertrages (Check-out) und der weiteren Bereitstellung von Informationen (z. B. Bestellbestätigungs-Mails, Kundenkonten insbesondere bei Laufzeitverträgen).
• In diesem Zusammenhang müssen alle für den Kauf relevanten Dienste und Funktionen, die auf Webseiten bereitgestellt werden, die Barrierefreiheitsanforderungen erfüllen. Dazu gehören Identifizierungs-, Authentifizierungs-, Sicherheits- und Zahlungsfunktionen und -methoden, elektronische Signaturen und Zahlungsdienste, welche Webseiten selbstständig oder im Rahmen von Dienstleistungen anbieten (z. B. Kontaktformulare, Chat-Systeme, Zahlungs-Checkout wie PayPal).
• Empfehlung: Auch Newsletter sollten barrierefrei gestaltet sein, da deren Ziel der Abschluss eines Verbrauchervertrages ist. Das Gleiche gilt für Präsentationsseiten mit Kontaktformular oder Chatbots.

Checkliste und praxisrelevante Fehlerquellen

Allgemeines

• Nutzung mit assistiven Technologien muss ermöglicht werden

Gestaltung und Design

• Ausreichender Kontrast zwischen Vorder- und Hintergrundfarbe (z. B. keine weiße Schrift auf hellblauem Hintergrund)
• Gut lesbare Schriftart, die sich auf mindestens 200 Prozent vergrößern lässt, ausreichend Abstand besitzt und mit Absätzen versehen ist
• Ausreichend große und gut wahrnehmbare Links, Schaltflächen, Formulare, Buttons und Eingabefelder, die ausführlich und verständlich beschriftet sind (z. B. „Weiter zum Warenkorb” statt nur „Weiter”)
• Sämtliche Texte sollten verständlich, nachvollziehbar, klar strukturiert, sprachlich korrekt und sauber geschrieben sein und idealerweise Inhalte in leichter Sprache beinhalten sowie auf Fremdwörter verzichten, da so gewährleistet wird, dass diese von Menschen mit schlechten Deutschkenntnissen ebenso wie von Personen mit einer Lese-Rechtschreibschwäche gut verstanden werden zu können. 
• Für die Sprachausgabe des Inhalts müssen sprechende, klare und gut verständliche Alternativtexte vorhanden sein, z. B. für Bilder, Videos und Text-Banner, insbesondere eine beschriftete Bildauswahl, z. B. bei Textilien oder für Texte auf Bildern/Bannern wie Rabattcodes, da diese ansonsten nicht wahrgenommen werden/nicht ausgelesen werden können.
• Informationen sollten nicht nur über Farben transportiert werden (z. B. „Bitte korrigieren Sie das rot markierte Feld“, da dies nicht erkennbar ist für Menschen mit einer Rot-Grün-Schwäche, stattdessen „Bitte korrigieren Sie das Feld ‚Telefonnummer‘”
• Bei Fehlermeldungen sollte der Fehler klar benannt werden und mit der Aufforderung versehen werden, was konkret zur Fehlerbehebung zu tun ist (z. B. „Bitte geben Sie eine gültige Postleitzahl bestehend aus fünf Ziffern an”)
• Verzicht auf Emojis, Abkürzungen und Sonderzeichen, da diese nur umständlich ausgelesen werden können

Aufbau der Webseite

• Intuitive und übersichtliche Navigation, die mit der Tastatur bedienbar ist (insbesondere Formularfelder und Schaltflächen sind mit den Tab-Tasten erreichbar und steuerbar), z. B. ein leicht bedienbarer und verständlicher Check-out
• Eine korrekte Hierarchie der Überschriften ist essenziell (z. B. H1–H6), damit Screenreader-Nutzende anhand der Überschriften-Struktur sinnvoll navigieren können
• Struktur und Orientierung muss im Fokus stehen, damit Besucherinnen und Besucher genau wissen, wo sie sich gerade auf der Webseite befinden.
• Maximal sieben Untermenü-Punkte, um die Übersichtlichkeit zu wahren
• Autofill sollte angeboten werden, welches z. B. die Adresseingabe erleichtert
• Im Quellcode sollten Links, Formulare, Buttons und Eingabefelder so ausgezeichnet sein, dass sie zum einen auch durch Screenreader korrekt erkannt und ausgegeben und zum anderen über die Tastatur problemlos und auf sinnvolle Art und Weise angesteuert werden können.
• Verzicht auf PDF-Dateien, da diese selten auslesbar sind

Sonstige interaktive Elemente

• Keine vorgeschalteten Captchas (= Bilderrätsel), die z. B. für Blinde und Sehbehinderte nicht lösbar sind
• Barrierefreie Interaktion mit Cookie-Meldungen muss ermöglicht werden, die beispielsweise mit der Tastatur bedienbar sind.
• Auch Overlays (= Formulare, die den Hintergrund ausgrauen) sind von einigen Menschen mit Behinderungen nicht bedienbar oder je nach Hilfssoftware gar nicht erreichbar und sollten vermieden werden.
• Selbststartende Inhalte (z. B. Videos, Audios) sollten vermieden werden, da sie die Sprachausgabe stören, mit der Tastatur nicht bedient werden können und von Menschen mit Erkrankungen wie Epilepsie als unangenehm empfunden werden.
• Sonstige Elemente und Animationen müssen pausierbar sein und bei Bedarf ausgeblendet werden können.
• Videos sollten nicht nur transkribiert werden, sondern auch mit weiteren Informationen so bildhaft wie möglich beschrieben werden (z. B. Vorstellung der sprechenden Person, Kontext, Gestaltung, Zusatzinformationen).
• Bei Pop-ups, so sie nicht vermieden werden können, den Fokus auf „Schließen” oder  „Akzeptieren” setzen.

Sonstiges

• Verzicht auf Diskriminierung und abwertende Sprache
• Auswahlmöglichkeit des dritten Geschlechts

Dies sind nur einige der erforderlichen Anforderungen für Entwicklerinnen und Entwickler sowie Content-Erstellerinnen und -Ersteller. Alleine diese Aufzählung beweist, dass die Umsetzung der Anforderungen nicht mit einem Fingerschnippen erledigt ist. Hinzu kommt, dass stets der aktuelle Stand der Technik zu beachten ist. Die Bundesfachstelle für Barrierefreiheit wird weiterhin auf ihrer Website eine Auflistung der wichtigsten zu beachtenden Standards veröffentlichen, die weit über das Jahr 2025 hinaus erweitert werden.

Wie man das Ganze auf die Beine stellen kann, welchen Support eine Shopsoftware bieten kann und was die Marktplätze vorbereiten werden, schauen wir uns im kommenden Teil der Themenreihe an. Einen ausführlichen Guide zur Umsetzung hat zudem die Bundesfachstelle Barrierefreiheit zusammengestellt. Begleitet wird das Material durch eine Video-Reihe, die unter anderem den Aufbau eines barrierefreien Shops im Detail erläutert. Für Eilige gibt es auch ein Handout zum schnellen Nachlesen.

Fazit

Vermutlich sind die meisten von uns schon einmal an die eigenen Grenzen gestoßen. Sei es das Pflichtfeld mit der Telefonnummer, das die Eingabe einfach nicht akzeptieren will, oder die vergebliche Kontrolle der Produktmerkmale auf der Check-out-Seite, die die Frage offen lässt wie „Bestelle ich jetzt wirklich das T-Shirt in Schwarz, obwohl hier das Produktfoto der weißen Variante angezeigt wird?” – von unzähligen Bannern und lästigen Pop-ups, z. B. auf dem Smartphone, einmal ganz zu schweigen.

All diese und noch unzählige andere Gründe führten dazu, dass man den Kauf mehr oder weniger genervt abgebrochen hat. Man stelle sich einmal vor, wie es einer Person geht, die mit Einschränkungen zu kämpfen hat, also beispielsweise keine Maus benutzen kann oder sich den gesamten Check-out-Prozess vorlesen lassen muss.

Verantwortliche im E-Commerce stehen zweifellos vor neuen Herausforderungen durch die steigenden Anforderungen an die Barrierefreiheit. Der zusätzliche Aufwand mag verständlicherweise abschreckend wirken, doch die Investition zahlt sich aus. Barrierefreie Online-Shops öffnen nicht nur Menschen mit Behinderungen den Zugang, sondern erweitern auch die potenzielle Kundschaft. Zudem verbessert eine nutzerfreundlichere Gestaltung die allgemeine User-Experience, was sich in höheren Konversionsraten und einer stärkeren Kundenbindung widerspiegeln kann. Langfristig zahlt sich Barrierefreiheit also nicht nur ethisch, sondern auch wirtschaftlich aus.

Alles, was man zur Barrierefreiheit wissen muss

Wir haben uns dem Thema Barrierefreiheit in unserer Themenreihe bereits aus vielen Blickwinkeln und umfassend gewidmet:

1. Muss meine Webseite bald barrierefrei sein?
2. Praxis: Wie setze ich die Barrierefreiheitsanforderungen um?
3. Barrierefreier Online-Shop: Diese Hürden stellen sich im Alltag (Interview)
4. Das sind die neuen Anforderungen an barrierefreie Produkte
5. Erweiterte Rechtstexte und neue Informationspflichten
6. Was droht, wenn die Barrierefreiheitsanforderungen nicht umgesetzt werden?
7. Checkliste zur Vorbereitung auf den 28. Juni
8. FAQ zur Barrierefreiheit: Alles, was du wissen musst

Weitere Informationen rund um die Barrierefreiheit findest du auf unserer Themenseite Barrierefreiheit.

Artikelbild: http://www.depositphotos.com