Barrierefreiheit im E-Commerce 2026: Welche Anforderungen hat das BFSG für Online-Shops?

Barrierefreiheit ist im E‑Commerce seit dem 28. Juni 2025 gesetzlich vorgeschrieben. Trotzdem sehe ich in meiner Arbeit als SEO‑Beraterin regelmäßig Online-Shops ohne umgesetztes BFSG (Barrierefreiheitsschutzgesetz). Oft nicht aus Absicht, sondern weil unklar ist, was konkret gefordert wird und wie sich Barrierefreiheit technisch abbilden lässt.

Dieser Leitfaden erklärt die zentralen Anforderungen für Online‑Shops und zeigt, welche Bereiche betroffen sind: Inhalte, Navigation, Formulare, Checkout, Kontraste, Tastaturbedienung und dynamische Elemente. Der Fokus liegt auf klaren Fakten und praktischer Umsetzung, nicht auf juristischen Details. Ziel ist es, verständlich darzustellen, was seit 2025 verpflichtend ist und wie Shops diese Anforderungen Schritt für Schritt erfüllen können. So, dass Google und KI‑Systeme die Struktur nachvollziehen können und der Shop ohne Barrieren bedienbar ist.

Was ist das Barrierefreiheitsstärkungsgesetz (BFSG) und wann gilt es für E-Commerce?

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Umsetzung des European Accessibility Act (EAA). Es verpflichtet Unternehmen erstmals verbindlich, bestimmte digitale Produkte und Dienstleistungen barrierefrei bereitzustellen. Für den E-Commerce ist entscheidend: Online-Shops fallen ausdrücklich unter dieses Gesetz.

Seit dem Stichtag, dem 28. Juni 2025, gelten die Barrierefreiheitsanforderungen für alle betroffenen Angebote am Markt. Es handelt sich nicht um eine Empfehlung, nicht um ein Qualitätsmerkmal und nicht um eine freiwillige Optimierung, sondern um geltendes Recht. Wer ab diesem Datum nicht konform ist, riskiert Abmahnungen, Bußgelder und Vertriebsverbote.

Das Ziel des Gesetzes ist klar definiert: Digitale Angebote sollen für Verbraucherinnen und Verbraucher mit Behinderungen auffindbar, bedienbar, verständlich und robust nutzbar sein. Sie müssen also barrierefrei gestaltet werden. Technisch orientiert sich das BFSG dabei an der europäischen Norm EN 301 549, die wiederum auf den WCAG-Richtlinien (Level AA) basiert.

Für Online-Shops bedeutet das: Digitale Barrierefreiheit betrifft nicht nur Texte oder Bilder, sondern den gesamten Kaufprozess, von der Navigation über Filter und Formulare bis zum Checkout. Tipps und Hilfe für Onlineshops bietet hier auch die Bundesfachstelle Barrierefreiheit

Welche Produkte und Dienstleistungen fallen unter das BFSG?

Das BFSG gilt nicht pauschal „für Websites“, sondern für klar definierte digitale Produkte und Dienstleistungen. Der E-Commerce ist dabei ein zentraler Anwendungsfall.

Diese Bereiche sind laut Gesetz und Leitfäden betroffen:

Kategorie	Beispiele
Online-Shops & Verkaufsplattformen	Produktseiten, Warenkorb, Checkout, Kundenkonten
Digitale Dokumente	PDFs (AGB, Rechnungen), E-Books, Produktdatenblätter
Mobile Anwendungen	Shopping-Apps, Kunden-Apps
Zahlungs- & Bankdienste	Online-Zahlung, Authentifizierung, TAN-Eingaben
Telekommunikation	Kontaktformulare, Chat- und Servicefunktionen
Self-Service-Systeme	Kundenportale, Vertragsverwaltung, Retourenprozesse

Wichtig: Es reicht nicht, „nur“ die Startseite barrierefrei zu gestalten. Alle Funktionen, die für den Vertragsabschluss notwendig sind, müssen zugänglich sein. Inklusive dynamischer Inhalte wie Filter, Slider oder Validierungsmeldungen.

Fakten, die im E-Commerce häufig unterschätzt werden

1. In Deutschland leben rund 7,8 Millionen Menschen mit einer anerkannten Sehbehinderung.
2. Etwa 15 % der Bevölkerung profitieren direkt von der barrierefreien Gestaltung digitaler Angebote.
3. Barrierefreiheit hilft nicht nur Menschen mit Behinderung, sondern auch älteren Nutzern und mobilen Usern.
4. PDFs zählen rechtlich als „digitale Dienstleistungen“ und sind damit BFSG-relevant.
5. Ein nicht barrierefreier Checkout kann als Vertriebsverstoß gewertet werden.
6. Auch B2B-Shops sind betroffen, sofern sie öffentlich zugänglich sind.
7. Die Pflicht gilt unabhängig vom verwendeten Shopsystem (Shopify, WooCommerce, Shopware etc.).

