Immer up-to-date sein in Sachen Web.
Barrierefreiheit bedeutet, dass dein Onlineshop für alle Nutzer:innen zugänglich und bedienbar ist – unabhängig von körperlichen Einschränkungen wie einer Seh- oder Hörbehinderung oder motorischen Beeinträchtigungen.
Rechtliche Pflicht: Mit Inkrafttreten des BFSG zum 28. Juni 2025 werden Barrierefreiheitsstandards verpflichtend.
Kundenzufriedenheit und Reichweite: Je einfacher und zugänglicher dein Shop ist, desto größer ist dein potenzieller Kundenkreis.
SEO-Vorteile: Suchmaschinen bewerten barrierefreie Shops oft besser, da klare Strukturen, Alt-Texte und valide HTML-Codes die Crawlability verbessern.
Barrierefreiheitsstärkungsgesetz (BFSG)
Umsetzung des European Accessibility Act (EAA) in Deutschland.
Verpflichtet Online-Shops, bis 28. Juni 2025 die EN 301 549 (basiert auf WCAG 2.1, Level AA) umzusetzen.
WCAG – Web Content Accessibility Guidelines
Internationaler Standard für barrierefreies Webdesign.
Level AA ist der geforderte Mindeststandard (zukünftig WCAG 2.2 AA).
Ausnahmen
Kleinstunternehmen (< 10 Beschäftigte und < 2 Mio. Euro Jahresumsatz) sind vom BFSG ausgenommen.
Mittlere Unternehmen (< 50 Mitarbeitende und < 10 Mio. Euro Jahresumsatz) können in begründeten Fällen Ausnahmen geltend machen.
Tipp: Ob dein Unternehmen betroffen ist, kannst du kostenfrei unter
bfsg-gesetz.de/check/ überprüfen.
Im Folgenden findest du die zentralen WCAG-Kriterien, die du speziell auf Shopify umsetzen solltest. Diese orientieren sich an den vier Prinzipien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Dazu kommen weitere konkrete Bereiche wie Formulare, Multimedia und Dokumente.
Achte auf ein Mindest-Kontrastverhältnis von 4,5:1 (optimal 7:1). Vermeide Rot-Grün-Kombinationen, da diese für viele Menschen mit Farbsehschwäche schwer unterscheidbar sind.
Hilfreiche Prüfungstools: WAVE, Siteimprove, WCAG Color Checker.
Ermögliche einen hohen Kontrastmodus, der sich per Schalter aktivieren lässt.
Wähle gut lesbare, serifenlose Schriften; sorge für genügend Zeilen- und Zeichenabstand.
Alt-Texte sollten für alle relevanten Bilder vorhanden sein, damit Screenreader sie erfassen können.
Stelle sicher, dass alle Links, Buttons und Formulare per Tastatur erreichbar sind. Der aktuell fokussierte Bereich sollte optisch hervorgehoben sein (Fokusindikator).
Biete Sprunglinks („Skip to content“) an, um lange Inhaltsblöcke zu überspringen.
Vermeide Sackgassen durch falsche Tab-Reihenfolgen und verhindere ungewollte Aktionen durch versehentliche Tastatureingaben.
Verwende kurze Sätze, intuitives Wording und eine klar definierte Überschriftenhierarchie (H1, H2, H3 etc.).
Das Layout sollte konsistent bleiben, damit Nutzer:innen nicht überrascht werden. Fokusänderungen dürfen keine unerwarteten Aktionen auslösen.
Sorge dafür, dass dein Theme und deine Inhalte mit Screenreadern (NVDA, JAWS) kompatibel sind.
Ein responsives Design ist unerlässlich, damit dein Shop auf allen Endgeräten gleichermaßen funktioniert.
Formularfelder sollten eindeutig beschriftet sein (z. B. „Vorname (Pflichtfeld)“) und ARIA-Attribute wie aria-required="true" verwenden.
Fehlermeldungen dürfen nicht nur farblich, sondern auch textlich gekennzeichnet sein.
Nutze autocomplete-Attribute wie autocomplete="name".
Falls es sich um finanzielle oder rechtliche Formulare handelt, biete Fehlerprüfungen und Möglichkeiten zur Korrektur an.
Untertitel und Transkriptionen sollten für Videos und Audios bereitstehen.
Autoplay ist zu vermeiden oder muss zumindest pausierbar sein.
Vermeide blinkende Inhalte und Animationen, die nicht gestoppt werden können.
Setze nur eine H1 pro Seite ein, gefolgt von H2, H3 usw.
Nutze aussagekräftige Linktexte statt „Hier klicken“.
Auch Downloads wie PDFs müssen barrierefrei sein: klare Überschriften und logische Lesereihenfolge.
Klickbare Elemente sollten mindestens 24 x 24 Pixel groß sein.
Tabellen müssen korrekt als HTML-Tabellen formatiert sein.
Binde ARIA-Attribute sinnvoll ein (aria-autocomplete, aria-checked usw.).
Validiere deinen Code über W3C Validator, achecks oder Google Lighthouse.
Sende uns eine Nachricht und sicher dir ein persönliches Beratungsgespräch – inklusive Website-Check!
Wer die Anforderungen nicht fristgerecht umsetzt, riskiert:
Da auch Verbraucher:innen Verstöße melden können, ist es für Shopify-Händler:innen entscheidend, frühzeitig Maßnahmen zu ergreifen.
1. Selbsttest (Easy Checks)
Schneller Überblick durch kostenfreie Browser-Plugins oder Tools wie
WAVE.
2. Automatisierte Tools
Lighthouse (Google Chrome DevTools) liefert dir einen „Accessibility Score“.
3. BITV-/WCAG-Tests
Offizielle Prüfung durch zertifizierte Stellen (z. B.
BITV-Test).
4. Manuelle Tests
Navigiere deine Seite nur mit der Tastatur und prüfe Fokuszustände.
Teste mit Screenreadern (NVDA, JAWS) für eine realistische Nutzererfahrung.
Die folgenden Tools unterstützen dich dabei, Barrieren gezielt zu erkennen und zu beseitigen:
KI-gestützte Prüfung des Shops.
Accessibility-Widget für Nutzeranpassungen.
Speziell für Shopify entwickelt.
Dashboard zur Verwaltung aller Anpassungen.
KI-generierte Alt-Texte.
Anpassbares Barrierefreiheits-Widget (Kontraste, Schriftgrößen etc.).
Unterstützung bei WCAG- und EAA-Konformität.
Tipp: Diese Apps sind ein erster Schritt, können aber eine gründliche Prüfung und individuelle Anpassungen nicht vollständig ersetzen.
Wenn du deinen Shop besonders gründlich prüfen möchtest, helfen dir die folgenden Schritte und Tools weiter. Sie geben dir eine systematische Anleitung, um alle relevanten Barrierefreiheitsaspekte zu überprüfen:
Diese erweiterte Checkliste sorgt für ein fundiertes Vorgehen: Erst automatisierte Scans, dann manuelle Prüfungen (Tabbing, Screenreader, Zoom etc.). Zum Schluss kann eine zertifizierte Prüfung (z. B. BITV-Test) weitere Sicherheit bieten.
Sende uns eine Nachricht und sicher dir ein persönliches Beratungsgespräch – inklusive Website-Check!
Eindeutige Beschriftungen, z. B. „Vorname (Pflichtfeld)“. Fehlermeldungen, die nicht nur farblich, sondern auch textlich gekennzeichnet sind. Nutzung von ARIA-Attributen wie aria-required="true". Autocomplete-Funktionen (z. B. autocomplete="email") und alternative Kontaktmöglichkeiten.
Barrierefreiheit führt zu klaren Überschriftenstrukturen, validem HTML-Code und Alt-Tags, was Google positiv bewertet. Mobile Optimierung und hohe Ladegeschwindigkeit werden ebenfalls begünstigt.
ARIA (Accessible Rich Internet Applications) ergänzt HTML, um z. B. Zustände von Elementen oder Rollen für Screenreader zu beschreiben (aria-live, aria-label, aria-hidden usw.). Hilfreich für dynamische oder interaktive Inhalte, um diese für assistive Technologien zugänglich zu machen.
Automatisch startende Inhalte sollten pausier- oder überspringbar sein. Blinkende Inhalte vermeiden, da sie für manche Nutzer:innen überfordernd oder sogar gefährlich sein können (Stichwort Epilepsie).
Websites, Onlineshops & Apps, Software & Downloads (z. B. PDF-Dokumente), E-Books, Interaktive Formulare, Multimedia-Inhalte (Video, Audio, Podcasts).
Barrierefreiheit ist kein Nice-to-have, sondern ab 2025 Pflicht. Für Shopify-Händler:innen ist die rechtzeitige Umsetzung entscheidend, um rechtliche Risiken zu vermeiden und wirtschaftliche Chancen zu nutzen. Dank klarer Richtlinien (WCAG 2.1 AA) und hilfreicher Tools (Accessibly, EqualWeb, All in One Accessibility etc.) lassen sich viele Maßnahmen schrittweise umsetzen.
Hinweis: Dieser Artikel stellt keine rechtliche Beratung dar. Für verbindliche Auskünfte wende dich bitte an einen qualifizierten Rechtsberater.
Ab 28. Juni 2025 müssen Shopify-Shops laut BFSG barrierefrei sein. Das bedeutet: zugängliches Design für alle, inkl. Screenreader-Kompatibilität, Tastaturbedienung, klare Strukturen und Kontraste. Tools wie WAVE, Lighthouse & Accessibly helfen bei der Umsetzung. Barrierefreiheit verbessert zugleich SEO und Reichweite.
Fehlende Hausnummern im Shopify-Checkout führen oft zu Retouren, Supportaufwand und Mehrkosten. Die App AddressHero verhindert dies: In der kostenlosen Version blockiert sie Bestellungen ohne Hausnummer, die Pro-Version prüft Adressen nach dem Kauf und fordert ggf. zur Korrektur auf – ganz ohne Einfluss auf die Conversion Rate.
Mit Shopify kannst du gezielt Rabatte einsetzen, um Umsätze zu steigern: Ob feste Beträge auf Produkte oder Bestellungen, „Kaufe X, erhalte Y“-Aktionen oder Gratisversand – jede Rabattart lässt sich per Code oder automatisch aktivieren. So erreichst du Neukunden, bindest Bestandskunden und gestaltest deinen Shop noch attraktiver.
Lass uns gemeinsam dein digitales Potenzial entfalten und deine Online-Präsenz zukunftssicher machen. Kontaktiere uns noch heute und wir schauen uns deinen individuellen Fall gemeinsam an.
