Die Erstellung eines barrierefreien Online-Shops

Deutsche Online-Shops sind ab Juli 2025 durch das Barrierefreiheits-Stärkungsgesetz (BFSG) dazu verpflichtet, einen barrierefreien Zugang zu garantieren.

Aber auch die Usability (Benutzerfreundlichkeit) des Shops sowie das Google-Ranking verbessern sich deutlich durch eine barrierefreie Gestaltung.

Im Folgenden erklären wir Ihnen, wie Sie Ihren Online-Shop rechtssicher und barrierefrei gestalten können.

Außerdem stellen wir Ihnen die Tools vor, die Sie kombinieren können, um Ihren Nutzerinnen und Nutzern eine möglichst hohe Accessibility (Barrierefreiheit) zu bieten und möglichst viele Personengruppen bei der Planung Ihres Shops einzubeziehen.

Inhaltsverzeichnis

1. Warum Barrierefreiheit im E-Commerce?

2. Wie erstelle ich einen barrierefreien Online-Shop?

3. So prüfen Sie Ihren Online-Shop auf Barrierefreiheit

4. Die Wahl der richtigen Tools und Technologien

5. Checkliste: Konzeption eines barrierefreien Online-Shops

6. Fazit

Warum Barrierefreiheit im E-Commerce?

Barrierefreiheit oder Web Accessibility bedeutet grundlegend erst einmal Zugänglichkeit für alle Personen gleichermaßen.

Diese Zugänglichkeit wird ermöglicht, indem alle möglichen Einschränkungen der Nutzerinnen und Nutzer des Shops haben könnten, einkalkuliert werden.

Menschen mit Einschränkungen machen einen größeren Teil der Bevölkerung aus, als man zunächst erwarten mag und sind zum Teil sehr aktiv im Internet, da Einkäufe über Online-Shops den Alltag deutlich erleichtern können.

Einschränkungen in Online-Shops beginnen schon bei grundlegenden Dingen wie einer zu kleinen Schriftgröße, einer unleserlichen Schriftart oder einem zu geringen Kontrast zwischen dem Hintergrund und dem Text.

Auch komplizierte Formulierungen und eine undurchsichtige Strukturierung der Seite können die Abbruchrate der Seitennutzung deutlich erhöhen.

Änderungen zugunsten der Barrierefreiheit nehmen auch auf das Google Ranking Einfluss: Durch Maßnahmen wie angepasste Bildunterschriften, Transkriptionen von Video Header Tags oder eindeutige Linktexte verbessern sich Ranking und Barrierefreiheit gleichermaßen.

Zur Zielgruppe gehören Personen mit Einschränkungen in ihrem Hör- und Sehvermögen, mit motorischen Einschränkungen, mit eingeschränkten kognitiven Fähigkeiten, aber auch Personen mit unzureichenden Sprachkenntnissen und akute situative Einschränkungen (z. B. Umgebungsgeräusche).

In Deutschland ist jeder Fünfte von einer dieser Einschränkungen betroffen. Vor allem ab einem Alter von 60 Jahren leidet ein großer Teil der Bevölkerung an mindestens einer dieser Einschränkungen.

Wie erstelle ich einen barrierefreien Online-Shop?

Um einen barrierefreien Online-Shop zu garantieren, sollten Sie sich an den sogenannten POUR-Prinzipien (Akronym für: Perceivable, Operable, Understandable, Robust) orientieren.

Diese vier Prinzipien stellen die Basis eines barrierefrei aufgebauten Systems dar:

• Wahrnehmbarkeit (Percievable)
  Die Nutzer:innen müssen alle Bestandteile und Inhalte eines Shops wahrnehmen können.
  
  

• Bedienbarkeit (Operable)
  Alle Bestandteile der Anwendung sind problemlos bedienbar und navigierbar.
  
  

• Verständlichkeit (Understandable)
  Die präsentierten Informationen sowie die Bedienung der Anwendung ist verständlich.
  
  

• Robustheit (Robust)
  Die Inhalte sind robust genug, um von vielen User Agents (Browsern) sowie diversen assistiven Technologien bedient zu werden.

Tipp 💡: Wir geben Ihnen 10 Tipps, um die Retourenquote Ihres Online-Shops zu verringern.

Whitepaper jetzt kostenlos herunterladen ⬇️

Web Content Accessibility Guidelines

Auf Basis dieser POUR-Prinzipien wurde der Richtlinienkatalog WCAG (Web Content Accessibility Guidelines) vom W3C (World Wide Web Consortium) erarbeitet.

