html-einfach.de

WCAG & BFSG · Recht & Pflicht

Barrierefreiheit in Onlineshops

Von Zuletzt geändert am

Onlineshops stehen beim BFSG besonders im Fokus, denn der Onlinehandel ist ausdrücklich als erfasste Dienstleistung genannt. Wer einen Shop betreibt und nicht unter die Kleinstunternehmen-Ausnahme fällt, kommt an Barrierefreiheit also nicht vorbei. Das ist auch sachlich gut so: Ein Shop, den man nicht bedienen kann, ist ein Shop, in dem man nicht kauft.

Ich habe über die Jahre einige Shops begleitet und dabei gelernt, dass sich die Probleme fast immer an denselben Stellen ballen – entlang des Weges von der Produktsuche bis zum „Kaufen“. Genau diesen Weg gehe ich hier ab.

Produktsuche & Filter

Filter und Sortierung sind oft die ersten Hürden. Worauf ich achte:

  • Filter sind mit der Tastatur vollständig bedienbar, nicht nur per Maus-Hover.
  • Wird das Ergebnis ohne Neuladen aktualisiert, kündigt eine dezente Live-Region die neue Trefferzahl an („24 Ergebnisse“).
  • Aufklappbare Filtergruppen folgen dem Disclosure-Muster, nicht einer menubar.

Produktseite

  • Produktbilder haben aussagekräftige Alt-Texte; reine Deko-Bilder ein leeres alt.
  • Varianten­auswahl (Größe, Farbe) ist tastaturbedienbar und beschriftet – Farbfelder brauchen einen Namen, nicht nur einen Farbpunkt.
  • Wichtige Hinweise (Verfügbarkeit, Lieferzeit) stehen als Text, nicht nur als farbiges Symbol – siehe Farbkontraste.
  • „In den Warenkorb“ ist ein echter Button mit klarer Rückmeldung.

Warenkorb & Mini-Cart

  • Öffnet sich der Warenkorb als Overlay, muss er den Fokus korrekt führen – hinein beim Öffnen, Esc zum Schließen, zurück zum Auslöser. Das ist der Stoff der Dialoge & Modals.
  • Mengen­änderungen sind per Tastatur möglich und werden bestätigt.

Checkout – die kritischste Strecke

Hier entscheidet sich der Verkauf, und hier sammeln sich die meisten Barrieren, weil der Checkout fast nur aus Formularen besteht:

  • Jedes Feld hat ein Label, Pflichtfelder sind gekennzeichnet, autocomplete ist gesetzt – siehe Validierung & Pflichtfelder.
  • Fehlermeldungen sind verständlich, dem Feld zugeordnet und werden angekündigt – nicht nur ein roter Rahmen.
  • Zeitlimits (etwa reservierte Tickets oder Sessions) sind verlängerbar oder abschaltbar; eine Vorwarnung gehört dazu (WCAG 2.2.1).
  • Anmeldung ohne Gedächtnis-Test: Logins dürfen nicht allein an einem kniffligen CAPTCHA oder dem Merken eines Codes hängen (WCAG 2.2, „Accessible Authentication“). Einfügen aus dem Passwortmanager nie blockieren.
  • Bedienelemente sind groß genug (Zielgröße mind. 24 × 24 px, WCAG 2.5.8) – gerade auf dem Smartphone wichtig.

Wenn ich einen Shop nur an einer Stelle testen dürfte, wäre es der Checkout. Ein Hänger hier kostet bare Conversion – bei allen Nutzenden, nicht nur bei jenen mit Behinderung.

Konto & Bestellverlauf

  • Tabellen im Bestellverlauf sind echte Datentabellen mit Kopfzellen.
  • Statusangaben („versandt“, „storniert“) sind als Text erkennbar, nicht nur über Farbe.

Nicht vergessen: Erklärung & PDFs

Zum Pflichtteil gehört eine Barrierefreiheitserklärung. Und: Rechnungen oder Datenblätter als PDF müssen ebenfalls zugänglich sein – ein getaggtes, lesbares Dokument, kein eingescanntes Bild.

Kein Rechtsrat. Ob und in welchem Umfang dein Shop unter das BFSG fällt, hängt von Unternehmensgröße und Angebot ab. Das kläre im Zweifel rechtlich – ich beschreibe hier die technische Umsetzung, nicht die juristische Pflichtenlage.

Häufige Fragen

Mein Shop läuft auf einem Standard-System – ist er automatisch barrierefrei?

Leider nein. Gängige Shopsysteme und Themes sind unterschiedlich gut, und gerade Checkout, Filter und Overlays sind oft Schwachstellen. Prüfen musst du den echten, gebauten Shop, nicht das Marketingversprechen des Themes.

Reicht es, ein Accessibility-Overlay-Tool einzubauen?

Davon halte ich wenig. Diese Einblend-Widgets versprechen viel, beheben die eigentlichen Probleme im Markup aber nicht – und ersetzen weder echte Umsetzung noch ein Audit. Die Arbeit steckt im Code, nicht in einem Knopf.

Wo fange ich an?

Beim Checkout und den Formularen – dort ist der Hebel am größten. Danach Filter, Overlays und Produktseiten. Die BFSG-Checkliste hilft, nichts zu übersehen.

Fazit

Ein barrierefreier Onlineshop entscheidet sich entlang der Kaufstrecke: bedienbare Filter, beschriftete Produktoptionen, fokus-saubere Overlays und vor allem ein Checkout mit zugänglichen Formularen, fairen Zeitlimits und barrierearmer Anmeldung. Das BFSG macht das für viele Shops zur Pflicht – wirtschaftlich war es das, ehrlich gesagt, schon immer.