Checkliste: Betrifft das BFSG meinen Online-Shop?

Beantworten Sie diese Fragen ehrlich mit „Ja“ oder „Nein“:

• Verkaufen Sie Produkte oder Dienstleistungen online an Endkunden?
• Können Nutzer über Ihre Website Verträge abschließen oder Zahlungen tätigen?
• Stellen Sie PDFs, Rechnungen oder Produktinformationen zum Download bereit?
• Nutzen Sie Formulare, Filter oder interaktive Elemente im Kaufprozess?
• Liegt Ihr Jahresumsatz über 2 Millionen € oder beschäftigen Sie mehr als 10 Mitarbeitende?

Wenn Sie mehr als zwei Fragen mit „Ja“ beantworten, ist Ihr Shop mit sehr hoher Wahrscheinlichkeit BFSG-pflichtig.

Warum ist digitale Barrierefreiheit für Online-Shops seit dem 28. Juni 2025 Pflicht?

Der rechtliche Ursprung für die Barrierefreiheit liegt auf EU-Ebene. Mit dem European Accessibility Act wollte die EU digitale Märkte vereinheitlichen und gleichzeitig den Zugang für Menschen mit Behinderungen sicherstellen. Deutschland hat diese Vorgaben mit dem BFSG in nationales Recht überführt.

Bereits 2022 wurde das Gesetz verabschiedet. Unternehmen hatten eine Übergangsfrist von drei Jahren, um ihre Systeme anzupassen. Diese Frist endete am 28. Juni 2025.

§ 3 BFSG verpflichtet Anbieter, betroffene Produkte und Dienstleistungen so zu gestalten, dass sie „barrierefrei zugänglich und nutzbar“ sind.

Zeitlicher Überblick:

Jahr	Ereignis
2021	Verabschiedung des European Accessibility Act
2022	Inkrafttreten BFSG (Vorbereitungsphase)
2023 bis 2024	Übergangsfrist für Unternehmen
28.06.2025	Verbindliche Anwendung für E-Commerce
2026	Erste Abmahnwellen und Marktüberwachung
2027	EU-weite Harmonisierung der Durchsetzung

Laut Marktbeobachtungen und Verbandsaussagen waren zum Jahresbeginn 2026 bereits über 80 % der untersuchten Shops nicht vollständig konform. Parallel dazu stieg die Zahl der Abmahnungen deutlich an.

Welche Ausnahmen gibt es für kleine Shops (Kleinstunternehmen)?

Das BFSG kennt eine Ausnahme für sogenannte Kleinstunternehmen. Diese wird jedoch häufig falsch verstanden.

Das betrifft nicht pauschal „kleine Online-Shops“. Viele Solo-Selbstständige fallen zwar darunter, wachsende Shops jedoch oft nicht mehr.

Zusätzlich existiert der Begriff der „unverhältnismäßigen Belastung“ (§ 16 BFSG). Diese greift nur, wenn die Kosten der Umsetzung in keinem Verhältnis zum Umsatz stehen – etwa wenn die Barrierefreiheit mehr als 5 % des Jahresumsatzes verschlingen würde. Diese Einschätzung muss belegt und dokumentiert werden.

Kriterium	Ausgenommen?
1 bis 2 Personen, < 100 k € Umsatz	meist ja
5 Mitarbeitende, 1,5 Mio. € Umsatz	nein
12 Mitarbeitende, 800 k € Umsatz	nein
Einzelshop mit komplexem Altsystem	Einzelfallprüfung

Was passiert bei Verstößen gegen das BFSG im Online-Shop?

Verstöße bleiben nicht folgenlos. Das Gesetz sieht einen klaren Sanktionsrahmen vor.

• Bußgelder bis zu 100.000 € (§ 20 BFSG)
• Abmahnungen nach UWG durch Wettbewerber oder Verbände
• Vertriebsuntersagungen bei wiederholter Nichtkonformität
• Schadensersatzansprüche betroffener Nutzer

Typische Kosten in der Praxis:

Verstoß	Mögliche Kosten
Fehlende Alternativtexte	600 bis 1.200 €
Nicht barrierefreier Checkout	2.000 bis 5.000 €
Unzugängliche PDFs	800 bis 2.500 €
Wiederholter Verstoß	Bußgeld + Abmahnung

Für 2026 wurden über 500 Verfahren prognostiziert, insbesondere im wettbewerbsintensiven E-Commerce-Umfeld.

Welche Standards gelten für barrierefreie Online-Shops (WCAG, EN 301 549)?

