Warum Barrierefreiheit für Unternehmen mit Online-Shop auf die Agenda gehört

Die Barrierefreiheit eines Online-Shops oder einer Website wird noch immer als Service für eine Minderheit angesehen. Wir schauen uns diese falsche Annahme genauer an und widmen uns den Fragen, was als barrierefrei im Internet gilt und wie man dies erfolgreich umsetzt.

Kathrin Köhler Experience Design Director (UI)
09.06.2023 10 min Lesezeit

Inhaltsverzeichnis

  1. Barrierefreiheit macht eine Website zugänglich für alle
  2. Tatsächliche Größe der Nutzergruppe
  3. Rechtliche Grundlage
  4. Die WCAG Konformitätsstufen
  5. Rechtliches für Online-Shops: BITV 2.0 vs. WCAG 2.0
  6. Warum Accessibility Widgets keine Lösung sind
  7. So gelingt die barrierefreie Website
  8. Unsere Vorgehensweise
  9. Vorteile von barrierefreien Online-Shops für Unternehmen

Websites, die niemanden ausschließen, dank Barrierefreiheit.

Die Barrierefreiheit einer Website ermöglicht Menschen mit Behinderungen, wie etwa mit einer Sinnes- oder Körperbehinderung, einen leichteren Zugang zu Web-Angeboten. Dies wird unter anderem durch eine saubere Struktur, einfach bedienbare Oberflächen und gut lesbare Texte mit starken Farbkontrasten gewährleistet.

Es ist aber vielen nicht bewusst, dass nicht nur Menschen mit Behinderungen und Nutzer:innen eines höheren Alters von den digitalen Barrierefreiheitsmaßnahmen profitieren. Eine barrierefreie Website ist für jede:n User:in leichter zu bedienen und einfacher zu erfassen. Man spricht hier von zwei weiteren Nutzergruppen.

Die erste sind temporär eingeschränkte Menschen: Versetze dich z.B. einmal in die Lage, dass ausgerechnet die Hand gebrochen ist, mit der du normalerweise die Maus bedienst.

Die zweite Gruppe sind situativ eingeschränkte Menschen:

  • Hast du z.B. schon einmal versucht, betrunken per App ein Taxi zu bestellen?
  • Oder bei blendendem Sonnenlicht deine E-Mails auf dem Handy zu lesen?
  • Ebenso schwierig ist es, mit einem weinenden Baby auf einem Arm über die Online-Apotheke Medikamente zu bestellen.
Übersicht über mögliche Nutzergruppen barrierefreier Webseiten, welche im Microsoft Inclusive Design Toolkit illustriert sind: https://inclusive.microsoft.design/

Die tatsächliche Nutzergruppen-Größe eines barrierefreien Internets

Die Anzahl derjenigen, die von der Barrierefreiheit eines Online-Shops bzw. einer Website profitieren, ist somit weit höher als die Gruppe an Menschen mit Behinderungen. Aber auch diese Gruppe für sich allein genommen ist keine echte Minderheit, bedenkt man, dass es laut globalem Bericht der WHO und der Weltbank in New York weltweit mehr als 1 Milliarde Menschen mit Behinderungen gibt. In Deutschland leben laut Statistischem Bundesamt 7,8 Millionen Menschen mit einer Schwerbehinderung. Größenordnungen wie diese machen deutlich, dass die Gruppe an Menschen, die auf leicht und intuitiv zu bedienende Websites und Online-Shops angewiesen sind, statistisch gar nicht so klein ist. Eine nicht zu ignorierende Kaufkraft, die man ausschließt, wenn ein digitales Angebot nicht barrierefrei ist.

Barrierefreiheit für Online-Shops wird Pflicht

Was viele missverstehen, ist, dass Barrierefreiheit kein Service ist, sondern ein Menschenrecht. Man schließt nicht nur Menschen von Produkten und digitalen Services aus, sondern diskriminiert sie und exakt aus diesem Grund wird dieses Recht Schritt für Schritt in der Gesetzgebung verankert. Konkret bedeutet dies, dass Unternehmen gesetzlich verpflichtet werden, ihre digitalen Angebote im Hinblick auf die Barrierefreiheit zu optimieren. Sie müssen anpassen, was lange versäumt wurde.

