Warum jeder Online-Shop barrierefrei sein sollte

Sauber strukturierte, einfach bedienbare Oberflächen und gut lesbare Texte mit starken Farbkontrasten: Barrierefreiheit im E-Commerce ermöglicht etwa Menschen mit Sehbehinderungen oder motorischen Behinderungen einen leichteren Zugang zu Web-Angeboten. Sie alle können eine barrierefrei aufgebaute Website deutlich einfacher verstehen, navigieren und nutzen.

Was aber kaum jemandem bewusst ist: Nicht nur Menschen mit Behinderungen und ältere Menschen profitieren von Maßnahmen der digitalen Barrierefreiheit im E-Commerce. Eine barrierefreie Website ist für alle leichter nutzbar.

Frage dich mal, wie es dir beispielsweise bei den folgenden Situationen ergeht:

• Gelingt es dir, bei blendendem Sonnenlicht deine E-Mails auf dem Handy zu lesen?
• Bist du schon einmal daran gescheitert, betrunken per App ein Taxi zu bestellen?
• Oder hast du schon einmal die Untertitel eines Videos zu schätzen gewusst, weil du es in der Bahn gucken wolltest, ohne andere Personen zu stören?

In Situationen wie diesen hilft die digitale Barrierefreiheit sehr vielen Menschen. Grundsätzlich gibt es daher über die Nutzergruppe von Menschen mit Behinderungen hinaus zwei weitere Gruppen, die direkt von den Maßnahmen profitieren:

• temporär eingeschränkte Menschen, z. B.: Ich habe mir die Hand gebrochen, mit der ich normalerweise die Maus bediene.
• situativ eingeschränkte Menschen, z. B.: Ich habe ein weinendes Baby auf dem Arm und versuche, über die App Abendessen zu bestellen.

Rechtliche Grundlage: Barrierefreiheit für Online-Shops wird Pflicht

Was viele missverstehen: Barrierefreiheit ist kein Service, sondern ein Menschenrecht. Konkret bedeutet dies, dass Unternehmen gesetzlich verpflichtet werden, ihre Websites, Apps, Online-Shops und andere digitale Inhalte im Hinblick auf die Barrierefreiheit zu verbessern. Sie müssen anpassen, was lange versäumt wurde.

In Deutschland legt unter anderem die Barrierefreie-Informationstechnik-Verordnung, die BITV 2.0, die Standards der barrierefreien Gestaltung fest. Diese Verordnung ist nicht neu, sondern wurde in ihrer ersten Form bereits 2002 im Rahmen des Behindertengleichstellungsgesetzes (BGG) umgesetzt.

Sie betrifft die Websites und digitalen Angebote öffentlicher Stellen. Mit dem 2021 erlassenen Barrierefreiheitsstärkungsgesetz (BFSG) als Umsetzung der EU-Richtlinie (European Accessibility Act) ist die digitale Barrierefreiheit in Deutschland auch für Online-Shops und andere Unternehmen verpflichtend. Seit dem 28. Juni 2022 als Stichtag müssen alle größeren E-Commerce-Websites barrierefrei sein. Die letzte Frist für die vollständige Umsetzung ist der Sommer 2025.

Umso wichtiger die Frage: Was bedeutet Barrierefreiheit für Online-Shops konkret?

Es gibt global geltende, festgelegte Standards für barrierefreie Websites – die sogenannten WCAG-Richtlinien (Web Content Accessibility Guidelines).

• A: Diese Stufe der Barrierefreiheit deckt das Mindestmaß ab.
• AA: Diese Stufe behebt die häufigsten Probleme bei der Barrierefreiheit.
• AAA: Diese Stufe entspricht dem höchsten Standard.

Doch müssen wir in allen Bereichen den höchsten Standard der WCAG Konformitätsstufen AAA erfüllen? Die Antwort lautet: Nein, nicht zwingend. Ein Blick auf die rechtliche Lage klärt die vorgeschriebenen Standards und zeigt Ausbaustufen auf, die Unternehmen ganz gezielt vornehmen können.

E-Commerce-Seiten beispielsweise müssen die mittlere WCAG Konformitätsstufe Level AA erreichen – mehr dazu erfährst du in unserem Artikel Barrierefreies Webdesign.

Die WCAG-Richtlinien sind weitverbreitet und haben sich auch auf internationaler Ebene durchgesetzt. Möchte ich beispielsweise meine Websitefarben im Figma Designtool testen, stehen nur Plugins zur Verfügung, die Messungen mit einem Ergebnis liefern, das nach den WCAG-Leveln A-AAA eingestuft ist.

Aufgrund der Internationalität sind aktuell nicht die deutschen BITV 2.0 Richtlinien verpflichtend, sondern es steht einem frei, sich stattdessen an den internationalen WCAG-Richtlinien zu orientieren. Im Grunde ähneln sich die Prüfschritte und Erfolgskriterien von beiden, der Unterschied liegt im Aufbau und der Anzahl an Prüfkriterien. Die BITV 2.0 Anforderungen sind umfangreicher und nicht wie die WCAG 2.0 Kriterien in Level unterteilt.