Hiermit werden die Level an Barrierefreiheit definiert und festgelegt.

Zusätzlich zu den POUR-Prinzipien dienen die Level A, AA und AAA zur Einteilung.

Level A
Level A ist die niedrigste Stufe der Barrierefreiheit. Assistiven Technologien wird die Navigation durch den Shop und deren Übersetzung erleichtert.

Level AA
Die mittlere Stufe der Barrierefreiheit ist das Level AA. Ein größeres Spektrum an Personen mit Einschränkungen erhält hier Zugang zur Seite und die Themen Farbkontrast und Fehleridentifikation wurden berücksichtigt inbegriffen.

Das Level AA ist vom W3C empfohlen, für öffentliche Institutionen in Deutschland ist es sogar verpflichtend.

Level AAA
Beim höchsten Level AAA wird die Zugänglichkeit für möglichst viele Personen mit Einschränkung gewährleistet.

Das bedeutet für die Shop-Betreibenden regelmäßige Pflege sowie stetige Optimierungen.

So prüfen Sie Ihren Online-Shop auf Barrierefreiheit

Um herauszufinden, wo Optimierungsbedarf in Ihrem Shop besteht, sollten Sie überprüfen, welche Kriterien der Barrierefreiheit bereits erfüllen und welche noch ausgebaut werden müssen.

W3C bietet diverse Möglichkeiten zum Testen in englischer Sprache an, außerdem gibt es beispielsweise das Angebot des BITV-Tests.

Auf der offiziellen Seite können Sie sich auch die verschiedenen Prüfstellen ansehen und obendrein wird ein weniger umfangreicher WCAG-Test angeboten.

Daneben besteht die Möglichkeit, selbst einen kostenfreien Screenreader zu nutzen, um festzustellen, ob alle Textelemente vorgelesen werden und ob die Reihenfolge beim Vorlesen stimmt.

Kostenlose Reportings mit Programmen wie Wave oder Google Lighthouse dienen zum Verschaffen eines ersten Überblicks.

Tipp 💡: Es gibt den kostenfreien Screenreader NVDA. Eine Anleitung für den NVDA finden Sie auf der Internetseite der Aktion Mensch und im Blog von Jan Hellbusch, der eine offizielle Anleitung zum NVDA gibt.

Die Zusammenarbeit mit Expert:innen, beispielsweise über eine Digitalagentur, bietet sich an, wenn der Test tiefer ins Detail gehen soll.

Hierbei wird unter anderem auf Nutzertests und auf die Anwendung assistiver Technologien zurückgegriffen.

Auch im Hinblick auf zukünftige Projekte ist eine eingehende Prüfung und eine Sensibilisierung Ihrer Mitarbeitenden sinnvoll.

Zudem gibt es für PDFs und Office-Dateien Tools zur Überprüfung auf Barrierefreiheit.

Ein Beispiel dafür wäre der PDF Accessibility Checker (PAC). Um MS Office Dokumente zu testen, gibt es Angebote von Microsoft selbst.

Die Wahl der richtigen Tools und Technologien

Was muss ein Shopsystem bieten, um die Erstellung eines barrierefreien Shops zu gewährleisten?

Es gibt natürlich einige Faktoren, die die Erstellung eines barrierefreien Web-Auftritts deutlich für Sie erleichtern.

Shopify bietet einen Leitfaden für die barrierefreie Erstellung eines Shops.

Über Erweiterungen aus dem Shopify-App-Store lassen sich Optionen wie das automatische Vorlesen von Texten oder vorbereitete Farbschemata für Buttons etc. einbinden.

Auch Shopware bietet eine Erweiterung in Form eines monatlichen Abonnements mit dem Titel „barrierefrei Hilfswerkzeuge“ an.

Darin sind unter anderem Navigationsalternativen, Einstellungen zur Vergrößerung des Textes, Kontraste und weitere Features enthalten, die auf Ihren Shopware-Shop zugeschnitten sind.

Diese Optionen erleichtern die barrierefreie Erstellung, aber die Wahl Ihres Shopsystems hängt natürlich extrem von Ihrem Bedarf ab.

Lesetipp 📖: Chatbots im E-Commerce: die Zukunft des Kundenservice?

Um diesen zu ermitteln, können Sie sich Beratung bei Expertinnen und Experten oder einer Agentur einholen.

In diesem Falle sollten Sie auch eine externe Erstellung Ihres Online-Shops in Erwägung ziehen. Für eingespielte Entwicklerteams ist der Faktor Barrierefreiheit eine alltägliche Aufgabe.

