Warum barrierefreie Online-Shops unverzichtbar sind
Wenn dein Online-Shop nicht barrierefrei ist, schließt du automatisch viele potenzielle Kunden aus. Es geht nicht nur um Menschen mit Behinderungen – auch ältere Menschen, Personen mit temporären Einschränkungen oder alle, die gerade nur die Tastatur nutzen können, sind betroffen.
Wer profitiert von barrierefreien Online-Shops?
- Menschen, die Screenreader nutzen (Sehbehinderungen, Blindheit)
- Menschen, die nur die Tastatur verwenden können (motorische Einschränkungen)
- Ältere Menschen mit nachlassender Sehkraft oder Motorik
- Menschen mit kognitiven Einschränkungen, die klare Strukturen brauchen
- Alle mit temporären Einschränkungen (gebrochener Arm, helles Sonnenlicht)
Die Realität: Ein nicht-barrierefreier Shop bedeutet weniger Reichweite, verlorene Kunden und im schlimmsten Fall rechtliche Probleme. Viele Shop-Betreiber unterschätzen, wie viele Menschen ihren Shop nicht nutzen können – und wie viel Umsatzpotenzial dadurch verloren geht.
Seit dem Barrierefreiheitsstärkungsgesetz (BFSG) müssen Online-Shops ab Juni 2025 barrierefrei sein – mit Ausnahmen für Kleinstunternehmen (<10 Mitarbeiter, <2 Mio. € Umsatz). Wer sich nicht daran hält, riskiert Abmahnungen und Bußgelder!
Der Unterschied: Online-Shop vs. normale Website
Ein Online-Shop ist deutlich komplexer als eine normale Website. Warum?
Eine normale Website hat:
- Textseiten
- Navigation
- Kontaktformular
- Vielleicht einen Blog
Ein Online-Shop hat zusätzlich:
- Produktfilter und Sortierung
- Warenkorb mit Live-Updates
- Checkout-Prozess (mehrere Schritte)
- Produktvarianten (Größe, Farbe, etc.)
- Verfügbarkeits-Status
- Bewertungen und Sternchen
- Zahlungsmethoden
- Versandoptionen
Jedes dieser Features kann eine Barriere sein, wenn es nicht richtig umgesetzt wird.
Die Basics: Das Fundament für barrierefreie Online-Shops
Bevor du dich an komplexe Shop-Features wagst, müssen die Grundlagen stimmen:
Die wichtigsten Basics auf einen Blick:
- Semantische HTML-Tags –
header,nav,main,section,footer,article - Überschriften-Hierarchie – logische Struktur ohne Sprünge
- Alt-Texte – beschreibende Texte für alle Produktbilder
- ARIA-Attribute –
aria-label,aria-expanded,aria-livewo nötig - Farbkontraste – mindestens 4.5:1 für Text
- Fokus-Indikatoren – sichtbar bei Tastaturnutzung
Diese Basics sind die Basis für alles! Ohne sie wird dein Shop nie barrierefrei – egal wie viel Mühe du dir bei komplexeren Features gibst.
Mehr Details zu den Basics?
In unserem digitale Barrierefreiheit Lernpfad findest du ausführliche Erklärungen zu jedem dieser Punkte. Von semantischem HTML bis ARIA – Schritt für Schritt erklärt!
Der häufigste Fehler: Keine Tastatursteuerung
Jetzt wird’s konkret! Der größte Fehler in Online-Shops: Du kannst sie nicht mit der Tastatur bedienen.
Warum Tastatursteuerung so wichtig ist
WCAG 2.1.1 (Level A) fordert: Alle Funktionen müssen mit der Tastatur nutzbar sein.
Wer ist davon betroffen?
- Screenreader-Nutzer (Menschen mit Sehbehinderungen nutzen nur Tastatur)
- Menschen mit motorischen Einschränkungen (können keine Maus halten)
- Menschen mit Tremor (Zittern macht Maus-Nutzung unmöglich)
- Power-User (viele bevorzugen Tastatur für Geschwindigkeit)
- Menschen mit RSI (Repetitive Strain Injury vom Mausklicken)
Die Test-Frage: Kannst du deinen gesamten Shop nur mit der Tab-Taste und Enter bedienen? Von der Startseite bis zum abgeschlossenen Kauf?
Ein vorbildliches Beispiel: Accessible eCommerce Demo
Ein richtig gutes Beispiel für Tastatursteuerung findest du hier:
https://publicissapient.github.io/accessible-ecommerce-demo/index.html
Was ist das?
Das ist ein interaktiver Prototyp eines barrierefreien Online-Shops von Publicis Sapient. Die Seite wurde speziell entwickelt, um zu zeigen, wie E-Commerce-Komponenten barrierefrei funktionieren können – mit Fokus auf Tastatur und Screenreader.
aria-live: Dynamische Änderungen mitteilen
Einer der häufigsten Fehler in Online-Shops: Screenreader-Nutzer bekommen kein Feedback, wenn sich etwas ändert.
Stell dir vor: Du klickst auf „In den Warenkorb“ – visuell springt der Zähler von „0“ auf „1“. Aber als Screenreader-Nutzer hörst du nichts. Wurde das Produkt jetzt hinzugefügt oder nicht?
Hier kommt aria-live ins Spiel!
aria-live teilt dem Screenreader mit: „Hey, hier hat sich etwas geändert – lies das vor!“
Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenScreen Recording der barrierefreien Produktseite mit Screenreader-Audio. Zeige, wie ein User auf „In den Warenkorb“ klickt. Screenreader sagt: „Premium Kopfhörer Pro X wurde hinzugefügt. Es befinden sich 2 Artikel im Warenkorb.
Wann brauchst du aria-live im Shop?
- Warenkorb-Updates – „Premium Kopfhörer Pro X wurde in den Warenkorb gelegt“
- Fehlermeldungen – „Dieses Produkt ist leider ausverkauft“
- Verfügbarkeits-Status – „Nur noch 2 Stück auf Lager“
- Mengenänderungen – „Menge auf 3 geändert“
- Preisaktualisierungen oder Rabatte – „Neuer Preis: 89,90 € nach Rabatt“
Testen, testen, testen – besonders beim Kaufprozess!
Du kannst alle Features einbauen, die du willst – aber wenn du nicht testest, weißt du nicht, ob sie wirklich funktionieren.
Und hier ist die harte Wahrheit: Der Kaufprozess ist die kritischste Stelle in deinem Shop. Wenn ein Kunde hier scheitert, hast du ihn verloren.
Warum der Checkout so kritisch ist
Der Kaufprozess ist komplex:
- Mehrere Formularfelder (Name, Adresse, E-Mail, Telefon)
- Zahlungsmethoden auswählen
- Versandoptionen wählen
- AGBs akzeptieren
- Bestellung bestätigen
Jeder dieser Schritte kann eine Barriere sein!
Ein einziges Formularfeld ohne Label kann bedeuten:
- Screenreader sagt nur „Bearbeitungsfeld“ (aber welches?)
- User muss raten, was eingetragen werden soll
- Frustration steigt
- User bricht ab → Verkauf verloren
