Branchenmonat Spezial – Barrierefreiheit im E-Commerce

Das Barrierefreiheitsgesetz (BaFG) verpflichtet Hersteller, Händler und Importeure bestimmter Produkte sowie Anbieter spezifischer Dienstleistungen, ihre Angebote barrierefrei zu gestalten.

Dies betrifft insbesondere digitale Plattformen und Geräte, die im täglichen Leben weit verbreitet sind, wie Web-Shops, Apps und elektronische Kommunikationsdienste. Ziel ist es, sicherzustellen, dass alle Menschen, unabhängig von etwaigen Behinderungen, Zugang zu diesen Technologien haben.

Eine Ausnahme bilden Kleinstunternehmen mit weniger als 10 Mitarbeitern und einem Jahresumsatz oder einer Jahresbilanzsumme von maximal 2 Millionen Euro, die von diesen Anforderungen befreit sind.

Besonders relevant für E-Commerce:

• Web-Shops und Apps
• Hotel- und Reiseportale
• Online-Termin-Buchungs-Tools
• Verlage mit digitalen Publikationen
• Webseiten für digitale Mitgliedschaften und Abonnements

„Barrierefreiheit ist für 10% der Menschen unerlässlich, für 30% notwendig und für 100% nützlich“ – Anne-Marie Nebe

Der European Accessibitlity Act im neuen Barrierefreiheitsgesetz (BaFG) besagt, dass mit 29. Juni 2025 Webshops verpflichtet sind, (digital) barrierefrei zugänglich zu sein.

Wir klären die wichtigsten Fragen:

• Wen betrifft die digitale Barrierefreiheit und das dazugehörige Gesetz?
• Wie kann die digitale Barrierefreiheit umgesetzt werden?
• Warum ist das neue Gesetz eine Chance für Deinen Webshop?

Wie immer – wir klären erstmal die Basics der digitalen Barrierefreiheit.

Die vier Prinzipien der digitalen Barrierefreiheit sind:

• Wahrnehmbar: Die Inhalte Deiner Website oder App müssen für die Nutzer:innen wahrnehmbar sein. Wenn man also überlegt, welche Sinne beeinträchtigt sind, muss dafür eine Lösung gefunden werden. Bei Menschen mit Sehbehinderung ist es zum Beispiel der Alternativtext in Bildern.
• Bedienbar: Die Nutzer:innen müssen die Webseite bzw. Deinen Shop bedienen können. Zum Beispiel muss die Navigation und Bedienung ohne Computermaus und nur mit der Tastatur möglich sein.
• Verständlich: Die Information und Bedienung Deiner Website oder App müssen für die Nutzer:innen verständlich sein. Hier kann man sich also komplexe literarische Erzählungen, sowie „lustige“ Wortspiele auf Buttons sparen und sehr pragmatisch und einfach schreiben, was Sache ist.
  • Bsp.: Ein Button der zum Shop leitet, darf auch mit „Zum Shop“ beschrieben werden und soll bitte nicht mit „Zu Ihrem einmaligem Einkaufserlebnis“ betitelt werden.
• Robust: Die Inhalte müssen von unterschiedlichen User Agents – also der Schnittstelle von User und Technik (z. B. Webbrowser, Screenreader, Spielkonsolen etc.) interpretiert werden können.

Diese Prinzipien der digitalen Barrierefreiheit werden jeweils in drei Level unterteilt

• Level A: Level A ist das niedrigste Level der digitalen Barrierefreiheit – also absolut basic. Technologien, die als Assistenz dienen – wie Screenreader–, wird die Navigation durch den Shop/ die Webseite, sowie die Darstellung der Inhalte erleichtert.
  • Beispiel für Level A: Wenn automatisch eine Audiodatei abgespielt wird, die länger als 3 Sekunden läuft, soll es eine Möglichkeit geben, diese Audiodatei zu stoppen.
    (Und jetzt ganz ehrlich – die Möglichkeit, random Musik auf einer Webseite zu stoppen, will doch wirklich jede:r von uns, oder?)
• Level AA: Das zweite Level der digitalen Barrierefreiheit ist das Level AA. Auf dieser Stufe erhalten noch mehr Personen Zugang zur Seite. Die Themen Farbkontrast und Fehleridentifikation werden verstärkt thematisiert. Das Level AA ist das empfohlene Mindestmaß an Barrierefreiheit.
  • Beispiel für Level AA: Das empfohlene Kontrastverhältnis (minimum) liegt bei 4,5:1. Wir haben Beispiele für unterschiedliche Verhältnisse vorbereitet:
    Auch hier wird unserer Meinung nach sehr deutlich, dass digitale Barrierefreiheit das Online-Erlebnis für ALLE angenehmer macht.