In Deutschland legte bisher u. a. die „Verordnung zur Schaffung barrierefreier Informationstechnik“, die BITV 2.0, die Standards der barrierefreien Gestaltung fest. Rechtlich betrifft sie allerdings vor allem Websites von öffentlichen Stellen. Mit dem 2021 erlassenen Barrierefreiheitsstärkungsgesetz (BFSG) als Umsetzung der EU-Richtlinie (European Accessibility Act) ist nun auch die digitale Barrierefreiheit in Europa unter anderem für Online-Shops, öffentliche Transportmittel und Kommunikationsdienste 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.

Dieses europäische Gesetz muss noch in die jeweiligen Landesgesetze überführt werden und Deutschland war 2022 eines der EU-Länder, die abgemahnt wurden, da man dieses nicht fristgerecht umgesetzt hat. Aufgrund der Internationalität sind aktuell nicht die deutsche 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 Leveln unterteilt.

In anderen Ländern, wie z.B. Norwegen ist man heute, Stand Frühjahr 2023, einen großen Schritt weiter als in Deutschland. Hier müssen sowohl öffentliche als auch private Websites barrierefrei sein. Ist dies nicht der Fall, gilt es als rechtswidrig und es folgen hohe Geldstrafen. Auch in den USA nehmen die Klagen deutlich zu, denn hier ist ebenso gesetzlich verankert, dass Menschen mit Behinderungen auf eine Website zugreifen können müssen. Umso wichtiger die Frage: Was bedeutet Barrierefreiheit für Online-Shops und Websites konkret?

Richtlinien und Prüfkriterien für barrierefreie Webseiten auf einen Blick

Es gibt definierte Standards für barrierefreie Websites, die global gelten – die sogenannten WCAG-Richtlinien (Web Content Accessibility Guidelines). Diese sind von dem W3C Gremium (World Wide Web Consortium) erstellt worden und per Definition in vier Grundprinzipien unterteilt:

1. Wahrnehmbar
Die Informationen einer Website müssen für alle Nutzer:innen wahrnehmbar sein – ungeachtet davon, ob jemand blind oder farbenblind, taub oder schwerhörig ist.

2. Bedienbar
Die Website sollte für alle Nutzer:innen bedienbar sein, auch für die Nutzergruppen, die auf Assistive Technology angewiesen sind. Das beinhaltet sowohl eine klare Struktur als auch, dass die Website allein nur mit der Keyboard-Tastatur navigierbar ist.

3. Verständlich
Informationen müssen einfach verständlich und die Bedienbarkeit muss intuitiv und simpel sein.

4. Robust
Die Website muss technisch reibungslos funktionieren und den neuesten Standards entsprechen. Es muss gewährleistet sein, dass alle gängigen Devices die Website interpretieren können und dass Assistive Technologie, wie z. B. Screenreader, die Inhalte korrekt und verständlich wiedergeben können.

Für jedes dieser Prinzipien sind Richtlinien mit sogenannten Erfolgskriterien vorgesehen. Diese wiederum werden in drei Konformitätsstufen eingeteilt, die sogenannten Level A, AA und AAA. Zu beachten ist, dass die Level additiv funktionieren. Das heißt, für z. B. Level AA muss man auch die Kriterien von Level A erfüllen. Für Level AAA die von A, AA und AAA.

Für Sie relevant?

Die WCAG Konformitätsstufen von Standard bis Premium

Die drei Konformitätsstufen gelten für jeden Baustein einer Website. Wir erklären die Einstufungen anhand von Beispiel-Kriterien bei der Einbindung von Video und Audio.

A
Diese Stufe der Barrierefreiheit deckt den WCAG Standard und somit das Mindestmaß ab.

  • Es müssen Untertitel oder ein Transkript hinterlegt sein
  • Video und Audio Files, sowie Animationen und automatische Slider mit Bewegungen über 5 Sekunden müssen anhand einer Pause-Taste steuerbar sein

AA
Diese Stufe behebt die häufigsten Barrierefreiheit-Probleme. Sie ist ab 2025 in Europa laut Gesetz für Public Transportation und E-Commerce Websites vorgeschrieben.

  • Zusätzlich zu den Kriterien von Level A muss sichergestellt werden, dass der Kontrast von Fließtext und Bildern zum Hintergrund mindestens 4,5 zu 1 sein soll. Dies betrifft u. a. sowohl einleitende Texte auf der Website, als auch Untertitel innerhalb des Videos selbst

