Website barrierefrei machen: Fahrplan für Onlineshops in 7 Schritten
Veröffentlicht am 14. Oktober 2026
Eine Website machen Sie barrierefrei, indem Sie zuerst messen, dann die Fehler entlang der Kaufstrecke von der Startseite bis zum Checkout nach den Kriterien der WCAG 2.2 beheben und das Ergebnis dokumentieren und laufend prüfen. Für einen Onlineshop heißt das sieben Schritte: messen, Reihenfolge festlegen, die häufigsten Fehler beheben, Theme und Apps prüfen, PDFs aufbereiten, Erklärung und Meldeweg veröffentlichen, nach jeder Änderung erneut prüfen.
Zur Einordnung: Das Barrierefreiheitsstärkungsgesetz gilt für Dienstleistungen im elektronischen Geschäftsverkehr, die für Verbraucher nach dem 28. Juni 2025 erbracht werden (§ 1 Abs. 3 Nr. 5 BFSG). Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen (§ 3 Abs. 3 BFSG, Definition in § 2 Nr. 17 BFSG). Ob und wie Ihr Shop betroffen ist, lesen Sie in BFSG für Onlineshops: Pflichten und Ausnahmen. Der Fahrplan unten hilft Ihnen in beiden Fällen, denn die Hürden für Ihre Kundschaft sind dieselben.
Schritt 1: Messen
Prüfen Sie mindestens die Seiten, die jeder Kunde sieht: Startseite, eine Kategorieseite, eine Produktseite, den Warenkorb und den Checkout bis zur Zahlungsauswahl.
Kombinieren Sie zwei Methoden:
- Automatischer Test: Er findet schnell technische Fehler wie zu schwache Kontraste, fehlende Alternativtexte oder unbeschriftete Formularfelder. Das W3C stellt aber klar, dass solche Werkzeuge Barrierefreiheit nicht feststellen, sondern nur dabei helfen, und dass menschliches Urteil nötig ist (W3C: Selecting Web Accessibility Evaluation Tools).
- Tastaturtest von Hand: Legen Sie die Maus weg und bedienen Sie den Shop nur mit Tabulator, Umschalt plus Tabulator, Eingabe, Leertaste und Pfeiltasten. Suchen Sie ein Produkt, legen Sie es in den Warenkorb und gehen Sie bis zur Zahlungsauswahl. WooCommerce empfiehlt genau diesen Test: Produkte suchen, in den Warenkorb legen und den Checkout ohne Maus abschließen (WooCommerce: Accessibility Tips for Store Owners).
Schreiben Sie jedes Problem in eine Liste mit Seite, Problem, betroffenem WCAG-Kriterium und Ursache (Inhalt, Theme oder App). Wie Sie einen Test lesen und was er nicht abdeckt, erklärt Website auf Barrierefreiheit prüfen.
Schritt 2: Reihenfolge nach der Kaufstrecke festlegen
Ordnen Sie die Liste mit zwei Fragen. Erstens: Hindert das Problem jemanden daran, den Kauf abzuschließen? Zweitens: Wo steckt die Ursache? Ein Fehler im Theme oder in einer App taucht auf vielen Seiten auf und verschwindet mit einer einzigen Korrektur; ein fehlender Alternativtext muss Bild für Bild nachgetragen werden.
| Rang | Bereich | Warum zuerst | Typische Prüfpunkte |
|---|---|---|---|
| 1 | Checkout und Login | Hier endet der Kauf, wenn etwas nicht geht | Tastatur bis zum Bestellbutton, Feldbeschriftungen, Fehlermeldungen, Zahlungsarten |
| 2 | Warenkorb | Mengen ändern und Artikel entfernen muss ohne Maus gehen | Schaltflächen mit Namen, Fokus sichtbar |
| 3 | Produktseite | Variante wählen und "In den Warenkorb" | Auswahlfelder beschriftet, Produktbilder mit Alternativtext |
| 4 | Startseite und Navigation | Der Weg zu den Produkten | Menü per Tastatur, Slider anhaltbar, Kontraste |
| 5 | Weitere Formulare | Kontakt, Newsletter, Suche, Filter, Bewertungen | dieselben Regeln wie im Checkout |
| 6 | Inhaltsseiten und Blog | Wichtig, aber selten kaufentscheidend | Überschriften, Kontraste, Linktexte |
Für den Checkout gibt es auch einen rechtlichen Grund: Nach § 19 BFSGV müssen Identifizierungs-, Authentifizierungs-, Sicherheits- und Zahlungsfunktionen bei Dienstleistungen im elektronischen Geschäftsverkehr „wahrnehmbar, bedienbar, verständlich und robust“ gestaltet sein. Im Shop sind das vor allem Kundenkonto und Login sowie die Zahlungsauswahl.
Schritt 3: Die häufigsten Fehler beheben
Die Tabelle verbindet jeden häufigen Fehler mit dem zugehörigen Kriterium der WCAG 2.2 und einem Test, den Sie selbst durchführen können. Die Stufe steht in Klammern; Ziel ist die Stufe AA, die alle Kriterien der Stufe A einschließt.
| Fehler | WCAG-2.2-Kriterium | So testen Sie |
|---|---|---|
| Produktbild ohne oder mit nichtssagendem Alternativtext | 1.1.1 Nicht-Text-Inhalt (A) | Alternativtext im Shop-Backend ansehen: beschreibt er das Produkt mit Farbe, Material oder Ansicht? |
| Text als Bild, etwa ein Rabatt-Banner | 1.4.5 Bilder von Text (AA) | Lässt sich der Text markieren? Wenn nicht, ist er ein Bild |
| Zu schwacher Kontrast | 1.4.3 Kontrast (Minimum) (AA) | Kontrastprüfer: mindestens 4,5:1 für normalen Text, 3:1 für großen Text |
| Menü, Filter oder Variantenauswahl nur mit Maus bedienbar | 2.1.1 Tastatur (A) | Jedes Element mit Tabulator erreichen und mit Eingabe oder Leertaste auslösen |
| Fokus bleibt in einem Pop-up hängen | 2.1.2 Keine Tastaturfalle (A) | Kommen Sie mit Tabulator oder Escape wieder heraus? |
| Fokusrahmen unsichtbar | 2.4.7 Fokus sichtbar (AA) | Beim Tabben muss immer erkennbar sein, wo Sie sind |
| Fokus verdeckt von festem Header oder Cookie-Banner | 2.4.11 Fokus nicht verdeckt (Minimum) (AA) | Durch die Seite tabben, während Header und Banner sichtbar sind |
| Slider läuft ohne Pause-Möglichkeit | 2.2.2 Pausieren, Beenden, Ausblenden (A) | Gibt es eine Pause-Schaltfläche, die per Tastatur erreichbar ist? |
| Schaltflächen zu klein auf dem Smartphone | 2.5.8 Zielgröße (Minimum) (AA) | Ziele mindestens 24 mal 24 CSS-Pixel groß, mit den Ausnahmen des Kriteriums |
| Formularfeld ohne Beschriftung | 3.3.2 Beschriftungen oder Anweisungen (A) und 1.3.1 Info und Beziehungen (A) | Klick auf die Beschriftung setzt den Cursor ins Feld |
| Fehler nur durch rote Umrandung markiert | 3.3.1 Fehlererkennung (A) und 3.3.3 Fehlerempfehlung (AA) | Formular falsch absenden: steht in Textform, was falsch ist und wie es richtig geht? |
| Lieferadresse muss als Rechnungsadresse erneut eingetippt werden | 3.3.7 Redundante Eingabe (A) | Gibt es "Rechnungsadresse wie Lieferadresse"? |
| Login blockiert Passwortmanager oder Einfügen | 3.3.8 Barrierefreie Authentifizierung (Minimum) (AA) | Passwort und Bestätigungscode einfügen; funktioniert der Passwortmanager? |
| Symbol-Schaltfläche ohne Namen, etwa Lupe oder Warenkorb | 4.1.2 Name, Rolle, Wert (A) | Im automatischen Test erscheint sie meist als Schaltfläche ohne zugänglichen Namen |
Drei Hinweise aus den Erläuterungen des W3C helfen beim Beheben:
- Feste Kopfzeilen und Cookie-Banner: Das W3C nennt feste Kopf- und Fußzeilen sowie Cookie-Banner als typische Ursachen dafür, dass der Fokus verdeckt wird (Understanding 2.4.11).
- Eigenes CSS: Die Regel
:focus {outline: none}ohne Ersatz ist ein dokumentiertes Fehlerbild, weil sie den Fokusrahmen entfernt (W3C Failure F78). Suchen Sie in Ihren eigenen CSS-Anpassungen gezielt danach. - Login und Captcha: Das Blockieren von Passwortmanagern oder vom Einfügen in Anmeldefelder verstößt gegen 3.3.8, wenn es keine Alternative gibt; ein Rätsel-Captcha braucht eine Alternative ohne Denkaufgabe (Understanding 3.3.8).
Platzhaltertext im Feld ersetzt keine Beschriftung, weil er beim Tippen verschwindet; ein leerer Alternativtext ist nur für rein dekorative Bilder richtig, Produktbilder und verlinkte Bilder sind nie dekorativ (WooCommerce).
Achten Sie zusätzlich auf Angaben zur Barrierefreiheit Ihrer Produkte: § 19 BFSGV verlangt, dass Sie solche Informationen bereitstellen, soweit der verantwortliche Wirtschaftsakteur, etwa der Hersteller, sie liefert. Übernehmen Sie sie in die Produktbeschreibung.
Schritt 4: Theme, Apps und Shopsystem prüfen
Viele Fehler aus Schritt 3 entstehen im Theme oder in einer App und lassen sich dort einmal für alle Seiten beheben. Was die Hersteller selbst dazu schreiben:
| Shopsystem | Was der Hersteller sagt | Was Sie daraus machen |
|---|---|---|
| Shopify | Themes müssen Links, Schaltflächen, Menüs und Formularelemente per Tastatur bedienbar machen, der Fokus muss sichtbar sein, nichts darf nur per Mauszeiger erscheinen. Die Einhaltung dieser Empfehlungen allein garantiert laut Shopify kein vollständig barrierefreies Theme (Shopify: Accessibility best practices for themes). | Prüfen Sie Ihr Theme mit dem Tastaturtest aus Schritt 1, auch ein Theme aus dem offiziellen Angebot |
| WooCommerce | Empfiehlt Themes mit dem Schlagwort "accessibility-ready" aus dem WordPress-Verzeichnis, für andere Themes einen Konformitätsbericht des Entwicklers (Accessibility Conformance Report). Erweiterungen seien nicht gleich barrierefrei, eigener Code könne die Barrierefreiheit verschlechtern (WooCommerce). | Theme-Schlagwort prüfen, jede Erweiterung einzeln testen, nach eigenem Code die Kaufstrecke erneut testen |
| Shopware | Strebt für die Storefront WCAG 2.1 AA und die BITV 2.0 an und nennt selbst noch offene Punkte. Ab Version 6.6 gibt es Verbesserungen, teils hinter dem Schalter ACCESSIBILITY_TWEAKS; mit Version 6.7 werden sie Standard (Shopware: Accessibility in the Storefront). | Version prüfen; auf 6.6 den Schalter in einer Testumgebung aktivieren und das eigene Theme damit testen, oder auf 6.7 aktualisieren |
Für alle Systeme gilt:
- Apps einzeln testen: Pop-ups, Bewertungs-Widgets, Chat, Produktfilter und eingebettete Zahlungsfelder bringen eigenen Code mit. Testen Sie jede App einzeln mit der Tastatur und ersetzen Sie, was sich nicht bedienen lässt.
- Jede Zahlungsart einmal durchspielen: Weiterleitungen zu Zahlungsanbietern gehören zur Kaufstrecke.
- Overlays nicht als Lösung einplanen: Das Europäische Behindertenforum (EDF) und die International Association of Accessibility Professionals (IAAP) halten in einer gemeinsamen Erklärung fest, dass Overlay-Werkzeuge eine Website weder barrierefrei noch konform mit dem europäischen Barrierefreiheitsrecht machen, keinen Ersatz für die Reparatur der Website darstellen und die Hilfstechnik der Nutzer stören können (EDF und IAAP: Joint statement on accessibility overlays, 17.05.2023).
Schritt 5: PDFs aufbereiten
Viele Shops verlinken Datenblätter, Größentabellen, Kataloge oder Formulare als PDF. Nach § 1 Abs. 4 Nr. 2 BFSG gilt das Gesetz nicht für Dateiformate von Büro-Anwendungen, die vor dem 28. Juni 2025 veröffentlicht wurden. Für neuere Dokumente greift diese Ausnahme nicht.
- Brauchen Sie das PDF? AGB, Widerrufsbelehrung oder eine Größentabelle sind als normale Shopseite meist leichter barrierefrei zu halten.
- Wenn ja: Bereiten Sie es nach PDF/UA auf. Wie das geht und wie Sie es prüfen, steht in Barrierefreie PDF nach PDF/UA.
Schritt 6: Erklärung und Meldeweg veröffentlichen
Nach § 14 Abs. 1 Nr. 2 BFSG erstellen Sie die Informationen nach Anlage 3 BFSG und machen sie barrierefrei zugänglich. Dazu gehören eine allgemeine Beschreibung Ihrer Dienstleistung, die zum Verständnis nötigen Erläuterungen, eine Beschreibung, wie Sie die Anforderungen der Verordnung erfüllen, und die zuständige Marktüberwachungsbehörde, die MLBF. Ihre Liste aus Schritt 1 liefert den Stoff. Ein Muster finden Sie in Barrierefreiheitserklärung: Muster für Onlineshops.
Ergänzen Sie einen Meldeweg, über den Kunden Ihnen Barrieren mitteilen können, etwa eine E-Mail-Adresse oder ein barrierefreies Formular, und verlinken Sie Erklärung und Meldeweg von jeder Seite aus, zum Beispiel im Fußbereich. So erfahren Sie von Problemen, die kein Test findet.
Schritt 7: Laufend prüfen
§ 14 Abs. 3 BFSG verlangt, dass die Anforderungen während der gesamten Erbringung der Dienstleistung erfüllt sind und Änderungen berücksichtigt werden. Bei Nichtkonformität ergreifen Sie nach § 14 Abs. 4 BFSG die erforderlichen Korrekturmaßnahmen.
Prüfen Sie deshalb erneut:
- nach jedem Theme-Update oder Relaunch,
- nach dem Einbau neuer Apps, Plugins oder Zahlungsarten,
- nach Änderungen am Checkout oder an eigenem CSS,
- zusätzlich in einem festen Rhythmus, den Sie selbst festlegen, zum Beispiel einmal im Quartal.
Vergleichen Sie jedes Ergebnis mit Ihrer Liste und passen Sie Ihre Barrierefreiheitserklärung an, wenn sich etwas geändert hat.
Ihr nächster Schritt
Für Schritt 1 können Sie den kostenlosen Scan nutzen: Er prüft Startseite, Produktseite und Warenkorb automatisch gegen die Regeln der WCAG 2.2 in den Stufen A und AA und zeigt, ob Barrierefreiheitserklärung und Meldeweg verlinkt sind. Den Tastaturtest von Hand ersetzt er nicht, denn automatische Werkzeuge finden nur einen Teil aller Barrieren.
Dieser Ratgeber ist keine Rechtsberatung. Im Zweifel klären Sie Ihren Fall mit der Bundesfachstelle Barrierefreiheit oder einer Anwältin oder einem Anwalt.
Stand: 14.10.2026. Quellen gelesen am 14.10.2026.