Barrierefreie Onlineshops: Warum es wichtig ist und wie du deinen Onlineshop anpassen kannst

In der Schweiz leben 1.7 Millionen Menschen mit einer Behinderung [1]. Damit sind rund 20% der Schweizer Bevölkerung darauf angewiesen, dass Onlineshops barrierefrei gestaltet sind, damit sie ohne Einschränkungen auf deren Dienste zugreifen können [1]. Zusätzlich gewinnen Onlineshops immer mehr an Bedeutung, der alltägliche Konsum hat sich in den letzten Jahren immer mehr ins Internet verlagert und wurde in der Corona-Pandemie nochmals beschleunigt [2]. In der Realität sind jedoch 75% der Onlineshops in der Schweiz für Menschen mit einer Behinderung nicht genügend zugänglich gestaltet [2]. Dies zeigt auf, dass ein grosser Handlungsbedarf bei der Verbesserung der Barrierefreiheit besteht [2].

Was bedeutet Barrierefreiheit im Internet?

Der Begriff Barrierefreiheit bedeutet im Bereich des Internets, dass Menschen mit und ohne einer Einschränkung Angebote im Internet gleichermassen nutzen können [3]. Dafür müssen alle vorhandenen Barrieren entfernt werden, die Menschen mit Behinderungen antreffen [4]. Da jedoch die vollständige Entfernung aller Barrieren fast nicht möglich ist, wird in der Praxis manchmal von Barrierearmut gesprochen, wenn eine Website nur wenige Barrieren hat [4, 5]. Jedoch sollte das Ziel eines Internetauftritts immer ein Erreichen der vollständigen Barrierefreiheit sein [6]. 

Das Internet hat eine sehr wichtige Stellung in unserer Gesellschaft, deshalb sollten Hindernisse und Einschränkungen in der Bedienung, sogenannte Barrieren, vermieden werden [2].

Es gibt verschiedene Aspekte, auf die für einen barrierefreien Zugang zu Websites geachtet werden müssen. Blinde oder sehbehinderte Menschen müssen für alle Inhalte entsprechende Beschriftungen haben, damit  Leseprogramme, sogenannte Screenreader, diese laut vorlesen können. Gehörlose sowie schwerhörige Menschen brauchen ebenfalls einen Text (oder Untertitel) zu Audio- und Videoangeboten. Für Menschen mit motorischen Behinderungen muss es möglich sein, eine Website ohne Maus oder Tastatur zu bedienen und trotzdem Zugriff auf alle Funktionen zu erhalten. Des Weiteren gibt es verschiedene Einschränkungen wie Lese-Schwächen, kognitive Behinderungen oder Epilepsie. Für diese Menschen muss nicht zwingend die Bedienung, sondern auch die Darstellung vereinfacht (beispielsweise keine Blitz-Effekte, schnell bewegende Banner o.ä.) und die spezifischen Inhalte (einfach geschriebene Texte mit simplen Begriffen und keinem spezifischen Fachvokabular) entsprechend angeboten werden [7].

Barrierefreie Website Konzeption

Richtlinien für barrierefreies Internet

Barrierefreiheit im Internet erleichtert nicht nur den Zugang für beeinträchtigte Menschen, sondern erfüllt in vielen Ländern auch rechtliche Anforderungen. So müssen in der Schweiz beispielsweise Bundes-Websites nach den Web Content Accessibility Guidelines (WCAG) barrierefrei gestaltet werden. Die neuste überarbeitete Version dieser Richtlinien ist WCAG 2.1 und wurde 2018 von der Web Accessibility Initiative (WAI) publiziert [11]. 

Die WCAG wurden in Zusammenarbeit mit vielen unterschiedlichen Organisationen und Individuen aus aller Welt, mit dem Ziel einen international anerkannten Standard für Barrierefreiheit im Internet zu schaffen, erstellt. Dieser Standard soll im gleichen Masse die Bedürfnisse von Individuen, Organisationen und Regierungen decken können [11]. 

Die WCAG 2.1 umfassen folgende Bausteine:

Bausteine der WCAG 2.1 (Eigene Grafik, in Anlehnung an [12]).

Beim pyramidenförmigen Aufbau der WCAG 2.1, bilden die nachfolgenden vier Prinzipien die Grundlage, woraus Richtlinien abgeleitet werden.

