Wer seinen Shopify-Store auf Barrierefreiheit testen will, steht meist vor derselben Frage: Welches Tool nimmt man, und worauf darf man sich am Ende verlassen? Seit das Barrierefreiheitsstärkungsgesetz (BFSG) am 28. Juni 2025 in Kraft getreten ist, ist das keine reine Designfrage mehr, sondern eine Pflicht für alle Anbieter oberhalb der Kleinstunternehmen-Schwelle. Dieser Beitrag zeigt, wie Sie Ihren Store in wenigen Minuten mit einem automatischen On-Page-Scan auf BFSG-relevante WCAG-Verstöße prüfen, was ein solcher Scan zuverlässig findet, und ebenso ehrlich, was er prinzipbedingt nicht finden kann und deshalb manuell geprüft werden muss.
Barrierefreiheit im Web wird nicht nach Gefühl beurteilt, sondern an einem konkreten Prüfmaßstab gemessen. Das BFSG (BGBl. 2021 I S. 2970) setzt die EU-Richtlinie 2019/882 (European Accessibility Act, EAA) in deutsches Recht um. Online-Shops fallen nach § 1 Abs. 3 Nr. 5 BFSG als "Dienstleistungen im elektronischen Geschäftsverkehr" in den Anwendungsbereich. Über Anlage I der EU-Richtlinie 2019/882 verweist das BFSG auf die harmonisierte Norm EN 301 549 v3.2.1, die in ihrem Kapitel 9 die WCAG-2.1-AA-Erfolgskriterien für Webinhalte übernimmt.
Einen Store zu testen heißt also: Sie prüfen ihn gegen die WCAG-Erfolgskriterien der Stufen A und AA. Manche dieser Kriterien lassen sich rein technisch im Code ablesen, andere setzen menschliche Beurteilung voraus. Genau an dieser Trennlinie entscheidet sich, was ein Tool für Sie erledigen kann und was nicht.
Als Anbieter des Online-Shops sind Sie im Sinne des BFSG der Dienstleistungserbringer. Nach § 14 BFSG müssen Sie Informationen darüber erstellen und bereitstellen, wie Ihre Dienstleistung die Anforderungen erfüllt. Welche Angaben diese Information enthalten muss, regelt Anlage 3 BFSG. Auf Verlangen der Marktüberwachungsbehörde sind nach § 14 Abs. 5 BFSG die einschlägigen Unterlagen vorzulegen. Vom Anwendungsbereich ausgenommen sind nach § 3 Abs. 3 BFSG nur Kleinstunternehmen, also Unternehmen mit weniger als zehn Beschäftigten UND einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens zwei Millionen EUR. Beide Bedingungen müssen kumulativ erfüllt sein. Bei Verstößen sieht § 37 BFSG Bußgelder vor, nach § 37 Abs. 2 BFSG für das nicht konforme Anbieten oder Erbringen einer Dienstleistung bis zu 100.000 EUR.
Ein On-Page-Scanner lädt eine Seite Ihres Stores, baut das gerenderte HTML auf und prüft jedes Element gegen maschinell entscheidbare Regeln. In diese Kategorie fällt ein erheblicher Teil der häufigsten und zugleich folgenreichsten Verstöße. Vier Gruppen erkennt ein guter Scan zuverlässig:
| Befund |
Zugrunde liegendes WCAG-Kriterium |
Stufe |
| Fehlende Alternativtexte an Bildern |
WCAG 1.1.1 Non-text Content |
A |
| Eingabefelder ohne verknüpftes Label |
WCAG 3.3.2 Labels or Instructions, 4.1.2 Name, Role, Value |
A |
| Zu geringer Farbkontrast |
WCAG 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast |
AA |
| Fehlende oder unsichtbare Fokusindikatoren |
WCAG 2.4.7 Focus Visible |
AA |
Fehlende Alternativtexte. Ein Bild ohne alt-Attribut oder mit leerem alt bei tragender Bildaussage ist im Code eindeutig erkennbar. In Shopify-Stores betrifft das vor allem Produktbilder, Logo-Varianten und über Apps eingespielte Banner. Der Scan listet die betroffenen Bilder mit ihrer Quelle auf.
Fehlende Formularlabels. Ein Eingabefeld ohne programmatisch verknüpften zugänglichen Namen lässt sich im HTML eindeutig identifizieren. Newsletter-Feld, Login, Kontaktformular und Suchfeld sind die klassischen Fundorte, oft mit einem grauen Platzhaltertext als einziger Beschriftung, was kein gültiges Label ersetzt.
Kontrastfehler. Das Verhältnis zwischen einer Textfarbe und ihrem Hintergrund ist eine reine Rechenoperation aus zwei Farbwerten. Der Scan misst sie und meldet jede Unterschreitung der Grenzen von 4,5:1 für normalen Text und 3:1 für großen Text sowie für Bedienelemente.
Fehlende Fokusindikatoren. Wenn ein Theme den sichtbaren Tastaturfokus per CSS unterdrückt, etwa über ein pauschales outline: none, lässt sich das im Stylesheet erkennen. Ohne sichtbaren Fokus weiß eine Person, die per Tastatur navigiert, nicht, wo sie gerade steht.
Diese vier Gruppen sind nicht zufällig gewählt. Es sind die Verstöße, die in fast jedem ungeprüften Store auftreten und die ein Scan in Sekunden findet, lange bevor man sie von Hand durchgehen könnte.
Hier wird es wichtig, ehrlich zu bleiben. Kein automatisches Werkzeug, auch keines, prüft die WCAG-Kriterien vollständig ab. Ein erheblicher Teil der Erfolgskriterien lässt sich nicht rein maschinell entscheiden. Der Rest verlangt menschliche Beurteilung. Zwei Bereiche sind für Shopify-Händler besonders relevant:
Tastaturbedienung. Ein Scan sieht, ob ein Fokusindikator existiert. Er kann aber nicht beurteilen, ob sich Ihr Mega-Menü, ein Filter in der Kollektionsansicht, ein Slider oder ein Cookie-Banner tatsächlich vollständig und in sinnvoller Reihenfolge mit der Tastatur bedienen lässt und ob man aus jedem Element wieder herauskommt. Das verlangt, dass eine Person die Seite mit Tab, Pfeiltasten und Enter wirklich durchklickt. Wie Sie das systematisch angehen, beschreibt unser Beitrag zur Tastaturbedienung in Shopify für Menü, Filter und Checkout.
Screenreader-Ausgabe. Ein Scan kann prüfen, ob ein alt-Text vorhanden ist. Ob dieser Text die Bildaussage sinnvoll wiedergibt oder nur "IMG_4823.jpg" enthält, kann er nicht bewerten. Ebenso wenig, ob die Vorleseabfolge logisch ist, ob Überschriftenebenen die Seitenstruktur korrekt abbilden oder ob ein Statushinweis nach dem Hinzufügen zum Warenkorb auch angesagt wird. Das hört man nur, wenn man die Seite mit einem echten Screenreader durchgeht.
Genau deshalb gilt: Ein Scan ist der schnelle, sinnvolle erste Schritt, aber er ist kein Konformitätsnachweis. Wer das verspricht, übertreibt. Die manuellen Prüfungen bleiben unverzichtbar.
Der schnellste Einstieg verlangt keine Installation. Auf accessifyai.de gibt es einen kostenlosen On-Page-Scanner, der eine einzelne URL prüft und Ihnen sofort einen konkreten Befund-Report ausgibt. So gehen Sie vor:
- Geben Sie die Adresse Ihrer Startseite ein und starten Sie den Scan.
- Warten Sie den Report ab. Er listet die gefundenen Verstöße nach Kategorie auf, also fehlende Alternativtexte, unbeschriftete Felder, Kontrastfehler und unterdrückte Fokusindikatoren.
- Lesen Sie den Report als Bestandsaufnahme. Er sagt Ihnen, wo Ihr Store steht, ohne dass Sie schon eine Zeile Code angefasst haben.
Den ersten Eindruck holen Sie sich am besten direkt mit einem kostenlosen Scan Ihrer Startseite. Der Report ist bewusst niedrigschwellig: Sie sehen die Art und Anzahl der Befunde, ohne etwas zu installieren oder einzurichten.
Der On-Page-Scanner prüft, was eine Seite an den Browser ausliefert. Er sagt Ihnen, dass ein Bild keinen Alternativtext hat. Was er aus Sicht eines externen Besuchers naturgemäß nicht weiß, ist, in welcher Liquid-Datei oder welchem Section-Snippet dieses Bild gerendert wird. Genau hier setzt der installierte App-Scan an.
Die AccessifyAI-App läuft im Shopify-Admin mit Zugriff auf Ihr Theme. Sie scannt mehrere Seitentypen, also Startseite, Kollektion, Produktseite, Warenkorb, und ordnet jeden Befund dem Shopify-Code zu. Aus "diesem Bild fehlt der Alternativtext" wird "in dieser Section, an dieser Stelle, fehlt das alt-Attribut", samt Korrekturvorschlag als Liquid-Diff, den Sie vor der Übernahme begutachten. Den vollständigen App-Scan starten Sie nach der Installation aus dem Shopify App Store. AccessifyAI gibt es mit kostenlosem Einstieg, kostenpflichtige Pläne bieten mehr Funktionen. Die jeweils aktuellen Preise stehen im App-Store-Eintrag.
Der Unterschied ist nicht kosmetisch. Ein Befund, den Sie nicht im Code verorten können, kostet Sie das Suchen. Ein Befund, der direkt auf die richtige Datei zeigt, lässt sich beheben.
Eine verbreitete Abkürzung sind sogenannte Overlay- oder Accessibility-Widgets, die per Skript über den bestehenden Store gelegt werden und versprechen, Barrierefreiheit "per Klick" herzustellen. Sachlich betrachtet sitzt ein Overlay auf der Seite, es verändert aber den zugrunde liegenden Theme-Code nicht. Fehlt im Theme das alt-Attribut oder das Formularlabel, fehlt es weiterhin im Code, auch wenn ein Skript zur Laufzeit etwas darüberlegt. Die gut dokumentierte Kritik an Overlays setzt genau hier an: Sie adressieren das Symptom an der Oberfläche, nicht die Ursache im Code.
Ein Test, der diese Lücke aufdecken soll, muss deshalb am echten ausgelieferten Markup ansetzen und die Korrektur im Theme ermöglichen, nicht in einer überlagernden Schicht. AccessifyAI schlägt Korrekturen am tatsächlichen Theme-Code (Liquid und CSS) vor, die Sie vor der Übernahme in einer Vorschau begutachten. Warum ein Overlay das BFSG nicht erfüllt, vertieft unser Beitrag dazu, warum Overlay-Tools beim BFSG keine Lösung sind.
Sie müssen sich nicht auf ein einziges Werkzeug festlegen. Für einen verlässlichen Test kombinieren Sie automatische und manuelle Prüfung:
| Werkzeug |
Zweck |
Kosten |
| AccessifyAI On-Page-Scanner |
Schneller Befund-Report für eine URL ohne Installation |
kostenlos |
| AccessifyAI App |
Shopify-spezifischer Scan mit Code-Zuordnung und Liquid-Diffs |
kostenloser Einstieg, kostenpflichtige Pläne |
| axe DevTools |
Erkennt viele technische Verstöße im Browser |
kostenlose Variante |
| WAVE (WebAIM) |
Visuelle Markierung von Befunden auf der Seite |
kostenlos |
| NVDA Screenreader |
Manuelle Prüfung der Vorleseausgabe |
kostenlos |
| Tastatur allein |
Manuelle Prüfung der Bedienbarkeit ohne Maus |
kostenlos |
Ich habe AccessifyAI entwickelt, weil allgemeine Werkzeuge zwar einen Verstoß melden, aber nicht sagen, in welcher Liquid-Datei die Korrektur erfolgen muss, und weil ein Scan allein nie ausreicht. AccessifyAI scannt, ordnet Befunde dem Theme-Code zu und schlägt Korrekturen vor, die Sie vor dem Anwenden begutachten. Damit hilft das Werkzeug, Barrieren zu finden und zu beheben. Es garantiert aber keine Rechtskonformität oder BFSG-Konformität. Die rechtliche Verantwortung als Dienstleistungserbringer bleibt nach § 14 BFSG beim Händler.
- Starten Sie mit dem kostenlosen On-Page-Scan Ihrer Startseite und lesen Sie den Report als Bestandsaufnahme.
- Installieren Sie die App und scannen Sie zusätzlich Kollektion, Produktseite und Warenkorb, damit die Befunde dem Theme-Code zugeordnet werden.
- Arbeiten Sie die automatischen Befunde an einer Theme-Kopie ab und veröffentlichen Sie erst nach der Vorschau.
- Ergänzen Sie die manuelle Tastaturprüfung: Bedienen Sie Menü, Filter und Checkout nur mit Tab, Pfeiltasten und Enter.
- Ergänzen Sie die manuelle Screenreader-Prüfung an den wichtigsten Seiten.
- Wiederholen Sie den Scan nach jedem Theme-Update und nach jeder neuen App, da beide neue Lücken einführen können.
Für den schnellen Einstieg eignet sich ein automatischer On-Page-Scanner, der eine URL gegen die maschinell prüfbaren WCAG-Kriterien testet, etwa der kostenlose Scanner auf accessifyai.de. Für die Zuordnung der Befunde zum Theme-Code dient ein installierter App-Scan. Ergänzend bleiben manuelle Tastatur- und Screenreader-Prüfungen nötig.
Ein Scan findet zuverlässig fehlende Alternativtexte (WCAG 1.1.1), unbeschriftete Formularfelder (WCAG 3.3.2, 4.1.2), zu geringen Farbkontrast (WCAG 1.4.3, 1.4.11) und unterdrückte Fokusindikatoren (WCAG 2.4.7). Er kann nicht beurteilen, ob ein Menü wirklich mit der Tastatur bedienbar ist oder ob ein Alternativtext inhaltlich sinnvoll ist. Das verlangt manuelle Prüfung.
Nein. Kein Werkzeug kann Rechtskonformität garantieren. Ein automatischer Scan deckt nur den maschinell entscheidbaren Teil der WCAG-Kriterien ab. Tastatur- und Screenreader-Prüfungen bleiben manuell. Die rechtliche Verantwortung trägt als Dienstleistungserbringer nach § 14 BFSG der Händler.
Der On-Page-Scan prüft das ausgelieferte HTML einer einzelnen URL von außen und sagt Ihnen, dass ein Verstoß vorliegt. Der installierte App-Scan läuft im Shopify-Admin mit Theme-Zugriff, prüft mehrere Seitentypen und ordnet jeden Befund dem Liquid-Code zu, samt Korrekturvorschlag als Diff, den Sie vor der Übernahme begutachten.
Nein. Ein Overlay sitzt per Skript über der Seite und verändert den Theme-Code nicht. Fehlt im Theme ein Alternativtext oder ein Formularlabel, fehlt es im Code weiterhin. Eine dauerhafte Korrektur erfolgt im Theme selbst, nicht in einer überlagernden Schicht.
Gefordert ist fortlaufende Barrierefreiheit, nicht eine einmalige Prüfung. Jedes Theme-Update, jede Änderung am Farbschema und jede neue App, die eigenes Markup einspielt, kann neue Lücken einführen. Ein erneuter Scan nach jedem solchen Eingriff ist sinnvoll. Die Information nach § 14 BFSG dazu, wie Ihre Dienstleistung die Anforderungen erfüllt, sollte den aktuellen Stand abbilden.
Einen Shopify-Store auf Barrierefreiheit zu testen heißt, ihn gegen die WCAG-Kriterien der Stufen A und AA zu prüfen, die über EN 301 549 v3.2.1 nach dem BFSG verbindlich sind. Ein automatischer On-Page-Scan findet schnell und zuverlässig fehlende Alternativtexte, unbeschriftete Formularfelder, Kontrastfehler und unterdrückte Fokusindikatoren. Er kann jedoch weder die tatsächliche Tastaturbedienbarkeit noch die Screenreader-Ausgabe beurteilen, diese Prüfungen bleiben manuell. Der niedrigschwellige Weg führt vom kostenlosen On-Page-Scanner, der einen sofortigen Befund-Report liefert, zum installierten App-Scan, der die Befunde dem Shopify-Code zuordnet und als Liquid-Diff zur Korrektur aufbereitet, die Sie vor der Übernahme begutachten. Ein bestandener Scan ist ein guter erster Schritt, aber kein Konformitätsnachweis. Die Verantwortung als Dienstleistungserbringer bleibt nach § 14 BFSG beim Händler.