Shopify Barrierefreiheit 2026: So wird dein Shop BFSG-konform

Seit Juni 2025 ist es Gesetz: Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Shopify-Shop-Betreiber dazu, ihre Online-Shops barrierefrei zu gestalten. Dein Shop muss für Menschen mit Sehbehinderungen, Hörverlust, Motorik-Einschränkungen und kognitiven Beeinträchtigungen nutzbar sein – ohne Ausreden, ohne Übergangsfrist für größere Unternehmen. Nicht nur aus ethischen Gründen: Ein barrierefreier Shopify-Shop bringt dir auch bessere Rankings bei Google, höhere Konversionsraten und weniger rechtliche Risiken.

In unserer Arbeit als Shopify Agentur Stuttgart sehen wir immer wieder: Viele Shop-Besitzer wissen gar nicht, ob sie vom BFSG betroffen sind – oder wo sie mit der Shopify Barrierefreiheit konkret anfangen sollen. Dieser Guide zeigt dir exakt, was du tun musst, welche Shopify-Themes & Apps dir helfen, wie du dich selbst testst – und wie viel die ganze Umsetzung kostet.

Checkliste: Das muss dein Shopify-Shop erfüllen

Bevor du mit der Umsetzung startest, hier die wichtigsten BFSG-Anforderungen im Überblick:

• WCAG 2.1 Level AA (Web Content Accessibility Guidelines) – der technische Standard für barrierefreie Websites
• Alt-Texte auf allen Bildern (Produktbilder, Hero-Bilder, Icons)
• Farbe nicht alleiniges Erkennungsmerkmal – Buttons müssen auch Symbole oder Text haben
• Tastaturnavigation – jedes Element im Shop muss mit Tab, Enter und Escape bedienbar sein
• Focus-Indikatoren – sichtbare Markierungen, wo man gerade ist
• Aussagekräftige Linktexte – nicht „hier klicken”, sondern „zur Produktseite”
• Kontrastverhältnisse – Text muss sich deutlich vom Hintergrund abheben (mind. 4.5:1)
• Barrierefreiheitserklärung – eine öffentliche Seite mit Dokumentation des Ist-Stands
• Video-Untertitel – falls du Videos verwendest
• Lesbare Schriftgröße – Minimum 12px, besser 14px+

Warum ist das BFSG für Shopify-Betreiber wichtig?

Nicht mehr nur eine „nice-to-have” Idee, sondern seit Juni 2025 Pflicht in Deutschland. Die Bußgelder für Verstöße gegen das BFSG können bis zu 100.000 Euro pro Verstoß betragen. Hinzu kommt: Betroffene Menschen können rechtliche Ansprüche geltend machen, wenn dein Shop nicht barrierefrei ist.

Die Regelung gilt nicht nur für große Konzerne. Auch mittelständische Unternehmen (ab 10 Mitarbeitern, ab ca. 2 Mio. Euro Umsatz pro Jahr) müssen sich daran halten.

Aber der finanzielle Grund ist nicht der einzige. Ein barrierefreier Shop bringt dir messbare Business-Vorteile:

✅ Bessere Google-Rankings – WCAG-konforme Seiten haben klare Hierarchien, gute Kontraste und semantisches HTML. Genau das belohnt Google in den Shopify SEO Rankings.

✅ Höhere Konversionsraten – Menschen mit Beeinträchtigungen sind eine Zielgruppe mit Kaufkraft. Wenn dein Shop für sie optimiert ist, kaufen sie bei dir statt bei der Konkurrenz.

✅ Breiteres Publikum – Alt-Texte helfen auch Nutzern mit langsamer Internetverbindung, älteren Nutzern und Suchmaschinen.

✅ Rechtliche Sicherheit – Mit einer dokumentierten Barrierefreiheitserklärung schützt du dich vor Klagen.

Schritt 1: Shopify-Theme wählen (oder aktualisieren)

Die gute Nachricht: Moderne Shopify 2.0 Themes sind schon weitgehend WCAG-konform. Shopify hat alle neuen Official Themes auf Basis der WCAG 2.1 AA Standards gebaut.

🚩 Alte Themes wie Debut oder Brooklyn? – Diese erfüllen WCAG 2.1 AA nicht. Tastaturnavigation mangelhaft, Kontraste oft zu gering. Besser auf Dawn oder Impulse upgraden – das ist günstiger als Bußgelder.