Die Barrierefreiheit ist dabei im E-Commerce technisch klar definiert. Das BFSG nennt hier konkrete Normen. Zentral sind dabei zwei Ebenen:

• Die WCAG-Richtlinien als inhaltlich-technische Grundlage
• Die EN 301 549 als verbindliche europäische Norm.

Online-Shops sollten diese Standards nicht isoliert betrachten, sondern prozessbezogen: Ein Shop gilt nur dann als barrierefrei, wenn die Kundschaft den gesamten Kaufprozess ohne Barrieren durchlaufen kann. Egal ob Inhalte statisch, dynamisch oder personalisiert ausgespielt werden.

Was sind die vier Prinzipien der WCAG: Wahrnehmbar, Bedienbar, Verständlich, Robust?

Die Web Content Accessibility Guidelines (WCAG) basieren auf vier Grundprinzipien. Und diese bilden das Fundament aller weiteren Anforderungen. Außerdem helfen sie dabei, Barrieren systematisch zu erkennen.

1. Wahrnehmbar
Inhalte müssen so gestaltet sein, dass sie von allen Nutzern wahrgenommen werden können. Für Online-Shops bedeutet das vor allem: Alternativtexte für Produktbilder, ausreichende Farbkontraste, skalierbare Schriftgrößen und eine klare visuelle Hierarchie. Ein Produktfoto ohne Alt-Text ist für Screenreader-Nutzer faktisch unsichtbar.

2. Bedienbar
Alle Funktionen müssen ohne Maus nutzbar sein. Im E-Commerce ist das besonders kritisch im Checkout. Wenn Nutzer nicht per Tab-Taste durch Formulare navigieren können oder der Fokus nicht sichtbar ist, scheitert der Kaufprozess. Auch Timeouts oder automatisch wechselnde Slider fallen hierunter.

3. Verständlich
Inhalte und Abläufe müssen nachvollziehbar sein. Das betrifft einfache Sprache, konsistente Bezeichnungen und klare Fehlermeldungen. Ein Beispiel: Wenn ein Formularfehler nur farblich markiert wird („rot umrandet“), ist er für viele Nutzer nicht verständlich.

4. Robust
Inhalte müssen mit assistiven Technologien kompatibel sein. Das betrifft sauberes HTML, korrekte ARIA-Rollen und eine klare Struktur, damit Screenreader und andere Hilfsmittel Inhalte zuverlässig interpretieren können.

Fakten zur Einordnung:

Die WCAG definieren 38 Erfolgskriterien der Stufen A und AA sowie 17 zusätzliche AAA-Kriterien. Für das BFSG ist WCAG-Konformität auf Level AA maßgeblich.

Praxisübersicht:

WCAG-Prinzip	Typisches Shop-Problem
Wahrnehmbar	Produktbilder ohne Alt-Text
Bedienbar	Checkout nicht per Tastatur nutzbar
Verständlich	Fehlermeldungen ohne Erklärung
Robust	Dynamische Inhalte ohne Screenreader-Feedback

Wie hängen WCAG 2.2 AA und EN 301 549 für E-Commerce zusammen?

Die WCAG selbst sind keine Rechtsnorm, sondern ein internationaler Standard. Rechtlich verbindlich werden sie im E-Commerce erst durch die EN 301 549. Diese europäische Norm legt fest, welche technischen Anforderungen digitale Produkte und Dienstleistungen erfüllen müssen, um als barrierefrei zu gelten.

Die aktuelle Fassung EN 301 549 V3.2.1 verweist explizit auf WCAG 2.2 Level AA. Damit ist klar: Wer BFSG-konform sein will, muss die WCAG-Kriterien technisch umsetzen und nicht nur „sinngemäß“.

WCAG 2.2 wurde im Dezember 2024 veröffentlicht und erweitert WCAG 2.1 um zusätzliche Anforderungen, insbesondere mit Blick auf motorische Einschränkungen und mobile Nutzung.

Der entscheidende Punkt für Shops: Die EN 301 549 fungiert als Brücke zwischen Gesetz (BFSG) und Technik (WCAG). Prüfstellen, Marktüberwachung und Gerichte orientieren sich an dieser Norm – nicht an individuellen Interpretationen.

Welche Erweiterungen bringt WCAG 2.2 für dynamische Shops (z. B. AJAX-Warenkorb)?

Moderne Online-Shops arbeiten zunehmend mit dynamischen Elementen: Warenkörbe aktualisieren sich ohne Seitenreload, Filter reagieren in Echtzeit, Inhalte werden per AJAX nachgeladen. Genau hier setzt WCAG 2.2 an.

