♿ Accessibility im Onlineshop – warum Screenreader-User deine Kunden sind 🗣️

Was Accessibility im E-Commerce bedeutet

Accessibility heißt: Jede Person kann deinen Shop nutzen. Unabhängig von Sehen, Hören, Motorik, Kognition oder Technik. Das betrifft Struktur, Semantik, Tastatursteuerung, Fehlermeldungen, Kontrast, Medien, Mails, PDFs und die ganze Journey bis zur Bestellbestätigung. Accessibility ist kein Styling. Accessibility ist Information und Interaktion.

Für Screenreader-User zählt die Ordnung im DOM. Sie „sehen“ Überschriftenhierarchie, Landmark-Rollen, Labels, Zustände und Fokusabläufe. Was nicht im Code steckt, existiert nicht. Deshalb ist semantisches HTML dein stärkstes Tool. Danach kommen sinnvolle ARIA-Attribute, die Lücken füllen, aber niemals falsches HTML kaschieren.

Zum Einlesen am Anfang empfehle ich zwei solide Grundlagen:
WCAG Überblick (W3C WAI) und BITV 2.0.

Screenreader in der Praxis: So „denken“ JAWS, NVDA und VoiceOver

Screenreader folgen dem Fokus und der semantischen Struktur. Sie geben Rollen, Namen und Zustände aus. Beispiele: „Link“, „Button erweitert“, „Checkbox nicht aktiviert“, „Überschrift Ebene 2“, „Liste mit 5 Elementen“. Du steuerst diese Ansagen mit nativem HTML und sauberen Attributen. ARIA ergänzt nur, wenn HTML nichts hergibt.

Wichtige Verhaltensregeln:

• Immer einen sichtbaren und logischen Tastaturfokus liefern. Reihenfolge entspricht der visuellen Lesereihenfolge.
• Kein Fokusfangen im Overlay. Escape schließt. Fokusrückgabe an das auslösende Element.
• Interaktive Elemente sind nativ interaktiv. Keine <div>-Buttons. Nutze <button> und <a>.
• Icons ohne Text brauchen eine Textalternative oder ein aria-label. Dekorative Icons sind aria-hidden="true".

Die 12 wichtigsten Baustellen im Shop und wie du sie löst

1. Überschriftenhierarchie

Nur eine H1 pro Seite. Danach H2 und H3 in logischer Tiefe. Keine Sprünge. Kategorie- und Produktseiten brauchen klare Struktur. Filter sind nicht H2, wenn sie nicht den Inhalt gliedern.

2. Landmarks

Nutze <header>, <nav>, <main>, <aside>, <footer>. Für mehrere Navigationen setze aria-label wie „Hauptnavigation“ oder „Breadcrumb“. So springen Screenreader-User gezielt.

3. Produktkarten richtig bauen

Jede Karte braucht einen eindeutigen Produktlink mit Titel als Linktext. Preise sind Text, nicht nur Grafiken. Vermeide verschachtelte Links. Beispiel:

<article>
  <h3><a href="/p/slug">Sneaker Orion</a></h3>
  <p>Preis: <span aria-label="Preis">89,90 €</span></p>
  <button type="button" aria-label="In den Warenkorb: Sneaker Orion">In den Warenkorb</button>
</article>

Screenreader onlineshop – E-Commerce News – Tipps & Tricks – ♿ Accessibility im Onlineshop – warum Screenreader-User deine Kunden sind 🗣️

4. Bilder und Alt-Texte

Informationsbilder haben sinnvolle alt-Texte. Rein dekorative Bilder bekommen leere Alts (alt=""). Bei Variantenbildern beschreibst du die Variante, zum Beispiel „Sneaker in Rot, Seitenansicht“.

5. Formulare, Labels, Fehler

Jedes Feld hat ein verbundenes <label for>. Pflichtfelder sind im Label gekennzeichnet. Fehler erscheinen direkt neben dem Feld und sind programmatisch verknüpft: aria-describedby zeigt auf die Fehlermeldung. Zusammenfassung der Fehler am Formularbeginn hilft zusätzlich.