Schritt 2: Alt-Texte auf allen Bildern

Das ist die häufigste Barriere in Shopify-Shops: fehlende oder schlechte Alt-Texte. Menschen mit Sehbehinderungen nutzen Screen Reader – Programme, die den Webseitentext laut vorlesen. Ein Bild ohne Alt-Text ist für sie unsichtbar.

Regeln für gute Alt-Texte:

1. Beschreibe, was du siehst – nicht „Bild”, sondern konkret: Farbe, Form, Material, Kontext
2. Halte es kurz – 125 Zeichen sind ideal, max. 200
3. Nutze das primäre Keyword – falls sinnvoll (z. B. „Shopify E-Commerce Setup für Anfänger”)
4. Kein „Bild von” oder „Foto von” – der Screen Reader sagt bereits „Bild”
5. Bei Grafiken mit Text: Transkribiere den sichtbaren Text
6. Dekorative Bilder: Alt-Text leer lassen (alt=””)

<!-- ❌ Falsch -->
<img src="sofa.jpg" alt="Bild">
<img src="sofa.jpg" alt="image123.jpg">

<!-- ✅ Richtig -->
<img src="sofa.jpg" alt="Rote Mikrofaser-Sofabezug, 2-Sitzer, Nahaufnahme">

<!-- Dekoratives Bild (kein Alt-Text nötig) -->
<img src="divider.png" alt="">

Priorität beim Nachpflegen:

1. Produktbilder (brauchst du für SEO sowieso)
2. Logo (wird oft vergessen)
3. Icons (z. B. „versandkostenfrei”-Icon)
4. Hero-Banner-Bilder
5. Dekorative Bilder (diese können alt=”” sein)

Schritt 3: Tastaturnavigation & Focus-Indikatoren

Menschen mit motorischen Einschränkungen können keine Maus nutzen. Sie navigieren mit der Tab-Taste. Das muss in deinem Shop funktionieren:

• Mit Tab durch alle interaktiven Elemente springen
• Mit Enter einen Button klicken
• Mit Escape ein Menü schließen
• Mit Pfeiltasten in Dropdown-Menüs navigieren

Focus-Indikatoren verbessern: Der Focus-Indicator braucht eine Mindestkontrast-Ratio von 3:1 und mindestens 2px Größe. Wenn dein Theme den Standard nicht erfüllt, hilft ein kleines CSS-Snippet:

/* Focus-Indicator für alle interaktiven Elemente */
a:focus, button:focus, input:focus, select:focus {
  outline: 2px solid #000;
  outline-offset: 2px;
}

🚩 Häufiger Fehler: Viele Themes setzen outline: none für ein „sauberes” Design. Das macht deinen Shop für Tastatur-Nutzer unbrauchbar. Entferne diese Regel oder ersetze sie durch einen sichtbaren Focus-Style.

Schritt 4: Farbe und Kontrast

Normal-Text: Mindestens 4.5:1 Kontrast zwischen Schriftfarbe und Hintergrund. Große Texte (18pt oder größer, oder 14pt bold): Mindestens 3:1.

Die häufigsten Kontrast-Fehler in Shopify-Shops:

❌ Grauer Text auf weißem Hintergrund – oft zu gering

❌ Sehr helles Blau oder Grün auf Weiß – sieht fancy aus, ist aber nicht lesbar

❌ Text über unscharfen Bildern – der Kontrast wird unstabil

Kostenlose Prüf-Tools:

• WebAIM Contrast Checker – einfach Farben eingeben und sofort sehen
• Chrome DevTools – Element inspizieren → Contrast Ratio direkt ablesen
• WAVE Browser Extension – zeigt Kontrastfehler direkt im Browser

Schritt 5: Barrierefreiheitserklärung erstellen

Das ist eine oft übersehene, aber rechtlich wichtige Seite. Die Barrierefreiheitserklärung dokumentiert, welche WCAG-Standards du erfüllst, wo noch Lücken bestehen und wie Nutzer Feedback geben können.

So legst du sie in Shopify an:

1. Neue Seite erstellen: Shopify Admin → Online Store → Seiten → Seite hinzufügen
2. Titel: „Barrierefreiheitserklärung”
3. URL: /pages/barrierefreiheit
4. In Fußzeile verlinken: Footer bearbeiten, Link zur Seite hinzufügen
5. Veröffentlichen

