Accessibility (E-Commerce)

Definition: Accessibility (Barrierefreiheit) im E-Commerce bezeichnet die Gestaltung von Online-Shops nach dem Prinzip, dass alle Menschen – unabhängig von körperlichen oder kognitiven Einschränkungen – Produkte finden, vergleichen und kaufen können. Grundlage sind die WCAG-Richtlinien (Web Content Accessibility Guidelines). Der European Accessibility Act macht Barrierefreiheit ab Juni 2025 für viele digitale Dienste in der EU rechtlich verpflichtend.

Erläuterung

Etwa 15–20 % der Bevölkerung leben mit einer Form von Einschränkung – Seh-, Hör-, Mobilitäts- oder kognitive Beeinträchtigungen. Ein barrierefreier Shop erschliesst diese Kaufkraft, verbessert gleichzeitig die allgemeine UX (sauberere Struktur, besserer Farbkontrast, klarere Navigation) und stärkt das SEO durch semantisches HTML und Alt-Texte. Nicht-Konformität birgt seit 2025 rechtliche Risiken im EU-Markt.

WCAG-Anforderungen für E-Commerce (Kernanforderungen)

Wahrnehmbar: Alt-Texte für alle Produktbilder; Untertitel für Produktvideos; ausreichender Farbkontrast (4,5:1 für Text)
Bedienbar: Vollständige Tastaturnavigation durch Shop und Checkout; sichtbare Fokus-Indikatoren; kein reines Hover-abhängiges Interface
Verständlich: Klar beschriftete Formularfelder; Fehlermeldungen in verständlicher Sprache; vorhersehbare Navigation
Robust: Korrekte HTML-Semantik (Buttons sind <button>, Links sind <a>); ARIA-Labels für interaktive Elemente; kompatibel mit Screenreadern

Prioritäre Massnahmen für Online-Shops

Alt-Texte: Jedes Produktbild braucht einen beschreibenden Alt-Text (Produkt + Farbe + Hauptmerkmal); dekorative Bilder alt=""
Barrierefreier Checkout: Formularfelder mit <label>-Tags; Fehlermeldungen mit Bezug auf das fehlerhafte Feld; kein zeitlicher Ablauf ohne Verlängerungsmöglichkeit
Tastaturnavigation: Kompletter Kaufprozess per Tastatur durchführbar; Tab-Reihenfolge logisch
Farbkontraste: Buttons, Preise und CTAs mit ausreichendem Kontrast; Kontrast-Checker (z. B. WebAIM) zur Überprüfung
Screenreader-Kompatibilität: NVDA/JAWS testen; besonders Produktfilter, Bildgalerien und Modal-Fenster sind häufige Problemstellen

European Accessibility Act (EAA) – Was gilt für E-Commerce?

Ab 28. Juni 2025 gilt der EAA für Online-Dienste im EU-Raum, die Verbrauchern angeboten werden
Betroffen: Online-Shops mit Produkten und Dienstleistungen für Verbraucher; B2B-Shops haben Ausnahmen
Kleinstunternehmen (unter 10 Mitarbeiter und 2 Mio. € Umsatz) sind ausgenommen
Referenzstandard: EN 301 549 (entspricht WCAG 2.1 Level AA)
Konsequenzen bei Verstoss: Bussgelder, Abmahnungen, Klagemöglichkeit durch Behindertenverbände

Testing-Tools für Accessibility

WAVE (wave.webaim.org): Browser-Extension; zeigt Fehler direkt auf der Seite an
Lighthouse (Chrome DevTools): Accessibility-Score als Teil des automatischen Audits
axe DevTools: Detailliertere technische Prüfung; IDE-Integration für Entwickler
Manuelle Tests: Kompletten Kaufprozess mit Tastatur und Screenreader (NVDA kostenlos) durchführen

Praxistipp: Starten Sie mit einem automatisierten Accessibility-Check in Lighthouse oder WAVE und beheben Sie die kritischsten Fehler zuerst: fehlende Alt-Texte und ungenügender Farbkontrast sind die häufigsten und schnellsten Fixes. Testen Sie danach den gesamten Checkout-Prozess ausschliesslich mit der Tastatur (Tab, Enter, Pfeil-Tasten) – dieser Bereich ist für den EAA besonders relevant und für Nutzer mit motorischen Einschränkungen kritisch. Wenn Sie Shopify nutzen: Das Thema Accessibility ist seit 2023 Teil von Shopifys Thema-Qualitätsstandards; viele Premium-Themes sind bereits weitgehend WCAG-konform.