AAA
Diese Stufe entspricht dem höchsten Standard.

  • Hier gilt zusätzlich zu den Kriterien von Level A und AA, dass die Gebärdensprache in Videos integriert werden muss
  • Auch Versionen von leichter Sprache müssen zur Verfügung stehen

Rechtliche Lage für Barrierefreiheit für Online-Shops

Müssen wir nun in allen Bereichen die Akzeptanzkriterien für Level AAA erfüllen? Die Antwort lautet: Nein, nicht wenn man dies nicht möchte. 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 WCAG Konformitätsstufe Level AA erreichen. Dies betrifft alle vier Grundprinzipien und somit auch alle Bereiche einer Website.

Wie bereits erwähnt, steht es einem frei, sich an die BITV 2.0 Richtlinien zu halten. Es hat sich für uns allerdings bewährt, mit den WCAG 2.0 Richtlinien zu arbeiten. Sie sind weiter verbreitet 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 ausspucken, das nach den WCAG Leveln A-AAA eingestuft ist.

Übersicht der Überschneidung von WCAG und BITV Anforderungen

Sind Customized Javascript Overlays und Web Accessibility Widgets eine Lösung?

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

Tatsächlich war, als die ersten Klagen in den USA bei E-Commerce-Unternehmen eintrudelten, zu beobachten, dass immer mehr Websites sogenannte Web Accessibility Widgets und Plugins in die Seiten implementiert haben. Erkennbar ist dies meist an einem Icon („Universal Access“ Icon, ursprünglich entwickelt von Apple). Auf Klick öffnet sich ein Layer, bei dem man etliche Einstellungen vornehmen kann. Tools wie diese klingen erstmal hilfreich und 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 in Stichworten warum:

  • Sie verursachen mehr Probleme, als sie lösen. Sind u. a. 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, was vor allem für hochwertige Marken ein Problem darstellt
Schematische Darstellung eines Accessibility Plugins für Webseiten

So gelingt die barrierefreie Website

Die wichtigste Voraussetzung, um eine Website barrierefrei zu gestalten, ist eine sauber strukturierte Website, die von Anfang an und von allen Fachbereichen barrierefrei gedacht und aufgebaut ist. Das klingt erstmal aufwändig, ist es aber nicht. Denn in der Regel geht Barrierefreiheit Hand in Hand mit den üblichen Webseiten-Optimierungen im Hinblick auf SEO, Content Management sowie Usability und Design Systemen.

In einer sorgfältig aufgebauten UI Pattern Library müssen beispielsweise Farbkontraste ohnehin getestet und in einer klaren Struktur und Hierarchie zueinander hinterlegt werden. Ebenso werden die unterschiedlichen visuellen Zustände von Komponenten definiert. Auch hier bedeutet die Einhaltung der Richtlinien für ein barrierefreies Design keinen Mehraufwand, sondern wird direkt im Prozess berücksichtigt.

Im SEO Bereich hat die semantische Struktur der Seite einen großen Einfluss auf die Auffindbarkeit und das Ranking der Websiteinhalte, da Google Wert darauf legt, nutzerrelevanten Content zu erkennen und als Suchergebnis präferiert anzubieten. Wenn Seiten und Artikel eine klare Hierarchie aufweisen, ist diese allerdings nicht nur für Suchmaschinen von Vorteil. Für sehende Nutzer:innen dient sie der schnellen Erfassbarkeit von Inhalten und ist, wenn sie technisch einwandfrei umgesetzt wurde, gleichzeitig für den Screenreader eine optimale Aufbereitung. Das wiederum ermöglicht blinden Nutzer:innen, Texte zu überfliegen oder zu überspringen.

