WCAG 2.1 AA Checkliste für Online-Shops: Barrierefreiheit Schritt für Schritt
· WCAG · EAA · checkliste · barrierefreiheit
WCAG 2.1 AA Checkliste für Online-Shops: Barrierefreiheit Schritt für Schritt
Seit dem 28. Juni 2025 ist das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland in Kraft. Es setzt den European Accessibility Act — EU-Richtlinie 2019/882 — in nationales Recht um und verpflichtet Online-Shops, die Anforderungen der WCAG 2.1 auf Konformitätsstufe AA zu erfüllen. Wer im deutschen E-Commerce tätig ist und Produkte oder Dienstleistungen an Endverbraucher verkauft, ist betroffen. Diese barrierefreiheit e-commerce eaa Checkliste zeigt, worauf es ankommt — und wo deutsche Shops am häufigsten scheitern.
Was das BFSG für Online-Shops konkret bedeutet
Das Gesetz gilt für Unternehmen, die digitale Produkte oder Dienstleistungen an Verbraucher in der EU anbieten. Für Online-Shops heißt das: der Shop selbst, die Checkout-Strecke, Kundenkommunikation und alle digitalen Bestandteile müssen barrierefrei sein.
Ausnahmen gibt es für Kleinstunternehmen (unter 10 Mitarbeiter und unter 2 Millionen Euro Jahresumsatz). Wer diese Schwellenwerte überschreitet, ist verpflichtet. Der Bundesfachstelle Barrierefreiheit und den Marktüberwachungsbehörden der Länder obliegt die Durchsetzung. Bei Verstößen drohen Bußgelder von bis zu 100.000 Euro.
Die technische Grundlage sind die WCAG 2.1, Konformitätsstufe AA. Diese 50 Erfolgskriterien sind in vier Prinzipien gegliedert: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Im E-Commerce schlagen dieselben acht bis zehn Kriterien immer wieder als Fehlerquellen an.
Die WCAG-Checkliste für deutsche Online-Shops
| Kriterium | Bedeutung im Shop | Häufigkeit als Fehler |
|---|---|---|
| 1.1.1 Nicht-Text-Inhalte | Jedes Produktbild braucht einen Alt-Text | Sehr häufig — Dateinamen oder leere Attribute |
| 1.4.3 Kontrast (Minimum) | Fließtext braucht ein Kontrastverhältnis von 4,5:1 | Häufig — Grau auf Weiß in Produktbeschreibungen |
| 2.1.1 Tastatur | Alle Funktionen müssen per Tastatur bedienbar sein | Häufig — Dropdowns, Warenkorb-Aktionen, Modals |
| 2.4.2 Seite mit Titel | Jede Seite braucht einen eindeutigen <title> | Mittel — Produktseiten mit identischem Titel |
| 3.1.1 Sprache der Seite | Das lang-Attribut muss zur Seitensprache passen | Mittel — englisches lang="en" auf deutschen Seiten |
| 4.1.2 Name, Rolle, Wert | Formularfelder brauchen Label; Schaltflächen brauchen Text | Sehr häufig — Symbolschaltflächen ohne Beschriftung |
| 1.4.11 Nicht-Text-Kontrast | Eingabefelder und Icons brauchen 3:1 Kontrast | Häufig — hellgraue Eingaberahmen |
| 2.4.4 Linkzweck | Linktext muss aus dem Kontext heraus verständlich sein | Häufig — „Mehr lesen", „Hier klicken" ohne Kontext |
Alt-Texte: der häufigste Fehler und seine Lösung
WCAG 1.1.1 ist das Kriterium, das in deutschen Online-Shops am häufigsten verletzt wird. Ein Produktbild ohne Alt-Text — oder mit einem Dateinamen als Alt-Text — ist für blinde und sehbehinderte Kunden nutzlos. Screenreader lesen stattdessen „DSC00471.jpg" vor.
Ein korrekter Alt-Text beschreibt, was auf dem Bild zu sehen ist. Für Produktbilder heißt das: Farbe, Material, Schnitt, relevante Details — nicht nur der Produktname. „Schwarze Lederjacke, Bikerstil, metallische Reißverschlüsse, Slim Fit" ist besser als „Jacke Bild 1".
Dekorative Bilder — Hintergrundgrafiken, Dekolinien, reine Schmuckelemente — erhalten alt="". Das signalisiert Screenreadern, das Bild zu überspringen.
Farbkontrast: was häufig übersehen wird
Das Kontrastverhältnis von 4,5:1 gilt für Fließtext unter 18 Punkt (beziehungsweise 14 Punkt Fettschrift). Große Schrift — Überschriften und Buttons ab 18 Punkt — benötigt mindestens 3:1. Viele Shops prüfen nur die Hauptüberschriften und übersehen, dass Produktbeschreibungen, Preishinweise, Filternamen und Footer-Links ebenfalls dem Kontrast-Kriterium unterliegen.
Typische Problemstellen: grauer Platzhaltertext in Suchfeldern, helle Schriftfarbe auf Produktkacheln, niedrigkontraste Verfügbarkeitsanzeigen.
Tastaturnavigation: die vollständige Checkout-Strecke testen
Tastaturnavigation bedeutet mehr als die Tab-Reihenfolge der Felder. Es bedeutet: Kann ein Nutzer, der ausschließlich die Tastatur verwendet, einen Kauf abschließen? Das schließt die Produktsuche, das Hinzufügen zum Warenkorb, die Adresseingabe, die Zahlungsauswahl und die Bestellbestätigung ein.
Bei Shopify und WooCommerce entstehen Probleme häufig durch benutzerdefinierte Dropdowns für Varianten, Modaldialoge für Quick-View-Funktionen und JavaScript-gesteuerte Filterkomponenten. Diese werden im Standard-Theme-Framework oft nicht für Tastaturnutzung getestet.
Die Barrierefreiheitserklärung: Pflicht ab Tag 1
Das BFSG und die WCAG-Anforderungen beinhalten auch eine Informationspflicht. Jeder betroffene Online-Shop muss eine Barrierefreiheitserklärung (Accessibility Statement) gemäß EN 301 549 Anhang V veröffentlichen. Diese Erklärung dokumentiert:
- Welchen Konformitätsgrad der Shop erreicht
- Welche bekannten Barrieren noch bestehen
- Wie Nutzer barrierefreien Zugang anfragen oder Mängel melden können
- Wen sie bei nicht zufriedenstellender Reaktion kontaktieren können (Durchsetzungsstelle)
Die Erklärung muss zugänglich — also selbst barrierefrei — und über einen gut sichtbaren Link erreichbar sein. Typischerweise im Footer. Eine fehlende oder inhaltlich leere Erklärung ist selbst ein Verstoß.
Schritt für Schritt: wie du dein Audit angehen solltest
Schritt 1: Automatisierter Scan. Ein WCAG-Scanner identifiziert eindeutige technische Fehler — fehlende Alt-Texte, Kontrastverstöße, fehlende Sprachattribute. Das deckt etwa 30–40 % aller Probleme ab.
Schritt 2: Manueller Tastaturtest. Trenne die Maus vom Rechner und versuche, einen Kaufabschluss durchzuführen. Nur so erkennst du, ob die gesamte Bestellstrecke ohne Zeigegerät funktioniert.
Schritt 3: Screenreader-Test. NVDA (kostenlos, Windows) oder der eingebaute VoiceOver (macOS, iOS) zeigen, was ein blinder Kunde tatsächlich hört. Besonders aufschlussreich: Produktseiten, Warenkorb und Bezahlseite.
Schritt 4: Priorisierung. WCAG 1.1.1 (Alt-Text) und 1.4.3 (Kontrast) sind für die meisten Shops die häufigsten und wirkungsvollsten Fixes. Sie sind technisch lösbar, ohne das Theme neu zu bauen. Schaltflächen ohne Beschriftung und fehlendes lang-Attribut sind ebenfalls schnelle Wins.
Schritt 5: Barrierefreiheitserklärung. Sobald du weißt, welche Kriterien erfüllt sind und welche nicht, kannst du die Erklärung auf Basis dieser Bestandsaufnahme erstellen und veröffentlichen.
Führe einen kostenlosen WCAG-Scan deines Shops durch — und starte kostenlos mit der automatischen Alt-Text-Generierung.