Haben Sie schon einmal versucht, mit geschlossenen Augen im Internet einzukaufen? Die meisten Personen werden diese absurd klingende Frage mit einem klaren “Nein” beantworten, aber für viele Menschen in Deutschland ist dies eine sehr reale und auch beängstigende Situation. Gerade in diesem Bereich sind Barrieren erschreckend und fatal. Schließlich geben wir sehr vertrauliche Daten in irgendwelche Eingabemasken ein und riskieren unter Umständen unser ganzes Vermögen.
Barrierefreiheit im E-Commerce ist ein sehr wichtiges und sensibles Thema des BFSG, das sehr oft zu Frustration und Enttäuschung auf allen Seiten führt. In diesem vorerst letzten Blogartikel unserer Serie konzentrieren wir uns daher speziell auf Online-Shops und betrachten, was alles schiefgehen kann, wie man damit umgeht und wie man die Probleme am besten löst.
Von Barrierefreiheit und Online-Shops
Bevor wir uns explizit mit dem Begriff der Barrierefreiheit im konkreten Kontext von Online-Shops und E-Commerce-Anwendungen beschäftigen, ist es sinnvoll, noch einmal einen kurzen Blick auf die Idee grundlegender Barrierefreiheit zu werfen, um einen kleinen Gesamteindruck des Themenkomplexes zu erhalten.
Barriereabbau hat höchste Priorität
Was ist nun barrierefreies Design? Einfach ausgedrückt bedeutet es, dass möglichst alle Menschen eine Anwendung nutzen können, weil sie keine Barrieren aufweist. Häufig wird der Begriff Barrierefreiheit auch im Zusammenhang mit anderen Begriffen wie Inklusion und Behinderung verwendet, aber nicht nur Menschen mit Behinderungen profitieren von barrierefreien Anwendungen. Auch ältere Menschen, die beispielsweise motorische Probleme oder Sehschwierigkeiten haben, werden von barrierefreien Anwendungen profitieren. Und auch Menschen, die nicht per se eine Behinderung haben, stoßen im Alltag auf Barrieren. Wer in einem lauten Bus sitzt und seine Kopfhörer vergessen hat, sich aber dringend ein Video mit wichtigen Informationen anschauen muss, wird ohne gute Untertitel nicht weit kommen.
Man sieht also schon, dass der Begriff der Barrierefreiheit viel weiter gefasst ist als nur Alternativtexte unter Bildern. So gut wie jeder Mensch wird früher oder später in eine Situation kommen, in der eine Barriere die eigene User Experience negativ beeinflusst, weshalb auch automatisch jeder irgendwann von Barrierefreiheit profitieren wird. Denn letztlich wird eine barrierefreie Anwendung immer auch eine gebrauchstaugliche Anwendung sein: Die Anwendung ist für alle Menschen gut nutzbar.
Die großen Shops im Check
Doch wie sieht Barrierefreiheit in Online-Shops konkret aus – oder wie tut sie es eben nicht? Der Bereich E-Commerce leidet, wie viele andere digitale Anwendungen auch, unter typischen Barrieren, die gerne übersehen werden. So gibt es Standardprobleme wie fehlende Alternativtexte, geringe Farbkontraste oder unbenannte Interaktionselemente. Das sind die “üblichen Verdächtigen” der digitalen Barrieren, die fast jede Website falsch macht.
Und selbst große und sehr bekannte Anbieter wie Zalando oder Amazon schneiden hier nicht gut ab: Eine Studie [1] des Baymard Instituts aus dem Jahr 2021 ergab, dass von den 33 umsatzstärksten Online-Shops nur 6% die Zugänglichkeitsrichtlinien der WCAG 2.1 auf AA-Niveau (Mindeststandard) erfüllen. Mit anderen Worten: 94% der 33 größten Online-Shops sind nicht vollständig beziehungsweise grundlegend barrierefrei!
Und wenn schon die ganz Großen nicht wirklich mithalten, was bedeutet das erst für all die kleinen und mittelständischen Unternehmen?
Herausforderung Barrierefreiheit?
Viele Unternehmen empfinden die barrierefreie Gestaltung ihrer Anwendungen und Produkte als kostspielige, komplizierte und aufwändige Herausforderung. Warum ist das so? Barrierefreies Design sollte doch immer gut sein und von allen genutzt werden können. Ist das nicht eine Win-Win-Situation für alle Beteiligten?
Die unschätzbare Bedeutung in der Pipeline
Ob eine Anwendung einfach barrierefrei oder schwer barrierefrei wird, hängt oft vom Zeitpunkt der Planung ab. Stellen wir uns dazu einen hohen Turm vor.
Szenario A – Ein Turm ohne Fahrstuhl
In Szenario A soll ein besonders hoher Turm gebaut werden, welcher den Bürger*innen einer fiktiven Stadt zur Verfügung gestellt werden soll. Die Verantwortlichen planen nun diesen Turm und engagieren viele verschiedene Parteien und Expert*innen, die gemeinsam am Projekt arbeiten. Schließlich steht der Turm nach langer Zeit und wird der Bevölkerung zugänglich gemacht.
Doch schon bald stellt sich heraus, dass man vergessen hat, an Barrieren zu denken, und nun kann ein großer Teil der Stadt den Turm nicht nutzen. Die Stadtverwaltung bittet alle Beteiligten, die Pläne zu überdenken und einen Aufzug in den Turm einzubauen. Doch der Turm ist zu eng geplant und der Aufzug passt nicht hinein.
Der Turm muss für die Öffentlichkeit gesperrt, umfangreich umgebaut oder sogar komplett abgerissen und neu gebaut werden. Das bedeutet einen enormen Planungs- und Kostenaufwand, den niemand tragen will und über den sich alle ärgern.
Szenario B – Ein Turm mit Fahrstuhl
In Szenario B soll derselbe Turm mit genau demselben Zweck und denselben Funktionen wie in Szenario A gebaut werden. Auch hier beauftragt die Stadtverwaltung verschiedene Designer*innen und Expert*innen, entscheidet sich aber auch dafür eine Behindertenvertretung und UUX-Expert*innen um Rat zu fragen.
Da viele der Mitglieder*innen der Behindertenvertretung selbst betroffen sind, kennen sie bereits eine Reihe von unterschiedlichen Problemen und Barrieren im Alltag. Sie teilen ihre Erfahrungen mit dem Planungsteam und erarbeiten gemeinsam mit den UUX-Expert*innen einen Bauplan für den Turm, der bereits einen Fahrstuhl hat.
Der Turm kann nun von Anfang an groß genug geplant werden und muss nicht aufwändig umgeplant, abgerissen und neu gebaut werden. In beiden Szenarien gibt es natürlich einen Mehraufwand durch den Einbau eines Fahrstuhls, aber in Szenario B spart man sich eine Menge Arbeit, Geld und Nerven.
Von Türmen und Online-Shops
Nun ersetzen wir den “Turm” durch einen “Online-Shop” und schauen, was uns das konkret sagt: Oft werden Internetseiten erst einmal gebaut und dann wird geschaut, wie sie funktionieren. Ganz nach dem Motto “Hauptsache, die Seite steht”. Anwendungen werden unfertig und “unpoliert” veröffentlicht, um dann nach und nach in einen nutzbaren Zustand gebracht zu werden. Das ist aber teuer, aufwendig und manchmal schlicht nicht möglich.
Wer von vornherein ein Framework oder eine Basis für seinen Online-Shop wählt, die keine Barrierefreiheit zulässt, wird später große Probleme haben, die notwendigen Änderungen vorzunehmen. Wer seine Corporate Identity ohne Rücksicht auf Barrierefreiheit gestalten lässt, muss unter Umständen in Kauf nehmen, dass manche Menschen ein Logo einfach nicht wahrnehmen können.
Oft liegt das Problem nicht darin, dass es nicht verbessert wurde, sondern darin, dass es nur sehr schwer verbessert werden kann.
Wann Barrierefreiheit Thema sein sollte
Die kurze Antwort ist “so früh wie möglich”, die lange Antwort ist kompliziert. Grundsätzlich ist es immer einfacher, Barrierefreiheit einzuplanen, als sie nachzurüsten. Für alle, die sowieso ihren gesamten Internetauftritt oder Onlineshop erneuern möchten, empfiehlt es sich also, direkt Beteiligte und Expert*innen zu engagieren. Das spart langfristig Zeit und Geld, auch wenn man zunächst etwas mehr investieren muss. Außerdem erreicht man so automatisch 10% mehr Menschen, die lieber einen barrierefreien Onlineshop nutzen als die unbenutzbaren Alternativen der Konkurrenz.
Leider ist es nicht immer so einfach und nicht jeder hat gerade Unmengen an Geld eingeplant, um einen kompletten Relaunch zu finanzieren. Aber auch wenn die Website bereits steht, können einige Dinge angepasst werden, um die Barrierefreiheit zu verbessern.
Die Pain-Points im Fokus
Eine sehr detaillierte Ausarbeitung aller möglichen Barrieren und deren Lösungen würde den Rahmen dieses Blogartikels bei weitem sprengen. Insbesondere da einige Barrieren sehr individuell und speziell sein können, empfiehlt es sich bei Softwareprojekten immer, entwicklungsbegleitend mit Expert*innen dieses Fachgebietes in Kontakt zu treten und sich bei auftretenden Problemen ganz spezifisch beraten zu lassen.
If Users Can’t Buy, You Don’t Make Money
Jakob Nielsen [6]
Nichtsdestotrotz können wir bei Nestler UUX Consulting die ganz großen Probleme aufzeigen, die uns bei unseren Evaluationen immer wieder begegnen. Dazu werfen wir einen Blick in die DIN EN 301 549 und die WCAG, die bereits alle wichtigen Kriterien für mehr Barrierefreiheit im Internet liefern. Wenn Sie diese Punkte konkret prüfen und überarbeiten, machen Sie bereits einen großen Schritt in Richtung eines barrierefreien Online-Shops.
Farben und Kontraste
Der richtige Einsatz von Kontrast und Farbe ist gerade bei Formularfeldern immer wieder ein großes Problem. Sehr gerne werden Platzhaltertexte in einer hellen Farbe oder mit hoher Transparenz dargestellt, damit sie gerade noch erkennbar sind und beim Ausfüllen der Eingabefelder nicht stören. Manchmal stören die Platzhaltertexte sogar so wenig, dass sie von manchen Menschen gar nicht wahrgenommen werden.
Die WCAG 2.1 [2] hat dafür aber praktischerweise ganz klare Richtlinien, wie das Kontrastverhältnis von Text zum Hintergrund mindestens sein muss. Dieses beträgt für kleinen Text 4,5:1 und für großen Text wie Überschriften 3:1. Dieses Kontrastverhältnis wird nach einer komplizierten Formel berechnet, für die es aber glücklicherweise Online-Tools gibt [3]. Ein gutes Kontrastverhältnis ist aber nicht nur für den Text wichtig. Auch Schaltflächen oder die Tastaturfokusanzeige (Anzeige, wo sich der Fokus bei Verwendung der TAB-Taste befindet) müssen ausreichend kontrastreiche Farben verwenden.
Tastaturbedienbarkeit
Häufig scheitern Anwendungen in unserer Untersuchung an einer guten Bedienbarkeit mit der Tastatur. Wenn z.B. Produktoptionen ausgewählt, Daten eingegeben oder Artikel in den Warenkorb gelegt werden, muss dies ausschließlich über die Tastatur möglich sein. Hier hilft vor allem das Attribut “tabindex”, das für die einzelnen Elemente des Shops im HTML-Quelltext gesetzt werden kann. Damit wird festgelegt, in welcher Reihenfolge die Elemente mit der Tabulatortaste angesteuert werden.
So kann sichergestellt werden, dass alle wichtigen Bereiche eines Formulars erreicht werden und nur mit der Tastatur ausgefüllt werden können. Gleichzeitig wird dem Formular dadurch eine sinnvolle Struktur verliehen, welche die Benutzer*innen bei der Navigation unterstützt.
Benennung von Formularfeldern
Von Platzhaltertexten in Formularen war schon vorher die Rede, aber darum geht es jetzt nicht. Hier geht es um eine sinnvolle Benennung der Elemente auf Quelltextebene und eine schlüssige programmatische Benennung ihrer Rollen und Aufgaben. Das bedeutet, dass der Computer genau weiß, um was für ein Element es sich handelt und dass diese Information z.B. von Screenreadern zuverlässig ausgelesen und wiedergegeben werden kann.
Hier helfen so genannte ARIA-Attribute (Accessible Rich Internet Applications), mit denen die Rolle und Funktion einzelner Elemente genau definiert werden kann. Viele Schaltflächen kommen sogar kaum oder gar nicht ohne ARIA-Attribute aus [4], da sie nur optisch wie Schaltflächen aufbereitet wurden, im Quelltext aber ohne die richtigen Attribute nicht erkannt werden können.
Hier lohnt es sich besonders genau hinzuschauen, denn Schaltflächen und Eingabefelder sind das A und O eines funktionierenden Shops.
Sinnvolle Gliederung der Internetseite
Wer schon einmal versucht hat, in einem schlecht organisierten Supermarkt etwas Bestimmtes zu finden, hat schnell gemerkt, wie frustrierend das Einkaufserlebnis sein kann. Auf Internetseiten ist das nicht anders: Eine gute und strukturierte Aufbereitung der Inhalte hilft nicht nur der Barrierefreiheit, sondern wird auch alle anderen Kundinnen und Kunden erfreuen.
Wichtig ist hierbei, dass die einzelnen Teile der Internetseite im Quelltext durch Attribute wie “role” sinnvoll als solche gekennzeichnet werden. So können auch Menschen, die mit einem Screenreader arbeiten, von einer guten Struktur profitieren.
Fehlervermeidung und gravierende Folgen
Natürlich ist es grundsätzlich sinnvoll, dass die Oberfläche die Benutzerinnen und Benutzer bei der Eingabe von Daten unterstützt und Fehler vermeidet. Bei wichtigen Dateneingaben, wie z.B. Finanztransaktionen, ist es jedoch entscheidend, dass die eingegebenen Daten absolut korrekt sind. Meist können diese nach dem Absenden auch nicht mehr geändert werden, so dass schon ein kleiner Buchstabendreher oder eine falsche Zahl fatale Folgen haben können.
Daher sollte der Bestellprozess ausreichend Möglichkeiten bieten, die eingegebenen Daten barrierefrei überprüfen zu können. Dies kann beispielsweise über eine Audioausgabe der Daten erfolgen. Besonders hilfreich ist es auch, wenn die Anwender*innen vor dem Absenden noch einmal darauf hingewiesen werden, ihre Daten zu überprüfen und auf mögliche Konsequenzen fehlerhafter Eingaben hingewiesen werden.
Fazit: Wir haben (gar nicht so) viel Zeit
Bis zum Inkrafttreten des BSFG sind es noch knapp eineinhalb Jahre. Wer jetzt denkt, dass das viel Zeit ist, wird kurz vor dem Stichtag wohl ein großes Wunder erleben – oder auf ein großes Wunder hoffen müssen.
Einige werden sich sicher noch an die Einführung der DSGVO [5] und all die damit verbundenen Probleme erinnern. Obwohl es genügend Zeit gab, sich darauf vorzubereiten, haben viele Unternehmen erst gehandelt, als es für sinnvolle Maßnahmen schon zu spät war. Und wenn wir uns jetzt den aktuellen Stand diverser Online-Shops und Webseiten im Bereich Barrierefreiheit anschauen, dann ist die einzig sinnvolle Schlussfolgerung, sich so früh wie möglich damit zu beschäftigen.
Wer also vor Eintritt des BFSG einen kompletten Relaunch seines Internetauftritts plant, sollte einen Blick auf barrierefreie Gestaltung werfen und sich mit Expert*innen und Betroffenen zusammensetzen. Das Geld und die Zeit, die man zu Beginn zusätzlich investiert, spart man sich später um ein Vielfaches, wenn man keinen fertigen Onlineshop neu aufbauen muss. Sollte ein Relaunch aber keine Option sein, ist das noch lange nicht das Ende der Geschichte. Mit ein paar schnellen Handgriffen an den richtigen Stellen kann die Barrierefreiheit bereits massiv verbessert werden.
Wichtig ist nur, so schnell wie möglich damit anzufangen. Früher fertig zu sein schadet nicht. Es zum Stichtag nicht zu schaffen, tut dagegen doppelt weh.
Links
[1] https://baymard.com/blog/accessibility-benchmark-launch
[2] https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
[3] https://webaim.org/resources/contrastchecker/
[4] https://www.barrierefreies-webdesign.de/knowhow/links-oder-buttons/
[5] https://www.absatzwirtschaft.de/e-commerce-droht-die-zweite-dsgvo-2-229569/
[6] https://www.nngroup.com/articles/did-poor-usability-kill-e-commerce/
0 Kommentare zu “Barrierefreiheit im E-Commerce: Warum die meisten Online-Shops versagen”