Noch 150 Tage bis das BFSG in Kraft tritt – eine Herausforderung, die vor allem Online-Shops betrifft. Aber keine Sorge, mit der richtigen Vorbereitung wird Ihr Shop nicht nur regelkonform, sondern auch für alle zugänglich. Die Umstellung auf einen barrierefrei Online-Shop bietet viele Vorteile und ist einfacher, als Sie vielleicht denken. Lassen Sie uns eintauchen in die Probleme, vor denen vor allem Shop-Betreiber bei der Umsetzung der Barrierefreiheit stehen.
Wieso braucht es digitale Barrierefreiheit im E-Commerce?
Digitale Barrierefreiheit bedeutet, dass alle Menschen, unabhängig von ihren Fähigkeiten, gleichberechtigt auf Inhalte und Funktionen zugreifen können. Im E-Commerce ist das besonders wichtig, da Online-Shops eine zentrale Rolle im täglichen Leben vieler Menschen spielen. Insbesondere Menschen mit Behinderungen finden es oft einfacher, bestimmte Dinge online zu kaufen und liefern zu lassen. Für Betreiber von Online-Shops bedeutet das, sich der Inklusion zu widmen und sicherzustellen, dass niemand aufgrund technischer Barrieren ausgegrenzt wird. Am Ende ist das barer Umsatz für barrierefreie Online-Shops.
Maßnahmen, die eine Website oder einen Online-Shop barrierefreier werden lassen, helfen aber nicht nur Menschen mit Einschränkungen. Sie verbessern nachweislich das Nutzungserlebnis aller Ihrer Kunden und sogar Ihr Ranking bei Suchmaschinen. Nicht nur erweitern Sie also ihren Kundenstamm, Sie steigern auch Ihre Convertion Rate (also die Prozentzahl der Besucher, die tatsächlich etwas kauft) erheblich.
Rechtliche Verpflichtung für Online-Shops – das BFSG
Auch wenn es viele gute Gründe für einen barrierefreien Online-Shop gibt, sind diese noch nicht so verbreitet, wie sie es sein sollten. Um das Ganze in Schwung zu bringen hat die EU es einfach vorgeschrieben. Hier kommt das BFSG in Kraft, die deutsche Umsetzung dieser EU-Vorgabe.
Das sind die wichtigsten Eckpunkte um zu entscheiden, ob die eigene Website betroffen ist:
- Machen Sie (auch nur ansatzweise) Umsatz mit dieser Seite? Das könnte ein Online-Shop aber auch eine Termin-Buchung oder ein Formular zur Angebotseinholung sein.
Ja? Weiter mit Frage 2.
Nein? Dann sind Sie vermutlich nicht betroffen. Fragen Sie zur Sicherheit aber unbedingt einen IT-Anwalt. - Haben Sie ein Kleinstunternehmen? Das sind Sie im Sinne des BFSG Unternehmen mit weniger als 10 Mitarbeitern und höchstens 2 Millionen Euro jährlichem Umsatz.
Ja? Dann sind Sie vermutlich nicht betroffen.
Nein? Dann dürfte das BFSG Sie zu einer barrierefreien Website verpflichten.
Mehr Informationen rund um das BFSG und seine Anforderungen finden Sie bei versandhandelsrecht.de.
Typische Barrieren in Online-Shops
Die Barrieren, vor denen Nutzer mit Einschränkungen in Online-Shops stehen, sind natürlich grundsätzlich dieselben wie auf klassischen Websites. Trotzdem gibt es ganz typische Probleme, die immer wieder auftreten. Schauen wir sie uns an.
Komplexe Produktkataloge
Große Produktmengen können Menschen mit Sehbehinderungen oder kognitiven Einschränkungen überfordern. Helfen Sie Ihren Nutzern also, indem Sie es einfach machen, das gewünschte Produkt zu finden. Eine leicht zugängliche Suche, die auch Tippfehler toleriert, ist ein guter Anfang. Für unentschlossenere Nutzer helfen Filteroptionen. So können große Suchergebnisse auf die wichtigsten Produkte heruntergebrochen werden. Bedenken Sie: Nutzer von Screenreadern haben nicht die Möglichkeit, die Seite mal schnell zu überfliegen. Sie müssen sich jeden Produkttitel und eventuell zusätzliche Beschreibungen erst vorlesen lassen um zu wissen, ob der gesuchte Artikel dabei ist. Sorgen Sie also dafür, dass die Auswahl schon den eigenen Wünschen entspricht.
Übrigens ein kleiner Spoiler: Nächste Woche werfen wir einen Blick darauf, wie die Produktkacheln in Katalog und Suche barrierefrei umgesetzt werden können.
Alternativtexte für Produktbilder
Ich betone gern, dass Alternativtexte denselben Zweck erfüllen sollten, wie das dargestellte Bild. Nicht immer ist dies unbedingt das, was tatsächlich zu sehen ist (beispielsweise bei Icons auf einem Button). Bei Produktbildern in einem Online-Shop ist das aber anders, denn hier geht es genau um die Dinge, die zu sehen sind. Und dabei machen Details oft den Unterschied aus. Ein Alternativtext „Armbanduhr von vorn“ mag zwar inhaltlich richtig sein, hilft Kunden aber nicht weiter. Relevant sind Materialien, Farben, optische Details. Eben alles, was man auch dem Bild entnehmen kann. Wodurch unterscheidet sich diese Armbanduhr von anderen?
Sind diese Beschreibungen sehr lang, kann auch eine kurze Version als Alternativtext verwendet werden und auf eine detaillierte Beschreibung verweisen. So können Nutzer selbst entscheiden, ob sie zusätzliche Informationen brauchen.
Mehr Informationen zu Alternativtexten:
Dynamische Inhalte und interaktive Elemente
Online-Shops sind häufig deutlich dynamischer als klassische Websites gestaltet. Kunden können sich nicht nur registrieren und Artikel in den Warenkorb legen, auch Erfolgs-oder Fehlermeldungen erscheinen an unterschiedlichen Stellen auf der Website. Produktbilder öffnen sich in Overlays um sie vergrößern zu können. Kunden kauften auch die Artikel aus folgendem Slider.
Je komplexer die Inhaltselemente, desto schwieriger wird es aber, diese Online-Shops barrierefrei oder zumindest barrierearm umzusetzen. Deshalb ist es ein guter Anfang, sich bei der Umsetzungeiner neuen Funktion an folgende Richtlinien zu halten:
- Alles, was mit der Maus ausgelöst werden kann, kann auch mit der Tastatur bedient werden können.
- Bleiben Sie solang wie möglich bei semantischem HTML. Ergänzen Sie erst dann CSS und JavaScript für zusätzliche Funktionalität.
- Nutzen Sie ARIA-Rollen um den aktuellen Status und die Rolle von Elementen auch Screenreadern zugänglich zu machen.
- Erfolgs- und Fehlermeldungen, die irgendwo auf Seiten auftauchen, sind grundsätzlich erst einmal unsichtbar für Screenreader, da sie nicht bemerkt werden. Nutzen Sie Live-Regions um auch diese über wichtige Dinge zu informieren.
Checkout-Prozesse
Der Checkout-Prozess ist der Kern aller Online-Shops. Ohne Checkout kein Umsatz. Er kann für viele Menschen aber eine Hürde darstellen. Vor allem mehrstufige Formulare sind oft schwer verständlich. Hier ist eine klare und einfache Gestaltung gefragt, um niemanden auszuschließen.
Vereinfachen Sie also die Formulare soweit wie möglich. Dies minimiert das Risiko von Kaufabbrüchen und sorgt dafür, dass alle Kunden problemlos einkaufen können. Hier ein paar wichtige Ansätze:
- Fragen Sie nur ab, was Sie benötigen. Und auch nur einmal. Die Rechnungsadresse kann mit der Lieferadresse identisch sein? Dann reicht eine Checkbox um das zu bestätigen. Der Kunde muss diese nicht doppelt eingeben. Sie benötigen garkeine Telefonnummer und das Geburtsdatum ist egal? Dann fragen Sie nicht danach. Natürlich wollen Sie möglichst viel über Ihre Kunden wissen, aber je mehr gefragt wird, desto eher springen Nutzer ab. Vor allem dann, wenn der Zweck nicht klar ist.
- Nutzen Sie Autovervollständigung. Browser speichern inzwischen eingegebene Adressdaten auf Wunsch der Nutzer ab. Kommt man später zu einem anderen Formular, das Informationen wie Name, E-Mail oder die Adresse benötigt, können diese automatisch ausgefüllt werden. Das spart Zeit und verhindert Tippfehler. Bedingung ist, dass Sie an Ihren Eingabefeldern das Attribut
autocomplete
nutzen und richtig konfigurieren. - Beschriften Sie, was eingegeben werden soll. Sie erwarten die Telefonnummer in einer speziellen Formattierung und das Passwort sollte mindestens drei Charaktere aus Star Wars enthalten? Dann informieren Sie die Nutzer darüber bevor die Fehlermeldung erscheint. Mit dem Eingabefeld verknüpfte Hilfetexte können helfen, gut verständliche Labels sind jedoch das Mindeste.
- Fehler nur wenn nötig, dann aber richtig. Wo wir schon beim Telefonformat sind. Überlegen Sie sich: Ist das wirklich nötig? Telefonnummern kann man beliebig selbst formatieren, Leerzeichen und Schrägstriche nachträglich entfernen oder hinzufügen. Es spielt schlicht keine Rolle, wie diese eingegeben wurden. Auch für andere Eingabefelder sollte gelten: Tollerieren Sie so viel wie möglich. Und tritt dann doch ein Fehler auf: stellen Sie sicher, dass auch hier die Nutzer von Screenreadern (beispielsweise über Live Regions) zuverlässig informiert werden.
Zahlarten
Nichts ist frustrierender, als bis hierhin gekommen zu sein und den Wunschartikel dann einfach nicht bezahlen zu können. Achten Sie darauf, dass Nutzer einfach verständlich über verschiedene Zahlungsarten informiert werden. Falls möglich würde ich persönlich empfehlen, immer eine Zahlungsart anzubieten, die die Nutzer mit ihrem gewohnten Online-Banking bzw. der eigenen Bank nutzen können. So sind Sie nicht von oft extern eingebundenen Lösungen von Anbieten wie PayPal, Klarna und co. abhängig. Stehen Vorkasse oder Kauf auf Rechnung zur Verfügung, können Nutzer in jedem Fall ihre gewohnten Portale nutzen um ihre Produkte zu bezahlen. Gehen Sie aber auf Nummer sicher, dass Ihre Kontodaten dann auch gut zugänglich sind.
Aber auch die großen Zahlungsanbieter wie PayPal achten auf ihre Zugänglichkeit und haben schon gute Ergebnisse vorzuweisen. Eine Zahlungsmethode, die von allen Menschen gleichermaßen genutzt werden kann und möchte werden Sie trotzdem nicht finden. Versuchen Sie deshalb verschiedene Möglichkeiten ohne zusätzliche Gebühr anzubieten, damit jeder Kunde eine geeignete Zahlart finden kann.
Fazit – Ihr Online-Shop wird barrierefrei und erfolgreich
Die Umstellung auf einen barrierefreien Online-Shop mag zunächst herausfordernd erscheinen, doch die Vorteile überwiegen deutlich. Nicht nur gesetzliche Anforderungen werden erfüllt, sondern auch die Kundenbindung gestärkt. Heute haben wir trotzdem nur einen kurzen Ausflug in die Barrierefreiheit im E-Commerce machen können. Nutzen Sie die verbleibenden 150 Tage, um Ihren Shop fit für die Zukunft zu machen. Ich helfe gern.