Ähnlich verhält es sich mit der Richtlinie, dass das Navigieren durch die Website für Nutzer:innen so einfach wie möglich sein muss. Sie deckt sich beinahe 100% mit den Anforderungen, die man an klassische Usability Optimierungen stellt. Ein Beispiel dafür ist das UX Writing für Linktexte. Das Kriterium für den Screenreader lautet, dass diese Texte eindeutig auszeichnen müssen, wohin sie führen, damit sich blinde Nutzer:innen zurechtfinden können. Der beliebte Text "Mehr Infos" ist nicht akzeptabel, was sich eins zu eins mit den Usability-Empfehlungen für eine intuitive Bedienbarkeit deckt.

Unterm Strich kann man sagen: Barrierefreiheit schränkt nicht ein, sondern hilft, durch genaue Kriterien im Development Prozess Hierarchien aufzubauen und Funktionalitäten so präzise wie möglich zu definieren. Auch hier zeigt sich, dass alle Zielgruppen von der erforderlichen Notwendigkeit zur durchdachten, klaren Struktur und einfachen Bedienbarkeit profitieren.

Möchten Sie mehr zu diesem Thema erfahren?

Unsere Vorgehensweise bei Moccu

Die Erfahrung hat uns gezeigt, dass es sich lohnt, Barrierefreiheit gleich von Anfang an zu integrieren. Deshalb entwickeln wir bei Moccu neue Websites und Apps direkt barrierefrei – unter Berücksichtigung des jeweils empfohlenen A - AAA Levels. Das spart Aufwand und damit Kosten.

Bei bereits bestehenden Websites, Apps und Online-Shops verschaffen wir uns zunächst in einem Accessibility Audit einen Überblick, welche Elemente bereits die W3C Konformität erfüllen und welche noch optimiert werden müssen. Anders als bei einem Audit von öffentlichen Barrierefreiheits-Prüfstellen, zertifizieren wir keine Websites, übertragen dafür aber unser Prüfergebnis in einen konkreten Maßnahmenplan und sprechen Handlungsempfehlungen aus. Dabei besteht unser Audit aus einer Kombination von automatisierten und manuellen Tests. Wir helfen, diese Prüfergebnisse zu interpretieren und die richtigen Schlüsse daraus zu ziehen.

Abgewickelt wird solch ein Audit je nach Umfang des Projektes innerhalb von wenigen Tagen oder auch Wochen. Nach Abschluss ergibt sich dann ein Bild über die nachfolgenden Aufgaben und den Umfang der daraus resultierenden Projekte.

Abhängig von der jeweiligen Zielsetzung ist ein Audit sowohl für eine Website, als auch für einzelne Komponenten, Seitentypen oder Userflows möglich. Spätestens ab der Konformitätsstufe Level AAA empfehlen wir Accessibility Nutzertests. Diese führen wir zwar nicht selbst durch, aber stellen unser Netzwerk zur Verfügung, um einen passenden Partner zu finden, und wir begleiten die Test-Durchführung.

Unser Quick-Check Tipp:

Möchten Sie testen, ob Ihre Website barrierefrei ist? Der WAVE Report zeigt Ihnen, was angepasst und verbessert werden muss. https://wave.webaim.org/

Falls Sie Hilfe benötigen, schauen Sie sich hier unsere Kurzanleitung an:

Zum Anleitungs-Video

Was bringt Barrierefreiheit von Online-Shops und Websites dem Unternehmen?

  • Das rechtliche Risiko für das Unternehmen wird minimiert
  • Die Marktreichweite wird vergrößert
  • Die Marke wird positiver positioniert und somit der Wert gesteigert

Doch was noch viel wichtiger ist: Barrierefreie digitale Anwendungen sind der Startschuss einer gelebten integrativen Unternehmenskultur. Im Entwicklungsprozess die spezifischen Bedürfnisse von Menschen mit Behinderungen zu beachten, das sensibilisiert und forciert einen Perspektivenwechsel.

Ist das Ziel, Inhalte und Services wirklich allen Nutzer:innen zugänglich zu machen und niemanden auszuschließen, kann auf ganz praktischer Ebene im Arbeitsalltag etwas geschaffen werden, das Akzeptanz, gesellschaftliche Vielfalt und Gleichberechtigung fördert.

Barrierefrei werden - vereinbaren Sie ein Erstgespräch.

Stephanie Wölke UX Design Lead

Vielen Dank für Ihre Nachricht

Wir haben Ihre Anfrage erhalten und melden uns umgehend bei Ihnen.

Zurück zur Übersicht Back to Top