Ein wichtiges Thema ist außerdem die Rückmeldung bei dynamischen Änderungen. Wenn sich der Warenkorb aktualisiert, muss diese Änderung für Screenreader angekündigt werden. Denn ohne derartige Hinweise „passieren“ Änderungen nur visuell. Für Nutzer assistiver Technologien bleibt die Änderung damit aber unsichtbar.

Neue WCAG-2.2-Anforderungen haben Relevanz für dynamische Online-Shops im Überblick

WCAG-Kriterium (Level)	Neu in 2.2	Technische Anforderung	Konkretes Shop-Beispiel
2.5.7 Dragging Movements (AA)	ja	Drag-&-Drop-Funktionen müssen eine alternative Bedienmöglichkeit bieten (z. B. Buttons oder Auswahlfelder).	Produktreihenfolge im Warenkorb kann zusätzlich über „Nach oben / Nach unten“-Buttons geändert werden.
2.5.8 Target Size (Minimum) (AA)	ja	Interaktive Elemente müssen eine Mindestgröße haben, um Fehlbedienungen zu vermeiden.	„In den Warenkorb“-Button ist groß genug und nicht zu dicht an anderen Elementen platziert.
3.2.6 Consistent Help (A)	ja	Hilfe- und Supportfunktionen müssen innerhalb des Shops konsistent erreichbar sein.	Der Hilfe-Link im Checkout befindet sich an derselben Stelle wie auf Produkt- und Warenkorbseiten.
3.3.7 Redundant Entry (A)	ja	Informationen dürfen nicht mehrfach abgefragt werden, wenn sie technisch verfügbar sind.	Lieferadresse muss im Checkout nicht erneut eingegeben werden, wenn sie bereits im Kundenkonto hinterlegt ist.
4.1.3 Status Messages (AA)	ja	Dynamische Statusänderungen müssen für assistive Technologien angekündigt werden (aria-live).	„Artikel wurde zum Warenkorb hinzugefügt“ wird von Screenreadern automatisch ausgegeben.
2.4.11 Focus Not Obscured (Minimum) (AA)	ja	Der Tastaturfokus darf nicht durch Overlays, Sticky-Elemente oder Cookie-Banner verdeckt werden.	Fokus im Checkout bleibt sichtbar, auch wenn ein fixierter Header eingeblendet ist.

54-Punkte-Checkliste: Vollständige WCAG-AA-Anforderungen für den barrierefreien Shop

Die Standards (WCAG und EN 301 549) werden im Shop erst dann greifbar, wenn klar ist, was konkret geprüft werden muss. Genau dafür folgt hier eine 54-Punkte-Checkliste, gruppiert nach den vier WCAG-Prinzipien: Wahrnehmbar, Bedienbar, Verständlich, Robust.

Die Zahlen wie 1.3.2 sind dabei keine internen Kürzel, sondern die offiziellen WCAG-Erfolgskriterien-Codes. Sie folgen immer dem Schema Prinzip.Richtlinie.Kriterium.

Beispiel:

• 1 = Wahrnehmbar
• 2 = Bedienbar
• 3 = Verständlich
• 4 = Robust

So kann jede Anforderung eindeutig einer Normstelle zugeordnet werden.

Für die Stufen A und AA umfasst die WCAG insgesamt 50 Erfolgskriterien (A = 29, AA = 21). Die folgende Liste geht bewusst auf 54 Prüfpunkte, weil einzelne Kriterien im E-Commerce mehrfach auftauchen (z. B. im Warenkorb und im Checkout) und im Shop deshalb prozessbezogen geprüft werden müssen.

Wahrnehmbar

Kriterium	Code	Tool	Shop-Beispiel
Alt-Text für Produktbilder	1.1.1	WAVE	Produktfoto ist für Screenreader verständlich.
Grafiken nicht als Textbilder	1.4.5	Manuell	Versandhinweis ist HTML-Text, nicht Banner.
Kontrast für Fließtext	1.4.3	CCA	Beschreibung/Checkout bleibt lesbar.
Kontrast für UI-Elemente	1.4.11	CCA	Checkboxen, Icons, Buttons sind klar sichtbar.
Zoom bis 200 % nutzbar	1.4.4	Browser	Checkout bleibt bedienbar.
Reflow ohne Quer-Scroll	1.4.10	DevTools	Mobilansicht bricht nicht auseinander.
Struktur über Überschriften	1.3.1	axe	Produktseite hat echte H-Struktur.
Lesereihenfolge korrekt	1.3.2	NVDA	Preis/CTA werden in sinnvoller Reihenfolge gelesen.
Pflichtfelder nicht nur Farbe	1.3.3	Manuell	„Pflichtfeld“ steht als Text dabei.
Info nicht nur farbcodiert	1.4.1	Manuell	„Sale“ ist nicht nur rot markiert.
Textabstände funktionieren	1.4.12	Manuell	Zeilenabstand zerstört kein Layout.
Hover/Overlay steuerbar	1.4.13	Tastatur	Tooltip ist schließbar, verdeckt nichts.
Aussagekräftige Linktexte	2.4.4	Manuell	„Lieferzeit ansehen“ statt „Mehr“.
Captions bei Videos	1.2.2	Manuell	Erklärvideo hat Untertitel.
Medienalternative vorhanden	1.2.1	Manuell	Video-Inhalt ist auch als Text erfassbar.