1. Wahrnehmbar: Inhalte müssen so präsentiert werden, dass sie für Benutzer*innen wahrnehmbar sind.
2. Bedienbar: Inhalte und Navigation müssen bedienbar sein. 
3. Verständlich: Inhalte und Bedienung müssen verständlich sein.
4. Robust: Inhalte müssen von einer grossen Anzahl unterschiedlicher Benutzer*innen und Hilfsmitteln interpretiert werden können.

Diesen vier grundlegenden Prinzipien werden 13 Richtlinien zugeordnet. Unter dem Prinzip der Wahrnehmbarkeit gibt es beispielsweise eine Richtlinie zu Textalternativen. Diese Richtlinie besagt, dass Nicht-Text-Inhalte auch alternativ dargestellt werden müssen, beispielsweise in Grossschrift oder Symbolen [12].  

Nachdem die Prinzipien und Richtlinien die Grundlage der WCAG bilden, werden in den 78 Erfolgskriterien konkrete Handlungsanweisungen abgegeben. Zudem werden bei vielen gesetzlichen Standards Konformitätsstufen der WCAG Erfolgskriterien verwendet. Es gibt drei Konformitätsstufen, A bei 30 erfüllten Erfolgskriterien, AA bei 50 erfüllten Erfolgskriterien und AAA bei Erfüllung von allen 78 Erfolgskriterien [12]. In der Schweiz (für Bundes-Websites) und anderen europäischen Ländern muss mindestens Konformitätsstufe AA erreicht werden [13]. 

Die WCAG werden aufgrund der raschen technologischen Entwicklungen laufend weiterentwickelt und den Gegebenheiten angepasst. Bereits 2021 soll Version 2.2 der WCAG publiziert werden. In den WCAG 2.1 wurde beispielsweise unter dem Prinzip der Bedienbarkeit eine Richtlinie ergänzt, die vorschreibt, dass die Bedienbarkeit auch mit anderen Hilfsmitteln als der Tastatur erleichtert werden soll [11]. Da immer mehr Inhalte auf Smartphones oder Tablets konsumiert werden [14], kann die Bedienbarkeit so auch auf Endgeräten ohne Tastatur gewährleistet werden.

Ist Barrierefreiheit nützlich?

Vielleicht stellst du dir beim Lesen unseres Beitrags allmählich die Frage, was eine barrierefreie Umsetzung in deinem Onlineshop überhaupt für Vorteile bringt? Warum solltest du überhaupt auf die WCAG 2.1 Richtlinien bei der Erstellung deines Onlineshops achten, wenn es auch gut ohne geht? 

Das Internet ist heutzutage ein zentrales Medium für diverse alltägliche Belange [7]. Vor allem während der Corona-Pandemie hat sich der alltägliche Konsum vom physischen Geschäft rasant ins Internet verlagert [2]. So ist es in der Schweiz momentan auch möglich Lebensmitteleinkäufe über Online Shops, wie beispielsweise migros.ch oder coop.ch, zu tätigen. 

Auch Menschen mit Behinderungen und ältere Bevölkerungsschichten nutzen das Internet im Alltag vermehrt [15]. Diese Bevölkerungsgruppen können durch visuelle (Sehvermögen), auditive (Hör- und Sprechvermögen), motorische (Bewegungsvermögen) oder kognitive Behinderungen in ihrem alltäglichen Leben eingeschränkt sein [2, 7]. 

Ohne Barrierefreiheit keine Inklusion 

Die Bereitstellung von barrierefreien Inhalten (z.B. Bilder, Texte, Audiodateien) im Internet stellt sicher, dass diese Inhalte für alle, unabhängig von ihrer eigenen Fähigkeit oder Fertigkeit, gleich zugänglich sind [2, 7]. Selbstbestimmung und Chancengleichheit werden zu den häufig beschworenen Schweizer Grundwerten gezählt [2]. Die Gewährleistung von Autonomie und Gleichstellung von behinderten Menschen in der Schweiz ist daher durch das Schweizerische Behindertengleichstellungsgesetz rechtlich festgelegt und wird demnach auch für Dienstleistungen in Onlineshops in Form von barrierefreien Standards (beispielsweise WCAG 2.1 [19] oder eCH-0059 Accessibility-Standard [8]) geltend gemacht [2, 7, 15].