Barrierefreiheitserklärung

Dieser Shop wird nach den Richtlinien der Web Content
Accessibility Guidelines (WCAG) 2.1 Level AA gestaltet.

Was funktioniert barrierefrei:
• Alle Produktseiten haben Alt-Texte für Bilder
• Der Shop ist vollständig mit der Tastatur nutzbar
• Mindestens 4.5:1 Kontrastverhältnis
• Barrierefreie Formulare (Checkout, Newsletter)

Bekannte Einschränkungen:
• Einige ältere PDFs sind noch nicht barrierefrei
• [Weitere bekannte Lücken ehrlich dokumentieren]

Feedback: accessibility@deinshop.de
Antwortzeit: 5 Werktage

🚩 Wichtig: Deine Barrierefreiheitserklärung muss wahr und aktuell sein. Wenn du schreibst „Alt-Texte auf allen Bildern” und das nicht stimmt, kann das rechtliche Konsequenzen haben. Dokumentiere ehrlich – auch bekannte Lücken.

Schritt 6: Formulare & Fehlerbehandlung

Jedes Input-Feld (E-Mail, Name, Adresse) braucht ein Label, das deutlich zugeordnet ist. Screen Reader brauchen das, um zu wissen, was in das Feld gehört.

<!-- ❌ Falsch: Nur Placeholder, kein Label -->
<input type="text" placeholder="E-Mail-Adresse">

<!-- ✅ Richtig: Label + Input -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email">

Fehlerbehandlung: Wenn der Nutzer etwas falsch macht (z. B. ungültige E-Mail), darf das nicht nur über Farbe kommuniziert werden. Rotes Feld allein reicht nicht – du brauchst zusätzlich eine deutliche Fehlermeldung als Text, die auch vom Screen Reader erfasst wird.

Schritt 7: Video-Untertitel

Falls du Videos im Shop hast (Produkt-Demos, Brand-Videos im Hero):

• Untertitel müssen vorhanden sein – nicht nur Beschreibungen
• Audiodeskriptionen sind zusätzlich sinnvoll (für Menschen, die das Video nicht sehen können)
• Automatische YouTube-Untertitel sind oft fehlerhaft – besser manuell erstellen

Schritt 8: Responsive Design & Mobilgeräte

Barrierefreiheit ist nicht nur Desktop. Screen Reader auf Smartphones (VoiceOver auf iOS, TalkBack auf Android) funktionieren anders als auf Desktop. Touch-Ziele müssen mindestens 44×44px groß sein (Best Practice: 48×48px).

Schritt 9: Plugins & Apps für Barrierefreiheit

Es gibt einige Shopify-Apps, die bei der Barrierefreiheit helfen – aber mit einer wichtigen Einschränkung:

Apps sind sinnvoll für:

• ✅ Monitoring – regelmäßig prüfen, ob neue Fehler entstanden sind
• ✅ Education – dich und dein Team schulen
• ✅ Schnelle Wins – z. B. automatische Kontrast-Verbesserungen

🚩 Vorsicht bei Overlay-Tools wie AccessiBe – Overlays sind umstritten in der Accessibility-Community. Sie können nicht alle Probleme fixen (z. B. schlecht strukturiertes HTML). Overlays sind kein Ersatz für echte Barrierefreiheit.

Schritt 10: WCAG-Konformität selbst prüfen

Du kannst vieles selbst überprüfen, ohne einen Accessibility-Experten zu brauchen:

Manuelle Tests:

1. Keyboard Navigation – nur Tab, Shift+Tab, Enter und Escape. Jedes Element muss erreichbar sein
2. Kontrast-Check – WebAIM Contrast Checker: Farben eingeben und prüfen
3. Alt-Text Überprüfung – Rechtsklick auf Bild → „Bild inspizieren” → Alt-Attribut prüfen
4. Heading-Struktur – H1 → H2 → H3 (keine Sprünge)

Automatisierte Tests:

• Chrome Lighthouse – DevTools (F12) → Lighthouse Tab → Accessibility scannen
• WAVE Browser Extension – zeigt Fehler direkt im Browser (kostenlos)
• axe DevTools – sehr genau, zeigt konkrete Lösungsansätze (kostenlos)

Was kostet Shopify-Barrierefreiheit?