Bedienbar

Kriterium	Code	Tool	Shop-Beispiel
Vollständig per Tastatur nutzbar	2.1.1	Tastatur	Checkout funktioniert ohne Maus.
Kein Tastatur-Trap	2.1.2	Tastatur	Popups lassen sich verlassen.
Sinnvolle Fokusreihenfolge	2.4.3	Tastatur	Tab folgt dem Prozess, nicht dem Layout.
Fokus sichtbar	2.4.7	Tastatur	Aktives Feld ist klar markiert.
Fokus nicht verdeckt	2.4.11	Tastatur	Sticky Header/Cookie verdeckt nichts.
Skip-Link vorhanden	2.4.1	Tastatur	„Zum Inhalt springen“ ist erreichbar.
Keine unkontrollierten Slider	2.2.2	Manuell	Bewegung ist pausierbar.
Timeout verlängerbar	2.2.1	Manuell	Session läuft nicht unbemerkt ab.
Keine Shortcut-Kollision	2.1.4	Manuell	Tastenkürzel sind steuerbar.
Keine flackernden Elemente	2.3.1	Manuell	Keine aggressiven Animationen.
Pointer-Gesten ersetzbar	2.5.1	Mobil	Bedienung nicht nur per Wischen.
Label im zugänglichen Namen	2.5.3	axe	„Zur Kasse“ wird so angesagt.
Klickziel groß genug	2.5.8	Mobil	+/- im Warenkorb ist treffsicher.
Drag-Alternative vorhanden	2.5.7	Manuell	Sortieren geht auch per Buttons.

Verständlich

Kriterium	Code	Tool	Shop-Beispiel
Sprache korrekt gesetzt	3.1.1	Inspector	lang=“de“ ist vorhanden.
Kein Kontextwechsel bei Fokus	3.2.1	Tastatur	Fokus löst keinen Sprung aus.
Änderungen nur nach Eingabe	3.2.2	Manuell	Dropdown triggert keinen Redirect.
Navigation konsistent	3.2.3	Manuell	Menü bleibt stabil.
Komponenten konsistent	3.2.4	Manuell	Gleiche Icons = gleiche Funktion.
Hilfe konsistent auffindbar	3.2.6	Manuell	Support bleibt im Checkout erreichbar.
Fehler verständlich benennen	3.3.1	Testkauf	„PLZ fehlt“ statt nur roter Rahmen.
Labels und Hinweise vorhanden	3.3.2	axe	Feld hat echtes Label.
Fehlerkorrektur erklären	3.3.3	Testkauf	„5 Ziffern“ als Hinweis.
Fehler vor Kauf vermeiden	3.3.4	Testkauf	Bestellübersicht vor Abschluss.
Redundante Eingaben vermeiden	3.3.7	Testkauf	Adresse wird übernommen.
Barrierearme Authentifizierung	3.3.8	Manuell	Login ohne reine Puzzle-Hürde.
Klare Feldlogik im Checkout	3.3.2	Testkauf	Adresse/Zahlung sind eindeutig geführt.

Robust

Kriterium	Code	Tool	Shop-Beispiel
Semantik korrekt (Buttons etc.)	4.1.2	axe	Keine klickbaren „divs“ als Buttons.
ARIA korrekt eingesetzt	4.1.2	NVDA	Rollen passen zur Funktion.
Statusmeldungen bei AJAX	4.1.3	NVDA	„Zum Warenkorb hinzugefügt“ wird angekündigt.
Fehlerzustände werden angekündigt	4.1.3	NVDA	Fehlermeldung wird vorgelesen.
Filter-Updates angekündigt	4.1.3	NVDA	Ergebniszahl wird als Status ausgegeben.
Warenkorb-Updates angekündigt	4.1.3	NVDA	Menge/Preisänderung wird gemeldet.
Fokus nach Modal korrekt zurück	2.4.3	Tastatur	Fokus springt zum Auslöser zurück.
Autocomplete-Attribute genutzt	1.3.5	Browser	E-Mail/Adresse werden erkannt.
Überschriften beschreiben Zweck	2.4.6	Manuell	„Zahlung“ statt „Schritt 3“.
Icons haben zugängliche Namen	4.1.2	axe	Herz-Icon heißt „Wunschliste“.
PDFs barrierefrei bereitstellen	1.3.1	PAC/WAVE	Download ist strukturiert lesbar.
Keine kaputten Zustandswechsel	4.1.2	Testkauf	Headless/PWA bleibt assistiv nutzbar.