Online unabhängig und selbstständig Einkaufen ist für Menschen mit Behinderungen gerade in der Corona-Pandemie wertvoll und wichtig. Ohne die Umsetzung von Barrierefreiheit ist weder Inklusion noch Chancengleichheit für Menschen mit Behinderung im Internet möglich [2]. 

Barrierefreiheit bringt Wettbewerbsvorteile 

Die Barrierefreiheit ist nicht nur moralisch und juristisch notwendig, sondern bringt auch technische und wirtschaftliche Vorteile [8]. Folgende Kriterien müssen beachtet werden, damit dein Onlineshop durch die Einhaltung der Barrierefreiheit Wettbewerbsvorteile erzielen kann.

Die Zugänglichkeit für alle Bevölkerungsgruppen, unabhängig von ihrer Fähigkeit oder Fertigkeit, ist ein unverzichtbarer Erfolgsfaktor digitaler Geschäftsmodelle. Mit der Einhaltung der oben genannten Kriterien können Menschen mit Behinderungen durch ein barrierefreies Internetangebot als neue Zielgruppe erreicht werden. Mit einem barrierefreien Angebot haben Schweizer Onlineshops beispielsweise die Chance ein Fünftel der Schweizer Gesamtbevölkerung mit einer Behinderung oder Beeinträchtigung als potenzielle Neukund*innen zu gewinnen. Wenn die Barrierefreiheit als Grundsatz durch Onlineshops nicht eingehalten wird, schliessen sie Menschen mit Behinderung teilweise oder sogar ganz aus ihrem Angebot aus. Die Konkurrenz ist stets nur ein Click entfernt und ein potenzieller Erfolg schnell verloren [2, 7]. 

Barrierefreiheit in der Praxis 

Wie sieht es nun in der Praxis aus? Inwiefern ist die Barrierefreiheit bei Onlineshops in der Schweiz erreicht? Eine Untersuchung zur Accessibility in der Schweiz hat gezeigt, dass viele Schweizer Onlineshops nicht barrierefrei sind [2]. Menschen mit einer Behinderung können nur knapp ein Viertel der Onlineshops gut bedienen, die restlichen Onlineshops sind für sie nur teilweise oder gar nicht verwendbar [2]. Im Folgenden zeigen wir anhand der vier Prinzipien des WCAG 2.1 auf, wo bei Schweizer Onlineshops der grösste Handlungsbedarf besteht und wie eine Lösung aussehen kann, um in diesen Bereichen die Barrierefreiheit erreichen zu können [2, 19]. 

Wahrnehmbar: Schrift und Ton für Multimediainhalte  

Grosser Handlungsbedarf besteht bei der Anzeige von Multimediainhalten [2]. Denn fast alle Onlineshops, die Videos verwenden, haben diese nicht genügend aufbereitet [2]. Die Videos sollten einerseits für Menschen mit einer Sehbehinderung eine Tonspur enthalten und andererseits sollten für Gehörlose Untertitel angezeigt werden. [2, 19, 23]. Bei Interdiscount fehlen bei einem Produktvideo zu einer Dashcam beispielsweise die Untertitel, es ist nur eine Tonspur vorhanden [24]. Besser macht dies Digitec, die zusätzlich zur Tonspur Untertitel anzeigen, welche synchron zum gesprochenen Text eingeblendet werden [25]. 

Bedienbar: Navigation mithilfe der Tastatur

Beim Prinzip „Bedienbar“ sollte bei Onlineshops ein Fokus auf die Tastaturbedienbarkeit gesetzt werden [2]. Menschen, die motorisch eingeschränkt sind, können keine Computermaus verwenden und nutzen stattdessen die Tastatur, um auf Websites zu navigieren [26]. Oft ist eine solche Navigation jedoch erschwert [2]. Verwendet man beispielsweise bei Swisscom den Tabulator zur Auswahl einer Unterkategorie, so wird nicht angezeigt, welches Feld aktuell ausgewählt ist [27]. Der Onlineshop Zur Rose fand eine bessere Lösung [28]. Bei einem Klick mit der Tabulatortaste wird das aktuell angewählte Feld jeweils umrahmt [28]. 

Verständlich: Unterstützung bei Formulareingaben