<label for="email">E-Mail</label>
<input id="email" name="email" type="email" aria-describedby="email-error">
<p id="email-error" role="alert">Gültige E-Mail angeben.</p>

6. Tastatursteuerung

Alles ist per Tab erreichbar. Keine Tab-Indizes außer 0 für dynamisch eingefügte Inhalte. Menüs, Akkordeons, Carousels folgen etablierten Keyboard-Patterns. Pfeiltasten für Menülisten, Space und Enter für Aktionen.

7. Live-Regionen für dynamische UI

Warenkorb-Updates, Preisänderungen oder Filterergebnisse kündigst du mit aria-live="polite" an. Keine Dauerspams. Nur neue, relevante Information.

<div aria-live="polite" id="cart-status"></div>
<script>
  function added(name){
    document.getElementById('cart-status').textContent = name + ' im Warenkorb';
  }
</script>

8. Modale und Offcanvas

Fokus beim Öffnen in das Modal setzen. Tab-Fokus im Modal halten. aria-modal="true", role="dialog", beschreibender Titel mit aria-labelledby. Schließen mit Escape und Close-Button.

9. Kontraste und Zustände

Textkontrast mindestens 4.5:1. Interaktive Zustände sind erkennbar: Fokus, Hover, Active. Kontrast gilt auch für Fehlermeldungen, Badges und Preise.

10. Tabellen und Sortierung

Vergleichstabellen brauchen <th scope="col"> und <th scope="row">. Sortierbare Spalten haben aria-sort. Keine Spalten als <div> faken.

11. Medien: Video, Audio

Produktvideos haben Untertitel. Tutorials bekommen Transkripte. Autoplay ohne Ton vermeiden. Der Play-Button ist ein echter Button mit Text, nicht nur ein Icon.

12. Captcha und Sicherheit

Nutze barrierearme Lösungen. Biete Alternativen. Erzwinge keine Aufgaben, die Sehen oder Hören voraussetzen. Reibungslos ist besser als hart.

Rechtlicher Rahmen: Was gilt für Shops

Öffentliche Stellen müssen in Deutschland die BITV 2.0 erfüllen. Für private Unternehmen ist das Barrierefreiheitsstärkungsgesetz relevant. Es setzt EU-Vorgaben um und betrifft auch Online-Shops für definierte Produkte und Services. Das Ziel ist ein einheitlicher Markt mit klaren Mindeststandards. Mehr Details findest du in der Übersicht des BMAS: BFSG beim BMAS.

Dein Entwicklungs-Workflow mit Accessibility-Checks

Planung

• User Journeys definieren: Suche, Produkt, Variante, Warenkorb, Checkout, Konto, Retouren.
• Accessible Patterns festlegen: Navigation, Filter, Sortierung, Modale, Toasts, Tabs, Steps.
• Komponentenbibliothek mit Semantik und Keyboard-Verhalten dokumentieren.

Design-Handshake

• Kontrast und Fokuszustände definieren. Größen und Klickflächen sichern.
• Fehlermeldungen, leere Zustände, Ladezustände und Bestätigungen designen.
• Textersatz für Icons und Medien festhalten.

Implementierung

• Semantisches HTML zuerst. ARIA nur ergänzend.
• Komponenten mit Tests: Fokus, Rollen, Labels, Live-Regionen, Escape, Tab-Reihenfolge.
• Server-Fehler und Client-Fehler konsistent binden.

Testing

• Tastatur: Shop komplett ohne Maus bedienen.
• Screenreader-Smoke-Test: NVDA oder VoiceOver öffnen, Produkt finden, in den Warenkorb, Checkout starten, Bestellung abbrechen.
• Automatisierte Checks für Low-Hanging-Fruits. Manuelles Testing für Interaktion.

Für tiefergehende Kriterien nutze im Zweifel die offizielle Spezifikation: E-Commerce-Hinweise der Bundesfachstelle.

Produktdetailseiten: die häufigsten Fallen