Assistive Technologien

Einige der Nutzerinnen und Nutzer, die unter Einschränkungen leiden, erleichtern sich die Nutzung von Online-Anwendungen durch assistive Technologien.

Viele Betroffene nutzen natürlich auch mehrere assistive Technologien parallel, angepasst an ihre Bedürfnisse.

Bei eigens produzierten Inhalten können Sie in der Produktion schon viele Aspekte der Barrierefreiheit einbeziehen.

Audiodeskriptionen können Sie beispielsweise in Form einer zweiten Tonspur im Videoschnittprogramm hinzufügen.

Um Untertitel bereitzustellen, gibt es kostenfreie Software, wie SubtitleEdit.

Sie sollten also sicherstellen, dass Ihr Online-Shop mit den unten genannten Technologien kompatibel ist.

Screenreader

Screenreader dienen dazu, die Inhalte Ihres Shops vorzulesen. Das gilt nicht nur für die Textelemente, sondern genauso für Bilder sowie deren Alt-Attribute oder Videos.

Daneben dienen Screenreader auch zum Erkennen von Links und Ausfüllen von Kontaktformularen.

Die Formulare und Links müssen allerdings als solche gekennzeichnet werden, um korrekt erkannt werden zu können.

Diese Screenreader können Texte auch als Computerbraille verarbeiten. Das ist eine speziell für den Computer definierte Form der Blindenschrift, die über kleine Stifte an einem Braille-Display zeilenweise wiedergegeben werden kann.

Steuerung über die Tastatur

Es gibt diverse, auf die Bedürfnisse der Nutzerinnen und Nutzer angepasste Tastaturen, mit besonderen Tastaturbelegungen oder einer anderen Tastengröße.

Natürlich gibt es auch Tastaturen, die über andere Körperteile gesteuert werden können. Deshalb ist es wichtig, dass Ihr Online-Shop über die Tastatur bedienbar ist.

Einige Personen steuern Online-Anwendungen auch über Knöpfe oder angepasste Touchpads.

Steuerung via Spracheingabe

Eine Alternative zur Steuerung über die Tastatur ist die Sprachsteuerung.

Eine Spracherkennungssoftware kann auch die Sprache der Nutzerinnen und Nutzer in Text umwandeln.

Lesetipp 📖: Voice Search: Was ist das und wie können Sie davon profitieren?

Vergrößerungs-Software

Mithilfe von Vergrößerungs-Software kann das Computerbild vergrößert werden. Daneben lassen sich die Farben und Kontraste anpassen.

Accessible Rich Internet Application (ARIA)

Auch mithilfe der Ergänzungstechnik ARIA, einer semantischen Erweiterung für HTML vom W3C, kann Barrierefreiheit für die Userinnen und User garantiert werden.

Die verwendeten Programmiersprachen für ARIA sind JavaScript und Ajax.

Checkliste: Konzeption eines barrierefreien Online-Shops

Sie können die Aspekte der Barrierefreiheit von Anfang an einbeziehen, wenn Sie gerade im Aufbau eines neuen Online-Shops sind.

Durch eingehende Konzeption und einem Überblick über die wichtigsten Faktoren vor Projektbeginn sparen Sie sich Zeit im Projektverlauf sowie in der nachträglichen Überarbeitung.

Deshalb haben wir hier eine Checkliste mit 7 hilfreichen Tipps für die Erstellung Ihres barrierefreien Online-Shops vorbereitet.

1. Wählen Sie die richtige Schrift

Schriftart und -größe können das Lesen von Texten extrem erleichtern oder aber erschweren.

Wählen Sie eine gut leserliche, nicht verschnörkelte Schrift und achten Sie darauf, dass diese nicht zu klein eingesetzt wird.

2. Verwenden Sie eine einfache Sprache

In einfacher Sprache verfasste Texte sind zugänglicher für Menschen jedes Bildungsgrades und jeder Altersgruppe.

Auch für Personen mit mangelnden Deutschkenntnissen erleichtern einfach formulierte Texte den Zugang. Zudem lassen sich so Missverständnisse vermeiden.

Genauso ausschlaggebend ist die Textlänge: gerade Nutzerinnen und Nutzer mit mobilen Endgeräten, Konzentrationsschwierigkeiten oder Sehschwäche können Schwierigkeiten mit langen Texten und Beschreibungen haben.

3. Achten Sie auf eine klare Struktur

Die Seite sowie die Menüstruktur sollten logisch aufgebaut sein. So wird eine angenehme und verständliche Navigation durch den Online-Shop ermöglicht.