Die Frage, die alle interessiert. Hier die realistischen Shopify Kosten für Barrierefreiheit:

Realistische Zeitschätzung für einen 200-Produkt-Shop:

1. Audit durchführen: 8 Stunden
2. Alt-Texte schreiben: 40–50 Stunden
3. Theme überprüfen + Anpassungen: 10–20 Stunden
4. Barrierefreiheitserklärung: 2–3 Stunden
5. Finale Prüfung + Testing: 5–10 Stunden

Gesamt: 65–100 Stunden → bei 80–120 €/Stunde ca. 5.000–12.000 Euro.

Deine nächsten Schritte: Der 6-Wochen-Plan

Woche 1 – Grundlagen:

1. Überprüfe, ob du vom BFSG betroffen bist (Mitarbeiterzahl, Jahresumsatz)
2. Audit durchführen – nutze WAVE oder axe DevTools für die größten Probleme
3. Theme-Check – läuft dein Shop auf einem WCAG-konformen Theme?

Woche 2–4 – Implementierung:

1. Alt-Texte – beginne mit den 20 Top-Produkten, dann erweitere
2. Tastaturnavigation testen – Tab durch deinen Shop
3. Kontrast-Check – nutze WebAIM, überprüfe kritische Texte

Woche 5–6 – Dokumentation & Abschluss:

1. Barrierefreiheitserklärung erstellen und im Footer verlinken
2. Feedback-Prozess einrichten (E-Mail-Adresse, Team schulen)
3. Finale Prüfung mit WAVE/axe durchlaufen

Danach – laufende Wartung:

• Monatliche Checks mit Tools wie WAVE
• Bei neuen Produkten sofort Alt-Texte eintragen
• Bei Design-Änderungen Barrierefreiheit überprüfen

FAQ: Häufige Fragen zur Shopify Barrierefreiheit

Ist mein Shop betroffen?

Ja, wenn du in Deutschland einen Shopify-Shop betreibst und mehr als 10 Mitarbeiter hast (oder ab ca. 2 Mio. Euro Jahresumsatz). Kleinere Unternehmen sollten es trotzdem tun – aus guten Geschäftsgründen und zur rechtlichen Zukunftssicherheit.

Können Overlays wie AccessiBe alle Probleme lösen?

Nein. Overlays können einige Dinge verbessern (Farben, Schriftgröße), aber sie können keine fehlenden Alt-Texte hinzufügen, schlechte HTML-Struktur fixen oder Tastaturnavigation einbauen. Overlays sind kein Ersatz für echte Barrierefreiheit.

Wie oft sollte ich meinen Shop prüfen?

Mindestens 2x pro Jahr. Besser: monatlich oder bei größeren Änderungen. Wenn du neue Produkte oder Features hinzufügst, überprüfe sofort die Barrierefreiheit.

Was ist mit PDFs und Downloads?

PDFs müssen ebenfalls barrierefrei sein. Wenn du Bedienungsanleitungen, Kataloge oder Whitepapers als PDF anbietest, müssen auch diese WCAG-konform sein. Adobe Acrobat kann helfen, PDFs zu reparieren.

Kann ich WCAG AA erreichen, wenn mein Theme es nicht ist?

Schwierig. Wenn dein Theme grundlegend keine Tastaturnavigation unterstützt, kannst du das mit CSS allein nicht fixen – du bräuchtest Custom-JavaScript. Das ist aufwändig. Besser: Theme upgraden.

Fazit: Barrierefreiheit ist kein One-Time-Projekt

Shopify Barrierefreiheit nach BFSG ist nicht optional – es ist Pflicht. Aber die gute Nachricht: Mit modernen Shopify-Themes und etwas Disziplin ist es machbar.

✅ Mehr Verkäufe – du öffnest deinen Shop für eine bisher ausgeschlossene Zielgruppe

✅ Bessere Rankings – Google liebt barrierefreie Websites

✅ Rechtliche Sicherheit – keine Bußgelder, keine Klagen

✅ Positive Brand-Wahrnehmung – Menschen merken, dass dir Inklusion wichtig ist

Der erste Schritt ist immer der schwierigste. Nutze die Checklisten und den 6-Wochen-Plan in diesem Guide – und baue von dort aus. Du brauchst Hilfe bei der Umsetzung? Als Shopify Agentur unterstützen wir dich bei Audit, Implementation und laufender Wartung.