• Variantenwahl als Spans ohne Rollen. Besser Buttons mit aria-pressed für Zustände oder echte Radios mit Gruppenlabel.
• Preis nur visuell betont. Besser klarer Textknoten, Währung im Lesefluss.
• Bewertungen als Stern-Icons ohne Text. Besser „4,6 von 5 Sternen, 128 Bewertungen“ als Text plus visuelle Sterne.
• Sticky-CTA ohne Fokuspflege. Besser Fokusreihenfolge prüfen, keine Sprünge.
• Lightbox ohne Semantik. Besser Dialog-Pattern mit Escape, Fokus-Trap und Beschriftung.

Checkout: Zero-Friction mit Screenreader

Im Checkout zählt Ruhe. Keine Layoutsprünge. Klarer Fortschrittsindikator, zum Beispiel als Liste. Jede Sektion hat eine Überschrift mit Ebene 2. Inline-Validierung ist „polite“, nicht aggressiv. Statusmeldungen gehen in eine Live-Region. Der „Jetzt kaufen“-Button beschreibt die Aktion und den Betrag.

<button type="submit" aria-label="Jetzt kaufen, Betrag 89,90 Euro">Jetzt kaufen</button>

Adressfelder haben Autocomplete-Attribute. Beispiel: autocomplete="given-name", family-name, address-line1, postal-code, country. Das spart Zeit und Fehler. Zahlungsarten sind Radios mit Labels. Zusätzliche Infos werden erst nach Auswahl eingeblendet und sind dann im Fokus erreichbar.

Performance hilft Accessibility

Screenreader leiden unter wackeligen DOMs. Große Re-Renders, späte Hydrierung und verschachtelte Offscreens bremsen. Optimiere Critical Rendering Path. Halte das DOM schlank. Vermeide „unsichtbare“ Doppelbäume. Lade Bilder responsiv. Setze Prefetch klug ein. Alles, was Stabilität bringt, hilft auch der Zugänglichkeit.

Mobile: TalkBack und VoiceOver

Mobile Nutzer arbeiten mit Wischgesten. Fokusmanagement ist hier noch wichtiger. Interaktive Elemente brauchen genug Fläche. Slide-Only-Carousels sind problematisch. Gib alternative Navigation. Prüfe deine Offcanvas-Menüs gründlich. Prüfe die Reihenfolge beim Öffnen des Keyboards. Prüfe „Zurück“ in Browser und App-Shell.

Team-Setup und QA

• Definition of Done enthält Accessibility-Checks.
• Design Review prüft Kontrast, Fokus, Fehlermeldungen.
• Code Review prüft Semantik, Rollen, Labels, Tastatur, ARIA.
• Release-Checklist enthält Tastatur-Run und Screenreader-Run.
• Regression-Tests decken Modale, Toaster, Filter, Formulare ab.

So holst du Feedback von echten Nutzer:innen

Frag deine Community: „Welche Stellen bremsen dich aus? Welche Meldungen sind unklar? Was fehlt dir bei Produktbildern?“ Biete eine kurze, zugängliche Feedback-Form. Reagiere. Baue. Veröffentliche. Bedanke dich. Du wirst bessere Conversions sehen, weil Reibung sinkt.

Dein Mini-Audit zum Start

1. Ist die H-Struktur sauber und eindeutig?
2. Gibt es <main>, Navigationen mit Label und eine Sprungmarke „Zum Inhalt“?
3. Ist jede Aktion per Tastatur bedienbar?
4. Bekommen dynamische Änderungen eine dezente Live-Region?
5. Haben alle Formfelder Labels, Autocomplete und klare Fehler?
6. Gibt es Untertitel und Transkripte für Medien?
7. Ist der Fokus sichtbar und logisch?
8. Sind Varianten, Tabs und Akkordeons nach Pattern umgesetzt?
9. Sind Preise und Rabatte als Text nachvollziehbar?
10. Gibt es eine leicht auffindbare Barrierefreiheitserklärung?

Jetzt du: Kommentiere und bring Beispiele

Zeig ein Produkt aus deinem Shop. Schreib, wo der Screenreader stolpert. Frag nach einem Pattern. Teile dein „Aha“. Ich antworte dir mit konkreten Snippets. Lass uns gemeinsam Barrieren abbauen. Deine Kundschaft wird es merken.

Zum Ende noch eine fundierte Ressource mit praktischen Hinweisen für Online-Shops: E-Commerce und BFSG.