Barrierefreier Onlineshop: Checkliste für den Kaufprozess

Warum der Kaufprozess zählt

Ein Onlineshop ist barrierefrei, wenn jemand mit Tastatur, Screenreader oder Vergrößerung den ganzen Einkauf schafft, von der Suche bis zur Bezahlung. Scheitert er an einem einzigen Schritt, etwa an einem unbeschrifteten Feld in der Kasse oder einer Größenauswahl, die nur mit der Maus funktioniert, ist der Kauf verloren, egal wie gut die Startseite ist.

Die Verordnung zum BFSG (BFSGV) verlangt für den elektronischen Geschäftsverkehr ausdrücklich, dass auch Identifizierung, Sicherheitsfunktionen und Zahlung wahrnehmbar, bedienbar, verständlich und robust sind. Der praktische Maßstab ist WCAG 2.1 Stufe AA. Wen das Gesetz betrifft, steht im Ratgeber zum BFSG.

Die Checkliste gilt für jede Plattform, ob Shopify, Shopware, WooCommerce oder eine Eigenentwicklung.

1. Kopfbereich, Menü und Navigation

• Beim ersten Druck auf die Tabulatortaste erscheint ein Link Zum Inhalt springen, damit niemand auf jeder Seite durch das ganze Menü tabben muss.
• Ausklappmenüs öffnen sich auch per Tastatur (Enter oder Leertaste) und schließen mit Escape.
• Der Fokus ist immer sichtbar. Schaltet das Theme den Fokusrahmen des Browsers ab, braucht es einen eigenen, gut sichtbaren.
• Symbole ohne Text, etwa Warenkorb, Konto oder Suche, haben einen zugänglichen Namen, der vorgelesen wird.

2. Suche und Filter

• Das Suchfeld hat eine Beschriftung, nicht nur einen Platzhaltertext.
• Filter sind echte Checkboxen oder Schaltflächen und per Tastatur bedienbar.
• Ändert ein Filter die Ergebnisliste, wird die neue Trefferzahl angesagt, damit Screenreader-Nutzer merken, dass sich etwas getan hat.

3. Produktliste

• Jedes Produktbild hat einen Alternativtext, der das Produkt benennt, nicht den Dateinamen.
• Preise, Rabatte und durchgestrichene Preise sind auch ohne Farbe verständlich, etwa mit dem Wort statt oder vorher.
• Die Kachel ist ein einziger Link oder hat klar benannte Links, nicht drei gleichlautende Mehr-Links.

4. Produktseite

• Varianten wie Größe und Farbe sind per Tastatur wählbar, und die Auswahl wird angesagt. Farbfelder haben einen Textnamen.
• Bildergalerien und Zoom funktionieren per Tastatur, und der Fokus bleibt nicht im Zoom hängen.
• Pflichtangaben wie Grundpreis, Lieferzeit und Versandkosten stehen als Text, nicht nur im Bild.
• Die Schaltfläche In den Warenkorb meldet, dass das Produkt hinzugefügt wurde, etwa über eine Statusmeldung.

5. Warenkorb

• Mengenfelder haben eine Beschriftung, die das Produkt nennt.
• Entfernen-Schaltflächen sagen, was sie entfernen, zum Beispiel Laufschuh Modell X entfernen.
• Ändert sich die Summe, wird das angesagt oder ist ohne Neuladen gut auffindbar.

6. Registrierung und Anmeldung

• Bestellen ist ohne Kundenkonto möglich, oder die Kontoerstellung ist voll barrierefrei.
• Passwortfelder erlauben Einfügen, damit Passwortmanager funktionieren.
• Ein CAPTCHA hat eine Alternative, die ohne Sehen und ohne Bilderrätsel funktioniert.

7. Kasse

• Jedes Feld hat eine sichtbare Beschriftung, die mit dem Feld verknüpft ist. Pflichtfelder sind als solche gekennzeichnet, nicht nur durch Farbe oder ein Sternchen ohne Erklärung.
• Adressfelder haben passende Autocomplete-Attribute, damit der Browser sie ausfüllen kann.
• Fehlermeldungen nennen das Feld und sagen, was zu tun ist, und der Fokus springt zum ersten Fehler.
• Liefer- und Zahlungsarten sind echte Radiobuttons mit Namen, keine anklickbaren Bilder.
• Zeitlimits lassen sich verlängern, oder es gibt keine.

8. Bezahlung

• Eingebettete Zahlungsfelder, etwa für Kartendaten, haben Beschriftungen und sind per Tastatur erreichbar.
• Weiterleitungen zu Zahlungsanbietern kündigen sich an. Wählen Sie Anbieter, deren Seiten selbst barrierefrei sind.
• Die Schaltfläche zum Abschließen heißt eindeutig, zum Beispiel Zahlungspflichtig bestellen, und ist per Tastatur auslösbar.

9. Bestätigung, E-Mails und Widerruf

• Die Bestellbestätigung ist eine echte Seite mit Überschrift, nicht nur eine kurz eingeblendete Meldung.
• Bestätigungs-E-Mails sind als Text lesbar, nicht als Bild.
• Der Widerruf und, falls vorhanden, der Kündigungsbutton sind per Tastatur bedienbar und klar benannt.

10. Cookie-Banner, Chat und Pop-ups

• Das Cookie-Banner ist per Tastatur bedienbar, der Fokus landet darin, und beide Optionen sind gleich gut erreichbar.
• Chat-Symbole und Newsletter-Pop-ups verdecken keine Schaltflächen der Kasse und lassen sich mit Escape schließen.
• Nach dem Schließen eines Dialogs kehrt der Fokus dorthin zurück, wo er vorher war.

Schnell-Checkliste

• Ganzen Kauf nur mit Tastatur abschließen.
• Fokus auf jeder Seite sichtbar.
• Alle Bilder mit sinnvollem Alternativtext.
• Alle Formularfelder beschriftet, Fehler verständlich.
• Kontraste mindestens 4,5:1 für normalen Text.
• Seite bei 200 % Zoom und 320 Pixel Breite ohne waagerechtes Scrollen nutzbar.
• Cookie-Banner, Chat und Pop-ups per Tastatur schließbar.

So prüfen Sie Ihren Shop

• Eine kostenlose automatische Prüfung findet in Sekunden viele technische Fehler, etwa fehlende Alternativtexte, Beschriftungen und Kontraste.
• Was kein Scanner sieht, zeigt der Ratgeber zur manuellen Prüfung.
• Der Schnell-Audit prüft einmalig 25 Seiten mit PDF-Bericht, das Konformitätspaket bis zu 250 Seiten über 60 Tage mit wöchentlicher Nachprüfung.