Welche Maßnahmen braucht mein Shop für wahrnehmbare Inhalte (Prinzip 1)?

„Wahrnehmbar“ ist das erste WCAG-Prinzip im E-Commerce. Und hier passieren auch die meisten Fehler:

• Zu geringe Kontraste.
• Fehlende Alternativtexte.

In der WebAIM-Million-Analyse (1.000.000 Startseiten) hatten 79,1 % Low-Contrast-Text und 55,5 % fehlende Alt-Texte auf Bildern. Wenn aber Produktbilder, Preise, Buttons oder Hinweise nicht zuverlässig wahrnehmbar sind, scheitert der gesamte Kaufprozess. Unabhängig davon, wie gut Navigation, Formulare oder Checkout gebaut sind.

Wie füge ich Alt-Texte für Produktbilder und Galerien hinzu (1.1.1)?

Das WCAG-Kriterium 1.1.1 „Non-text Content“ (Level A) verlangt: Nicht-Text-Inhalte brauchen eine Textalternative, die denselben Zweck erfüllt. Im Online-Shop sind das vor allem Produktbilder, Galerie-Slides, Icons (z. B. Warenkorb) und verlinkte Grafiken.

Beispiele aus dem Shop-Alltag:

• Ein Produktbild braucht einen Alt-Text, der das Produkt klar benennt (Modell, Farbe, Besonderheit).
• Ein Deko-Divider braucht leeren Alt-Text (alt=""), damit Screenreader ihn überspringen.
• Ein Logo als Link braucht einen Alt-Text wie „XYZ Startseite“ – nicht „Logo“.

Korrekte Beispiele für Produktbilder (E-Commerce/BFSG)

Produktbilder (informativ): Beschreiben relevante Infos für Kaufentscheidung (Merkmale, Zustand), nicht jedes Detail.

• Gut: Schwarzer Föhn mit Diffusor, steht auf Tisch (Farbe, Modell, Position relevant).
• Besser: Schwarzer Föhn mit Diffusoraufsatz, 2000W, für Lockenfrisuren (Nutzen + Specs).
• Schlecht: Bild eines schwarzen Föhns auf Tisch

Alt-Text-Regeln (Checkliste):

• Ein Alt-Text beschreibt das Produkt/den Zweck, nicht die Kamera-Perspektive.
• Ein Alt-Text ist kurz und eindeutig (meist 5 bis 12 Wörter).
• Ein Alt-Text wiederholt nicht stumpf den sichtbaren Text direkt daneben.
• Dekoration bekommt alt="", damit sie nicht im Screenreader auftauchen.
• Verlinkte Bilder brauchen einen Alt-Text, der das Link-Ziel klar macht.

Tools zum Prüfen:

• WAVE zeigt fehlende Alt-Attribute und problematische Bild-Links sofort an.
• In WordPress/WooCommerce wird der Alt-Text direkt in der Mediathek am Bild gepflegt.

Welcher Mindestkontrast ist für Buttons und Preise vorgeschrieben (1.4.3)?

Das WCAG-Kriterium 1.4.3 „Contrast (Minimum)“ (Level AA) legt klare Grenzwerte fest:

• Normaler Text: mindestens 4,5:1
• Großer Text: mindestens 3:1 (groß heißt: deutlich größer/kräftiger als Standardtext)

Im Shop ist das besonders kritisch bei:

• Preisen (auch „durchgestrichene“ Vergleichspreise),
• Button-Labels („In den Warenkorb“),
• Hinweistexten im Checkout („Pflichtfeld“, „Fehler“),
• Badge-Texten („Neu“, „Sale“, „Nur heute“).

Praktischer Fix, wenn die Markenfarbe zu schwach ist: Markenfarben sind oft als Akzent geeignet, aber nicht als Fließtext auf Weiß.

Beispiel: #00B4B0 auf Weiß hat ca. 2,6:1 und fällt für normalen Text durch.

Tabelle: Farbpaare + Kontrast-Ratio (10 Beispiele)