Bei diesem Prinzip besteht Handlungsbedarf bei der Umsetzung von Hilfestellungen in Formularen [2]. Rund 80% der Onlineshops in der Schweiz bieten ungenügende Hilfestellungen an [2]. So sind zum Beispiel bei Farmy bei der Registrierung die Beschriftungen nicht mit dem Formularfeld verknüpft [2, 29]. Dies kann zu Problemen führen, wenn sich eine Person mit einer Sehbehinderung das Formular von einem Screenreader vorlesen lässt [2]. Ohne die Verknüpfung der Beschriftung und des Formularfeldes ist es mit dem Screenreader nicht klar, welche Angabe in welches Feld gehört [2, 19, 30]. Der Parkkartenshop der Stadt Bern hat dies besser umgesetzt [31]. In diesem Onlineshop sind die Beschriftungen und Formularfelder jeweils verknüpft und es ist angegeben, welche Felder zu den Pflichtfeldern gehören [2, 31]. Wird das Formular von einem Screenreader vorgelesen, ist klar, was in das jeweilige Feld eingegeben werden muss [2, 31]. 

Robust: Elemente mit Attributen versehen

Grosses Potential bei der Barrierefreiheit von Onlineshops ist bei Elementen im HTML-Code zu finden [2]. Werden Elemente im HTML-Code mit Attributen versehen, kann einem Screenreader mitgeteilt werden, um welche Art Element es sich handelt (Aufklappmenu, Tabelle, Button, usw.) und wie es bedient werden kann [32]. Bei Galaxus fehlen beispielsweise solche Attribute bei den Filtern, wodurch Menschen mit einer Sehbehinderung nicht wissen, dass der Hauptfilter aufklappbar ist und Unterkategorien beinhaltet [33]. Die Stadt Bern hingegen hat Attribute sehr gut verwendet [34]. Man weiss bei jedem Bedienelement, um welche Art es sich handelt und ob es aufgeklappt ist oder nicht [34].

Checkliste für einen barrierefreien Onlineshop

Letztlich zeigen wir dir zum Abschluss unseres Blogs, wie du mit einer Checkliste respektive Handlungsempfehlungen sicherstellen kannst, dass dein eigener Onlineshop den WCAG 2.1 Richtlinien entspricht. So kannst du sicherstellen, dass sich alle deine Kund*innen in deinem Onlineshop gleich gut zurechtfinden und auf keine Barrieren stossen.

Die Stiftung Zugang für alle beschäftigt sich aktuell mit der Entwicklung einer generellen Checkliste bezüglich der Barrierefreiheit im Internet [15]. Momentan ist auf Anfrage eine Vorabversion verfügbar, die Erfolgskriterien und Checkpunkte sind allerdings definitiv festgelegt und werden nicht mehr verändert. Die Accessibility-Checkliste wird nach der Veröffentlichung für alle unter https://accessibility.swiss zugänglich sein. Da es noch keine Checkliste spezifisch für Onlineshops gibt, haben wir dir im nächsten Abschnitt einige Handlungsempfehlungen für deinen eigenen barrierefreien Onlineshop zusammengestellt.

Handlungsempfehlungen für deinen barrierefreien Onlineshop

Du solltest dir bei der Gestaltung deines Onlineshops im Klaren sein, dass sich Barrierefreiheit nicht nur auf Menschen mit körperlichen Einschränkungen beschränkt, sondern auch Menschen mit technischen Einschränkungen miteinbezieht. Dazu gehören beispielsweise Einschränkungen durch das Endgerät (Notebooks und Mobiltelefone mit kleinem Bildschirm, Bildschirme mit geringem Kontrast oder wenigen Farben) oder auch Einschränkungen durch einen langsamen Internetzugang.

Wenn du die unten aufgeführten Punkte von Anfang an in der Gestaltung deines Onlineshops berücksichtigst, erleichterst du dir deine Arbeit und die Mehrkosten halten sich in Grenzen. Gleichzeitig gehst du bereits bei der Gestaltung deines Onlineshops auf Bedürfnisse von Kund*innen mit Einschränkungen ein. Diese Liste ist selbsterklärend nicht vollständig, sondern stellt lediglich eine gute Basis für die barrierefreie Gestaltung deines Onlineshops dar. Klicke einfach auf das untenstehende Banner und schau dir unsere Handlungsempfehlungen für deinen eigenen barrierefreien Onlineshop an.

Zu guter Letzt:

Die Autor*innen