Customized Javascript Overlays und Web Accessibility Widgets als Lösung?

Gibt es da nicht ein Tool, das wir einbinden können? Die Antwort ist relativ simpel: Leider nein.

Als die ersten Klagen in den USA bei E-Commerce-Unternehmen eintrudelten, war zu beobachten, dass immer mehr Websites sogenannte Web Accessibility Widgets und Plugins in die Seiten implementiert haben. Erkennbar ist dies an einem kleinen Icon. Auf Klick öffnet sich ein Layer, bei dem man etliche Einstellungen vornehmen kann.

Tools wie diese klingen erstmal hilfreich, sie geben vermeintlich endlose Hilfestellungen für Nutzer:innen sowie eine ebenso vermeintliche Sicherheit für Unternehmen. In der Praxis sind die Tools aber keine Lösung.

Wir erklären, warum nicht:

• Sie verursachen mehr Probleme, als sie lösen. So sind sie unter anderem inkompatibel mit einigen Screenreadern.
• Sie geben ARIA-Labels nicht immer korrekt aus.
• Sie stellen keine geeigneten ALT-Texte zur Verfügung.
• Sie ermöglichen nicht unbedingt die Navigation mit der Tastatur.
• Darüber hinaus können Nutzer:innen unzählige visuelle Einstellungen vornehmen, die nichts mehr mit dem ursprünglichen Branding zu tun haben.

Du fragst dich, wie du jetzt deinen Online-Shop barrierefrei gestalten kannst? Statt auf halbherzige Lösungen wie Javascript Overlays oder Web Accessibility Widgets zu setzen, die oft mehr Probleme schaffen, als sie lösen, ist eine saubere Grundstruktur entscheidend, die von Anfang an und von allen Fachbereichen barrierefrei gedacht und aufgebaut ist. Klingt aufwendig? Ist es aber gar nicht. Denn in der Regel geht Barrierefreiheit Hand in Hand mit den üblichen Optimierungen im Hinblick auf SEO, Content-Management sowie Usability und Design-Systeme.

In einer sorgfältig aufgebauten UI-Pattern-Library werden beispielsweise Farbkontraste ohnehin getestet und in einer klar strukturierten Hierarchie verankert. Ebenso werden die unterschiedlichen visuellen Zustände von Komponenten definiert. Die Berücksichtigung von Richtlinien für barrierefreies Design bedeutet hierbei keinen zusätzlichen Aufwand, sondern wird von Anfang an im Prozess integriert.

Ähnlich verhält es sich bei der Navigation eines Online-Shops: Sie sollte so einfach wie möglich sein, was sich beinahe vollständig mit den Anforderungen an eine klassische Usability- Optimierung deckt. Ein Beispiel dafür ist das UX-Writing für Linktexte: Für Screenreader müssen diese klar beschreiben, wohin der Link führt, damit sich blinde Nutzer:innen gut zurechtfinden. Der beliebte Text "Mehr erfahren" ist hier nicht hilfreich, was auch den Usability-Empfehlungen für eine intuitive Bedienbarkeit entspricht.

Das bedeutet: Barrierefreiheit bringt nicht nur einen gesellschaftlichen Mehrwert, sondern hilft auch, deine Website insgesamt zu optimieren.

Es spart Aufwand (und damit Kosten), Barrierefreiheit direkt von Anfang an zu integrieren. Deshalb entwickeln wir bei Moccu neue Websites und Apps direkt barrierefrei – unter Berücksichtigung des jeweils empfohlenen A- bis AAA-Levels.

Weitere Informationen und eine Sammlung von Best Practices findest du auch in unserem Artikel Barrierefreies Webdesign.

Praxisbeispiele: Erfolgreiche Umsetzung von Barrierefreiheit in Online-Shops

Hier sind einige Praxisbeispiele, die häufig bei der Gestaltung von Online-Shops zum Einsatz kommen. Sie zeigen, wie bestimmte Elemente angepasst werden, um den Anforderungen an Barrierefreiheit gerecht zu werden:

• Das rechtliche Risiko für dein Unternehmen wird minimiert.
• Die Marktreichweite wird vergrößert.
• Deine Marke wird positiver positioniert und somit der Wert gesteigert.
• Doch was noch viel wichtiger ist: Barrierefreie digitale Anwendungen im E-Commerce sind unverzichtbar für eine gelebte inklusive Unternehmenskultur.

Wir müssen es uns zum Ziel setzen, Inhalte und Services allen Nutzer:innen zugänglich zu machen – und bei unserer Arbeit Akzeptanz, gesellschaftliche Vielfalt und Gleichberechtigung zu fördern. Das Beste daran? Barrierefreiheit schafft eine klassische Win-win-Situation: Deine Kund:innen profitieren von einer verbesserten Benutzererfahrung, und du profitierst von einer stärkeren Kundenbindung, einem erweiterten Marktpotenzial und einer positiven Markenwahrnehmung.