Vordergrund	Hintergrund	Kontrast	AA (Normaltext)
#000000	#FFFFFF	21.0:1	Ja
#333333	#F9F9F9	12.0:1	Ja
#666666	#FFFFFF	5.7:1	Ja
#1A73E8	#FFFFFF	4.5:1	Ja
#D32F2F	#FFFFFF	5.0:1	Ja
#00B4B0	#FFFFFF	2.6:1	Nein
#FFFFFF	#00B4B0	2.6:1	Nein
#FFFFFF	#1A73E8	4.5:1	Ja
#FFFFFF	#D32F2F	5.0:1	Ja
#F9A825	#FFFFFF	2.0:1	Nein

Tools zum Testen:

• WebAIM Contrast Checker (schnell, zuverlässig, Standard in Audits).
• Stark (Figma/Browser-Workflow, sinnvoll fürs Design-Team).

Wie mache ich Videos und PDFs barrierefrei (1.2.2, 1.4.10)?

Viele Shops präsentieren auch Videos (Produkt-Clips, Tutorials) und PDFs (Datenblätter, Anleitungen, Rechnungen). Genau diese Medien werden im BFSG-Kontext schnell zum Risiko, weil sie Teil des Kauf- und Nutzungsprozesses sind.

Videos: Untertitel sind Pflicht (1.2.2, Level A)

WCAG 1.2.2 verlangt für aufgezeichnete Inhalte: Captions/Untertitel müssen vorhanden sein, damit auch hörbeeinträchtigte Nutzer die Information bekommen.

PDFs: „Tagged PDF“ statt Bild-PDF
Ein PDF ist nur dann barrierearm nutzbar, wenn es getaggt, strukturiert und sinnvoll lesbar ist (Überschriften, Lesereihenfolge, Alternativtexte).

Checkliste: 15 Kriterien für wahrnehmbare Produktseiten (Prinzip 1)

Damit „Wahrnehmbar“ strukturiert umgesetzt werden kann, hier eine kompakte Shop-Checkliste. Die folgenden 15 Punkte decken typische BFSG-Risiken auf Produkt-, Kategorie- und Checkout-Strecken ab.

Kriterium	Stufe	Was bedeutet das im Shop?	Status [ ]
1.1.1 Alt-Text	A	Produktbilder, Icons und Banner haben passende Alt-Texte.	[ ]
1.2.2 Untertitel	A	Videos mit Ton haben synchronisierte Captions.	[ ]
1.2.3 Audiodeskription	A	Wichtige Video-Info ist nicht nur visuell.	[ ]
1.3.1 Struktur	A	Überschriften, Listen, Formulare sind semantisch korrekt.	[ ]
1.3.2 Reihenfolge	A	DOM-Reihenfolge passt zur visuellen Reihenfolge (Checkout!).	[ ]
1.3.3 Sinneseindrücke	A	Keine Anweisung nur über „rot markieren“ oder „rechts klicken“.	[ ]
1.3.4 Orientierung	AA	Produktseite funktioniert in Portrait/Landscape.	[ ]
1.3.5 Eingabezweck	AA	Formfelder sind technisch als E-Mail/Name/Adresse erkennbar.	[ ]
1.4.1 Farbe	A	Information hängt nicht nur an Farbe (Fehler, Sale).	[ ]
1.4.3 Kontrast	AA	Preise, Button-Text, Hinweise erfüllen 4,5:1.	[ ]
1.4.4 Text-Zoom	AA	Text kann vergrößert werden, ohne dass Inhalte verschwinden.	[ ]
1.4.5 Text als Grafik	AA	Keine wichtigen Infos nur als Bildtext.	[ ]
1.4.10 Reflow	AA	Layout reflowt ohne horizontales Scrollen (mobil/Zoom).	[ ]
1.4.11 Non-Text-Kontrast	AA	Icons, Input-Ränder, Fokus-Rahmen sind klar sichtbar.	[ ]
1.4.13 Hover/Focus	AA	Dropdowns/Tooltips bleiben bedienbar und verschwinden nicht.	[ ]

Wenn diese 15 Punkte sauber abgearbeitet werden, ist Prinzip 1 in der Shop-Praxis zu großen Teilen abgedeckt.

Wie stelle ich Bedienbarkeit sicher (Prinzip 2) im Checkout-Prozess?

„Bedienbar“ ist das zweite WCAG-Prinzip und im E-Commerce der Punkt, an dem Barrierefreiheit direkt über Conversion entscheidet. Denn der Checkout besteht nun mal aus Buttons, Formularen, Modalen und dynamischen Updates. Wenn hier etwas nicht per Tastatur funktioniert, der Fokus verschwindet oder Statusmeldungen nicht angezeigt werden, scheitert der Kaufprozess, auch wenn der Shop optisch perfekt aussieht. WCAG definiert dafür klar unter anderem 2.1.1 Tastaturbedienbarkeit, 2.4.7 sichtbarer Fokus und bei dynamischen Shops 4.1.3 Statusmeldungen.

