Die wichtigsten WCAG-Kriterien für Online-Shops betreffen vor allem die Bereiche Tastaturzugänglichkeit, Farbkontraste, Formulargestaltung und klare Navigationspfade. Wer einen Online-Shop betreibt, muss sicherstellen, dass Produkte, Warenkorb und Bezahlvorgang auch für Menschen mit Behinderungen nutzbar sind. Dieser Artikel beantwortet die häufigsten Fragen rund um Barrierefreiheit im E-Commerce.
Welche WCAG-Prinzipien gelten speziell für E-Commerce-Seiten?
Für Online-Shops gelten dieselben vier WCAG-Grundprinzipien wie für alle Websites: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Im E-Commerce-Kontext sind diese Prinzipien jedoch besonders anspruchsvoll umzusetzen, da Shops komplexe Interaktionselemente wie Filter, Produktkonfiguratoren, Warenkörbe und mehrstufige Checkout-Prozesse enthalten.
Wahrnehmbarkeit bedeutet im Shop-Kontext: Produktbilder brauchen aussagekräftige Alternativtexte, Videoinhalte benötigen Untertitel, und Preise sowie Angebotsbadges müssen auch ohne Farbe erkennbar sein. Ein roter „Sale“-Sticker, der ausschließlich durch Farbe kommuniziert, ist für farbenblinde Nutzerinnen und Nutzer unsichtbar.
Bedienbarkeit ist im E-Commerce besonders kritisch: Alle Funktionen, von der Produktsuche über Filter bis zum Kauf, müssen vollständig per Tastatur erreichbar sein. Das betrifft auch Dropdown-Menüs, modale Dialoge und Slider-Elemente, die in vielen Shops standardmäßig verbaut sind.
Verständlichkeit verlangt klare Fehlermeldungen bei Formulareingaben, eindeutige Beschriftungen aller Formularfelder und eine vorhersehbare Seitenstruktur. Gerade bei Checkout-Formularen mit Adress- und Zahlungsdaten ist das entscheidend.
Robustheit schließlich stellt sicher, dass der Shop-Code so sauber strukturiert ist, dass Screenreader und andere assistive Technologien ihn korrekt interpretieren können. ARIA-Attribute müssen korrekt eingesetzt werden, ohne die native HTML-Semantik zu ersetzen.
Welche WCAG-Kriterien sind für den Checkout-Prozess am kritischsten?
Im Checkout-Prozess sind die WCAG-Erfolgskriterien zu Formularfeldern, Fehlererkennung und Tastatursteuerung besonders relevant. Fehler in diesen Bereichen können dazu führen, dass Menschen mit Behinderungen den Kauf nicht abschließen können, was sowohl rechtliche als auch wirtschaftliche Konsequenzen hat.
Die folgende Liste zeigt die kritischsten WCAG-Anforderungen für den Checkout:
- Beschriftungen für Formularfelder (WCAG 1.3.1 und 3.3.2): Jedes Eingabefeld muss ein sichtbares, programmatisch verknüpftes Label haben. Platzhaltertexte im Feld ersetzen kein Label, da sie beim Tippen verschwinden.
- Fehlererkennung und -beschreibung (WCAG 3.3.1 und 3.3.3): Fehleingaben müssen klar identifiziert und in Textform beschrieben werden. Eine rote Umrandung allein reicht nicht.
- Tastaturzugänglichkeit (WCAG 2.1.1): Alle Schaltflächen, Zahlungsoptionen und Bestätigungsschritte müssen ohne Maus erreichbar und aktivierbar sein.
- Fokusreihenfolge (WCAG 2.4.3): Die Tab-Reihenfolge muss der visuellen Abfolge der Formularfelder entsprechen, damit Tastaturnutzer nicht durch den Prozess springen.
- Zeitlimits (WCAG 2.2.1): Wenn eine Sitzung abläuft, müssen Nutzer gewarnt werden und die Möglichkeit haben, die Zeit zu verlängern.
- Authentifizierung (WCAG 3.3.8, neu in 2.2): Kognitive Tests wie das Abtippen von Zeichenfolgen dürfen beim Login nicht die einzige Option sein.
Wie wirkt sich schlechte Barrierefreiheit auf die Conversion Rate aus?
Schlechte digitale Barrierefreiheit senkt die Conversion Rate, weil ein erheblicher Teil der Nutzerinnen und Nutzer Kaufprozesse abbricht, wenn sie auf unüberwindbare Barrieren stoßen. Menschen mit Behinderungen machen einen bedeutenden Anteil der Internetnutzer aus, und auch situative Einschränkungen, etwa eine gebrochene Hand oder helles Sonnenlicht auf dem Bildschirm, betreffen viel mehr Menschen als häufig angenommen.
Konkrete Auswirkungen auf die Conversion Rate entstehen durch:
- Abbrüche im Checkout: Wenn Formularfelder nicht korrekt beschriftet sind, können Screenreader-Nutzer nicht erkennen, welche Daten erwartet werden. Der Kauf wird abgebrochen.
- Fehlgeschlagene Produktsuche: Wenn Filter und Sortieroptionen nicht per Tastatur bedienbar sind, können motorisch eingeschränkte Nutzer Produkte nicht finden.
- Unlesbare Inhalte: Zu geringe Farbkontraste bei Preisen, Rabatten oder Call-to-Action-Buttons erschweren die Nutzung für sehbeeinträchtigte Menschen und ältere Nutzer.
- Verlorenes Vertrauen: Nutzer, die eine Website als schwer bedienbar erleben, verlassen sie und kehren seltener zurück.
Barrierefreiheit ist damit kein rein rechtliches Thema, sondern ein wirtschaftlicher Faktor. Ein zugänglicher Online-Shop erreicht eine breitere Zielgruppe und reduziert Kaufabbrüche strukturell.
Was sind häufige WCAG-Fehler in Online-Shops?
Die häufigsten WCAG-Fehler in Online-Shops sind fehlende Alternativtexte für Produktbilder, unzureichende Farbkontraste, nicht tastaturbedienbare Elemente sowie fehlende oder fehlerhafte Beschriftungen von Formularfeldern. Diese Fehler lassen sich in vielen Fällen durch einen automatisierten Barrierefreiheitstest identifizieren.
Eine Übersicht der am häufigsten auftretenden Probleme:
- Fehlende Alt-Texte: Produktbilder ohne Alternativtext sind für Screenreader-Nutzer nicht interpretierbar. Besonders problematisch sind dekorative Bilder, die fälschlicherweise als informativ behandelt werden, und umgekehrt.
- Unzureichende Farbkontraste: Hellgraue Schrift auf weißem Hintergrund, wie sie in modernen Minimaldesigns verbreitet ist, erfüllt häufig nicht das WCAG-Kontrastverhältnis von mindestens 4,5:1 für normalen Text.
- Nicht zugängliche Modaldialoge: Produktvorschauen, Größentabellen oder Warenkorb-Overlays, die per Mausklick geöffnet werden, sind oft nicht per Tastatur schließbar und halten den Fokus nicht korrekt.
- Fehlende Fokusindikatoren: Viele Shops entfernen den sichtbaren Tastaturfokus aus gestalterischen Gründen. Das macht die Navigation per Tastatur faktisch unmöglich.
- Falsch eingesetzte ARIA-Attribute: ARIA soll Barrierefreiheit verbessern, kann sie aber verschlechtern, wenn es unkorrekt verwendet wird, etwa wenn native HTML-Elemente durch ARIA-Rollen überschrieben werden, ohne die entsprechende Tastaturinteraktion zu implementieren.
- Nicht beschriftete Schaltflächen: Icon-Buttons wie Warenkorb, Wunschliste oder Löschen ohne sichtbaren oder versteckten Textinhalt sind für Screenreader nicht interpretierbar.
Ab wann müssen Online-Shops WCAG-konform sein?
Online-Shops, die unter das Barrierefreiheitsstärkungsgesetz (BFSG) fallen, müssen seit dem 28. Juni 2025 die Anforderungen an digitale Barrierefreiheit erfüllen. Das BFSG setzt den European Accessibility Act (EAA) in deutsches Recht um und gilt für Unternehmen, die Produkte oder Dienstleistungen an Verbraucher in der EU anbieten.
Relevant ist dabei, welche Unternehmen betroffen sind: Das Gesetz gilt grundsätzlich für Wirtschaftsakteure, die Verbraucherprodukte oder bestimmte Dienstleistungen, darunter E-Commerce-Dienste, in Verkehr bringen oder erbringen. Kleinstunternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens zwei Millionen Euro sind von bestimmten Anforderungen ausgenommen.
Die technische Grundlage bildet die EN 301 549, die weitgehend auf den WCAG-2.1-Kriterien auf Konformitätsstufe AA basiert. Für Online-Shops bedeutet das: Wer seinen Shop auf WCAG-2.1-AA-Niveau prüft und nachweisbar an der Umsetzung arbeitet, ist auf einem guten Weg. Automatisierte Tests können dabei helfen, Schwachstellen frühzeitig zu erkennen, ersetzen jedoch keine vollständige manuelle Prüfung. Ein gutes Testergebnis bedeutet nicht automatisch rechtliche Konformität.
Zusätzlich ist eine Barrierefreiheitserklärung verpflichtend, in der Unternehmen dokumentieren, welche Anforderungen erfüllt sind und wo noch Lücken bestehen.
Wie lässt sich die WCAG-Konformität eines Online-Shops prüfen?
Die WCAG-Konformität eines Online-Shops lässt sich am besten durch eine Kombination aus automatisierten Tests und manuellen Prüfungen feststellen. Automatisierte Tools decken typischerweise rund 30 bis 50 Prozent aller möglichen Barrieren ab, sind aber ein unverzichtbarer erster Schritt, um offensichtliche Fehler schnell zu identifizieren.
Automatisierte Tests: Was sie leisten und wo ihre Grenzen liegen
Automatisierte Barrierefreiheitstools prüfen den HTML-Code einer Website auf Konformität mit WCAG-Regeln. Sie erkennen technische Fehler wie fehlende Alt-Texte, unzureichende Farbkontraste, fehlende Formular-Labels oder inkorrekte ARIA-Attribute zuverlässig und schnell. Für einen Online-Shop mit vielen Unterseiten, Produktseiten und Filterfunktionen ist ein automatisierter Scan besonders wertvoll, weil er alle Seiten systematisch erfasst.
Grenzen bestehen dort, wo Kontext und menschliches Urteil gefragt sind: ob ein Alternativtext sinnvoll beschreibt, was auf dem Produktbild zu sehen ist, ob die Tastaturreihenfolge logisch wirkt oder ob Inhalte verständlich formuliert sind. Diese Aspekte erfordern manuelle Prüfung.
Manuelle Tests: Was zwingend geprüft werden muss
Manuelle Tests sollten mindestens folgende Bereiche abdecken:
- Vollständige Tastaturnavigation durch alle Shop-Funktionen, einschließlich Warenkorb und Checkout
- Screenreader-Test mit gängigen Tools wie NVDA oder VoiceOver, um zu prüfen, ob Inhalte sinnvoll vorgelesen werden
- Zoom-Test auf 200 Prozent, um sicherzustellen, dass Inhalte nicht abgeschnitten werden
- Prüfung der Verständlichkeit von Fehlermeldungen und Hilfetexten
- Überprüfung, ob die sichtbare Reihenfolge der Inhalte der HTML-Struktur entspricht
Die Web Accessibility Initiative (WAI) bietet für den manuellen Schnelltest eine öffentlich zugängliche Checkliste, die als Einstieg geeignet ist. Für eine rechtssichere Prüfung empfiehlt sich die Beauftragung eines spezialisierten Dienstleisters, etwa eines Unternehmens aus dem BITV-Test-Prüfverbund.
Wie decareto bei der Barrierefreiheitsprüfung Ihres Online-Shops unterstützt
Wir bei decareto haben eine Accessibility-Software entwickelt, die speziell für Agenturen, Compliance-Teams und externe Berater konzipiert ist, die Websites auf Barrierefreiheit prüfen müssen, ohne ein Enterprise-Budget oder ein spezialisiertes Inhouse-Team zu haben.
Konkret unterstützt decareto bei der WCAG-Prüfung von Online-Shops durch:
- Automatisierte Scans aller Unterseiten, einschließlich Produktseiten, Kategorieseiten und Checkout, mit Ergebnissen in Minuten statt Stunden
- Priorisierung nach Schweregrad, damit Sie wissen, welche Barrieren zuerst behoben werden sollten
- Filterung nach WCAG-Konformitätslevel (A, AA, AAA), um gezielt auf die gesetzlich relevanten Anforderungen zu fokussieren
- Konkrete Handlungsempfehlungen für jeden gefundenen Fehler, inklusive HTML-Code und CSS-Selektor zur schnellen Lokalisierung im Quelltext
- Manuelle Erfassung von Problemen, die nur durch menschliche Prüfung auffindbar sind, direkt im Report ergänzbar
- Automatische Erstellung der Barrierefreiheitserklärung, die nach BFSG verpflichtend ist
- Dauerhafte Überwachung mit automatischen Benachrichtigungen bei Änderungen auf der Website
Bereit, Ihren Online-Shop auf Barrierefreiheit zu prüfen? Testen Sie unsere Barrierefreiheits-Software und erhalten Sie in wenigen Minuten einen strukturierten Report zu den WCAG-Schwachstellen Ihres Shops. Oder informieren Sie sich über unsere Preise und Pakete, um das passende Modell für Ihre Anforderungen zu finden.
Disclaimer: Dieser Text wurde mit Hilfe von KI erstellt und könnte Fehler beinhalten.
Ähnliche Artikel
- Welche Barrierefreiheitsanforderungen gelten für digitale Dokumente?
- Wie erkennt man Barrierefreiheitsprobleme bei eingebetteten Karten?
- Wie erkennt man fehlende Sprachauszeichnung auf einer Website?
- Welche Datenschutzrisiken bestehen bei der Verarbeitung von Bewerberdaten auf Karriereseiten?
- Wie liefern Agenturen DSGVO-Audit-Reports unter eigenem Whitelabel an ihre Kunden aus?