Passende Icons sowie sinnvoll eingesetzte Buttons tragen zudem zur Verständlichkeit des Shops bei.

4. Gestalten Sie die Farbgebung rücksichtsvoll

Nutzen Sie starke Kontraste, um Menschen mit Sichteinschränkungen oder Farbenblindheit das Lesen der Texte in Ihrem Shop nicht zu erschweren.

Lesetipp 📖: Webdesign: So wählen Sie die richtigen Farben für Ihren Online-Shop aus

5. Achten Sie auf barrierefreies HTML und Alt-Attribute

Damit die Screenreader-Software richtig funktioniert und alle Inhalte vorgelesen werden können, müssen alle Elemente des Shops erkannt werden.

HTML-Tags dienen hierbei dazu, die Elemente eines Shops exakt zu strukturieren und zuzuordnen. Bei Überschriften werden hierfür H-Tags (H1, H2, H3 etc.) verwendet.

Auch Alt-Attribute, also Alternativtexte zum Kennzeichnen von Videos und Bildern, tragen zur Gewährleistung der Barrierefreiheit bei, da auch sie von Screenreadern vorgelesen werden können.

Sie beschreiben unter anderem die Funktionsweise von Buttons oder was auf Bildern zu sehen ist.

Falls der Umfang des Alternativtexts nicht ausreicht, können Sie längere Beschreibungen verwenden, auf die der Alternativtext hinweist.

Durch die Kennzeichnung von dekorativen Elementen mit leeren alt-Attributen können diese für Screenreader verborgen werden.

6. Stellen Sie die Bedienbarkeit Ihres Online-Shops sicher

Der Shop muss ohne Maus navigierbar sein, da manche Nutzerinnen und Nutzer auf eine Bedienung über die Tastatur angewiesen sind.

Gründe dafür können motorische Einschränkungen sein, aber auch technische Probleme am Endgerät.

Verzichten Sie darauf, dass Slideshows oder Videos von selbst abgespielt werden.

Bei automatischem Abspielen sollte der Ton stumm geschaltet sein und Sie sollten ermöglichen, die Videos oder Slideshows schnell und einfach zu pausieren.

7. Holen Sie sich Feedback ein

Betroffene Menschen können oftmals deutlich besser beurteilen, welche Komponenten der Barrierefreiheit ihnen im Umgang mit einem Shop fehlen.

Bitten Sie Ihre Kundschaft doch einfach, Kontakt aufzunehmen und Ihnen Feedback zu Ihrem Online-Shop zu geben.

Tipp💡: In unserem kostenlosen Whitepaper verraten wir Ihnen 5 Tipps, mit denen Sie mehr Produktbewertungen generieren können.

Hier geht es zum kostenlosen Whitepaper ⬇️

Fazit

Das Sicherstellen einer barrierefreien Nutzung Ihres Online-Shops ist essenziell – sowohl für Ihre Kundschaft als auch für Sie selbst.

Angefangen bei einem verbesserten Google-Ranking, über ein breiteres Spektrum an potenziellen Kundinnen und Kunden bis hin zur Inklusion möglichst vieler Personen.

Ein barrierefreier Shop bietet nur Vorteile. Der erste Schritt liegt darin, dass Sie sich selbst und Ihre Mitarbeitenden für Maßnahmen der Barrierefreiheit sensibilisieren und in die Prozesse Ihrer Shop-Pflege einzubauen.

Damit Ihr Shop auch in Zukunft rechtskonform ist und durch einwandfreie Barrierefreiheit glänzt, sollten Sie sich überlegen, auf die Hilfe von Expert:innen, beispielsweise in Zusammenarbeit mit einem Digitalisierungspartner, zurückzugreifen.

Über den Autor

Michael Auger, Digital Business Cosultant bei LightsOn | Quelle: LightsOn

Michael Auger ist Digital Business Consultant bei LightsOn und erster Ansprechpartner in Sachen E-Commerce.

LightsOn sorgt als Digitalisierungspartner für mehr Klarheit, Sichtbarkeit und Wachstum in der digitalen Welt von morgen. So entwickeln wir zukunftsorientierte digitale Lösungen für und mit Unternehmen.

Neben den Bereichen Strategieberatung, Online-Marketing und Content-Management-Systems liegt einer unserer Schwerpunkte in der konzeptionellen und technischen Umsetzung von E-Commerce Webshops.

Hier arbeiten wir vorwiegend mit den Shopsystemen Shopware, Spryker und Magento.