• Level AAA: Die König:innen-Klasse! Das höchste Level AAA soll die Zugänglichkeit für möglichst viele Personen ermöglichen. Hier ist vor allem eine regelmäßige Optimierung und Pflege seitens der Webseiten-/Shop-Betreiber:innen notwendig.
• • Beispiel für Level AAA: Das Kontrastverhältnis erhöht sich nochmal auf 7:1 (minimum!). Außerdem gibt es hier Mechanismen, die den User:innen erlauben, Einstellungen wie Schriftgröße, Farben und ähnliches individuell zu verändern (eine vorbildliche Umsetzung findet man z.B. bei https://www.capito.eu/).

Alle diese Infos wurden hier ansprechend visualisiert: https://intopia.digital/wp-content/uploads/2023/10/Intopia-WCAG-2.2-Map-Portrait-Mode.pdf

Weitere Links zu den Guidelines etc. findest Du am Ende der Seite.

Was bedeutet digitale Barrierefreiheit im E-Commerce?

Im Grunde treffen alle Richtlinien auch auf E-Commerce zu. Im Gegensatz zu beispielsweise reinen Blogs gibt es im E-Commerce aber noch Buchungsprozesse oder Zahlungsfunktionen und auch diese müssen barrierefrei sein.

Die Pflichten:

• Wenn das Gesetz auf Dein Unternehmen anwendbar ist, musst Du so bald wie möglich mit der Umsetzung beginnen. Juni 2025 wirkt noch weit weg, aber wenn es zu größeren Umbauarbeiten in Deinem Shop kommt, braucht es dafür Zeit und Ressourcen.
• Du brauchst unbedingt eine Barrierefreiheitserklärung.
  • Eine Vorlage für den Text findest du hier!

Bei Nicht-Umsetzung kommt es zu Geldstrafen in Höhe von bis zu € 80.000.

Unternehmen mit weniger als 10 Mitarbeitenden und einem Jahresumsatz von unter € 2 Mio. sind vom Barrierefreiheitsgesetz nicht betroffen. Die Umsetzung der Richtlinien bringt kleinen Unternehmen aber genauso viel, wie großen Unternehmen.

Die Chancen:

• Da sich die digitale Barrierefreiheit – wie oben demonstriert – auch auf die User Experience auswirkt, stärkt eine barrierefreie Webseite auch Dein Ranking bei Google und führt so zu bis zu 50% mehr organischem Traffic.

• Ein lang bekannter Fakt ist auch, dass eine gut überlegte UX-Strategie zu weniger Missverständnissen führt und somit Supportkosten senken kann.
• Aus E-Commerce-Sicht ist ein einfacher Kaufprozess überlebensnotwendig – je einfacher der Prozess, desto mehr Abschlüsse gibt es. Wenn die Kaufinteressierten den Warenkorb nicht finden können, oder ihnen der Zahlungsvorgang Kopfschmerzen bereitet, wird sich das auf die Verkaufszahlen auswirken. Im Umkehrschluss kann ich einen Vorsprung erreichen, wenn mein Shop besser zugänglich ist, als der meiner Konkurrenz.

„Ein Umfeld mit barrierefreien Produkten und Dienstleistungen ist eine wesentliche Voraussetzung für eine inklusive Gesellschaft, die niemanden vom beruflichen und sozialen Leben ausschließt.“ – European Accessibility Act – EAA, 2023

Die Umsetzung:

Ein gesamtes Audit und eine Überarbeitung ist sehr viel mehr als wir in diesem Rahmen beschreiben können, aber wir haben ein paar wichtige Tipps zusammengefasst.

1. Seiten-Titel: Der Titel der Seite sollte klar und präzise sein, damit Nutzer:innen sofort wissen, worum es geht.
Am besten öffnest Du mehrere Seiten und vergleichst die Titel in den Tabs. Wenn es Unklarheiten gibt, welcher Tab wohin führt, ist das ein Problem.

2. Alternativtexte für Grafiken: Bilder brauchen klare Beschreibungen, damit sie für alle zugänglich sind. Überprüfe diese Texte. Unter dem Punkt „Wahrnehmbarkeit“ am Beginn des Textes findest Du einen Link zur Erklärung von Alternativtexten.

3. Schaltflächen: Buttons und Links sollten klar zeigen, was passiert, wenn man sie anklickt, und per Tastatur bedienbar sein. Wichtig ist, dass sie gut erkennbar sind.

4. Icons: Icons sollten immer erklärt werden, wenn ihre Bedeutung nicht offensichtlich ist. Ergänze sie am besten mit einem kurzen Text. (Ein Icon mit einer Sonne kann entweder zu Helligkeits-/Kontrast Einstellungen führen, oder die gesamte Seite in einen dunkel-Modus bringen. Oder auch was über die KW-Zahl von Photovoltaikanlagen Aussagen. Better be safe than sorry und schreib dazu, was hier passiert).

5. Formulare: Formulare sollten direktes Feedback zu Eingaben geben und leicht per Tastatur ausfüllbar sein. Hinweise wie Farben und Symbole helfen bei der Orientierung.

6. Design & Farben: Verwende gut sichtbare Farben und Schriften. Siehe „Drei Level der Prinzipien der digitalen Barrierefreiheit“.

7. Navigation: Halte die Navigation einfach und klar strukturiert. Nutze Filter und Hilfsfunktionen, um die Produktsuche zu erleichtern.

• Einfache Checkliste -> https://www.mstage.at/fileadmin/user_upload/Checkliste_Barrierefreiheit_fuer_Onlineshops.pdf

„Barrierefreiheit ist nicht nur eine Frage der Technik oder des Designs – es ist ein Grundrecht.“ – Michael Apostol

Tools zum Testen der digitalen Barrierefreiheit

Es gibt zwei relativ einfache und schnelle Tools, wenn Du ein gesamtes Audit fürs Erste vermeiden möchtest. Diese Tools sind dazu gedacht, Dir einen Überblick zu geben, wo noch Aufholbedarf ist:

Tool 1: Accessibilty Web Helper (kann auch Kontrastverhältnisse checken)

Tool 2: Browserstack Accesibility Toolkit

Tool 3: Evaluations Tool (inkl. Screenreader-Testung)

Tool 4: Alt-Text Generator von Ahref (bitte mit Vorsicht genießen, das Tool ist noch nicht ausgereift!)

Weiterführende Links:

https://www.behindertenrat.at/gleichbehandlung-und-nicht-diskriminierung/grundlagen/european-accessibility-act/

https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-website