Warum muss der gesamte Shop tastaturbedienbar sein (2.1.1)?

WCAG 2.1.1 „Keyboard“ (Level A) verlangt, dass jede Funktion ohne Maus bedienbar ist. Das betrifft nicht nur Links, sondern auch Buttons, Formularfelder, Dropdowns, Filter, Warenkorb-Elemente und Zahlungsarten.

Im Checkout heißt das konkret: Mit Tab wird von Feld zu Feld gesprungen, mit Enter oder Space werden Buttons aktiviert, mit Esc werden Modale geschlossen, und Pfeiltasten steuern Auswahlfelder dort, wo es vorgesehen ist.

Ein Praxisbeispiel aus dem Checkout: Der Fokus springt per Tab von „PLZ“ zu „Ort“, dann zu „Zahlungsart“ und schließlich zu „Zahlungspflichtig bestellen“. Ist an irgendeiner Stelle ein Element nicht erreichbar (z. B. ein custom Dropdown), bricht der Kauf an dieser Stelle ab.

Tabelle: Tasten, die im Checkout funktionieren müssen

Taste	Erwartetes Verhalten im Shop
Tab / Shift+Tab	Vorwärts / rückwärts durch Fokus-Elemente
Enter	Buttons/Links auslösen, Formular absenden
Space	Checkboxen/Toggle/Buttons aktivieren
Esc	Modale, Overlays, Cookie-Layer schließen
Pfeiltasten	Radiobutton-Gruppen/Select-Optionen steuern

Mehrwert, den viele Shops unterschätzen: In WebAIM-Umfragen wird fehlende Tastaturbedienbarkeit regelmäßig als eines der größten Probleme genannt.

Wie implementiere ich sichtbaren Fokus für Filter und Warenkorb (2.4.7)?

WCAG 2.4.7 „Focus Visible“ fordert, dass jederzeit erkennbar ist, welches Element gerade Tastaturfokus hat.

Abnahme-Kriterium: Sobald der Checkout ohne Maus bedienbar ist und der Fokus in jedem Schritt eindeutig sichtbar bleibt, ist 2.4.7 im Shop-Alltag erfüllt.

SEO-Vorteile & Risiken: Warum Barrierefreiheit Ihren Shop 2026 sichtbar macht

Barrierefreiheit ist übrigens nicht nur BFSG-Pflicht, sondern auch ein direkter SEO-Hebel: Wenn ein Shop nach WCAG sauber strukturiert, lesbar und bedienbar ist, profitieren Sie von der Crawlbarkeit, Verständlichkeit und Nutzerführung. Genau diese Signale decken sich mit dem, was Google mit Page Experience / Core Web Vitals belohnen will.

5 SEO-Vorteile (konkret in Onlineshops spürbar)

1. Core Web Vitals stabilisieren sich, weil sauberes HTML und weniger visuelles Chaos oft auch CLS/LCP verbessern.
2. Alt-Texte machen Produktbilder auffindbar und liefern Kontext, den Google und KI-Systeme direkt verwerten können.
3. Semantik (H1 bis H6, Labels, Listen) erhöht die inhaltliche Klarheit und hilft bei Snippets und KI-Zusammenfassungen.
4. Mobile-First wird robuster, weil Reflow, Touch-Targets und Lesbarkeit weniger Absprünge erzeugen.
5. Struktur + interne Verlinkung + Schema werden konsistenter, weil Accessibility immer „maschinenlesbar“ denkt.

Abmahn-Risiken: typische Kostenfelder (E-Commerce 2025/2026)

Verstoß	Typische Kosten	Wer mahnt ab?	Fix
Fehlende/arme Alt-Texte	ca. 250–1.000 €	Wettbewerbsvereine/Anwälte	Alt-Texte pflegen
Fokus nicht sichtbar	oft > 600 €	spezialisierte Kanzleien (z. B. CLAIM)	Fokus sichtbar machen
Checkout nicht tastaturfähig	häufig 500–1.400 €	Wettbewerber/Verbände/Anwälte	Tastatur-Flow testen
Unzugängliche PDFs	häufig 500–1.000 €	Wettbewerbsrechtliche Abmahner	Tagged PDFs

Wenn auch Sie Ihre BFSG-Risiken reduzieren und Ihr SEO-Potenzial heben wollen, dann buchen Sie einfach ein SEO-Audit und sparen Sie sich die Bußgelder von bis zu 100.000 €. Außerdem könnte Ihnen die zuständige Marktüberwachungsbehörde den Vertrieb oder das Angebot Ihrer Dienstleistung auch komplett untersagen, wenn sie den Anforderungen an die Barrierefreiheit nicht entsprechen.

FAQs: Häufige Fragen zum Thema BFSG in Online-Shops 2026