1Woher kommen die Barrieren?
Theme: Farben, Überschriften, Menü und Fußzeile legt das Theme fest – bei vielen Shops Dawn oder ein anderes Theme aus dem Theme Store. Apps: Bewertungen, Pop-ups, Chat und Cookie-Banner kommen oft per App in den Shop und bringen eigenen Code mit. Inhalte: Produktbilder, Texte in Abschnitten und Seiten pflegen Sie selbst.
2Die häufigsten Probleme
Problem 1: Bilder ohne Alternativtext
WCAG 1.1.1 Nicht-Text-Inhalt · Stufe A
Kritisch Was ist das Problem?
Produkt-, Kategorie- oder Bannerbilder haben keinen Alt-Text – häufig nach einem Produktimport. Wen betrifft es?
Blinde und sehbehinderte Menschen mit Screenreader. Sie hören nur „Bild“ oder den Dateinamen. So beheben Sie es in Shopify
Produkte, dann Produkt öffnen, dann Bild in „Medien“ anklicken, dann Alt-Text hinzufügen
Bilder in Abschnitten: Inhalte → Dateien. Ratgeber: Alt-Texte für Produktbilder Problem 2: Formularfelder ohne Beschriftung
WCAG 4.1.2 Name, Rolle, Wert · Stufe A
Kritisch Was ist das Problem?
Suchfeld, Newsletter-Anmeldung oder Kontaktformular haben nur einen Platzhaltertext, aber keine echte Beschriftung. Wen betrifft es?
Screenreader-Nutzer wissen nicht, was sie eingeben sollen. Und sobald man tippt, verschwindet der Platzhalter für alle. So beheben Sie es in Shopify
Häufig Newsletter- oder Suchfelder. Im Theme-Code (z. B. sections/newsletter.liquid) ein <label> ergänzen; Dawn nutzt dafür die Klasse visually-hidden. Ratgeber: Formulare und Kasse per Tastatur Problem 3: Buttons ohne erkennbaren Namen
WCAG 4.1.2 Name, Rolle, Wert · Stufe A
Kritisch Was ist das Problem?
Icon-Buttons wie Suche, Menü, Warenkorb oder Slider-Pfeile haben keinen Text. Wen betrifft es?
Screenreader sagen nur „Schaltfläche“ an, ohne zu verraten, was sie tut. So beheben Sie es in Shopify
Meist Icon-Buttons (Suche, Menü, Warenkorb, Slider-Pfeile). Im Theme-Code unter sections/ bzw. snippets/ ein aria-label oder versteckten Text ergänzen; bei App-Elementen den App-Anbieter fragen. Ratgeber: Links und Buttons richtig benennen Problem 4: Text mit zu wenig Kontrast
WCAG 1.4.3 Kontrast (Minimum) · Stufe AA
Hoch Was ist das Problem?
Graue Preise, helle Buttons, Sale-Badges oder Links in der Fußzeile heben sich zu wenig vom Hintergrund ab. Wen betrifft es?
Menschen mit Sehschwäche, ältere Menschen und alle, die das Handy in der Sonne benutzen. So beheben Sie es in Shopify
Onlineshop, dann Themes, dann Anpassen, dann Theme-Einstellungen, dann Farben
Text- und Hintergrundfarben der Farbschemata anpassen. Ratgeber: Kontraste im Onlineshop Problem 5: Links ohne erkennbaren Namen
WCAG 2.4.4 Linkzweck (im Kontext) · Stufe A
Hoch Was ist das Problem?
Icon-Links in Kopf- und Fußzeile, etwa Social-Media-Symbole oder das Warenkorb-Icon, haben keinen Text. Wen betrifft es?
Screenreader lesen nur „Link“ vor, ohne Ziel. Wer per Sprachsteuerung bedient, kann den Link nicht ansprechen. So beheben Sie es in Shopify
Meist Icon-Links (Logo, Social Media, Warenkorb). Im Theme-Code (Code bearbeiten → sections/header.liquid bzw. footer.liquid) einen versteckten Text <span class="visually-hidden">…</span> ergänzen. Ratgeber: Links und Buttons richtig benennen Problem 6: Überschriften in falscher Reihenfolge
Best Practice
Mittel Was ist das Problem?
Überschriften überspringen Ebenen, etwa von H2 direkt zu H4, weil sie nach Optik statt nach Gliederung gewählt wurden. Wen betrifft es?
Screenreader-Nutzer, die sich über die Überschriften einen Überblick über die Seite verschaffen. So beheben Sie es in Shopify
Die Ebene (h1–h6) legt der Theme-Code fest, nicht der Editor. In sections/*.liquid die Überschriften-Tags so anpassen, dass keine Ebene übersprungen wird. Ratgeber: Überschriften richtig gliedern
3Was können Sie selbst beheben?
Ohne Programmierkenntnisse: Alt-Texte bei den Produktmedien, Farben in den Theme-Einstellungen und Seitentitel im Suchmaschinen-Listing. Mit Unterstützung: Icon-Buttons, Beschriftungen und Überschriften-Ebenen im Theme-Code (Liquid). Bei Problemen in Apps hilft eine Anfrage beim App-Anbieter.
4Was ein automatischer Test hier nicht findet
Lässt sich die Variante, etwa Größe oder Farbe, per Tastatur auswählen? Öffnet und schließt sich der Warenkorb, ohne dass der Fokus verloren geht? Lassen sich Pop-ups per Tastatur schließen? Beschreiben die Alt-Texte das, was auf dem Bild zu sehen ist?
5Häufige Fragen
Gibt es eine App, die das löst?
Kann BarriereCheck einen Shop mit Passwortschutz prüfen?
Erkennt BarriereCheck, dass mein Shop Shopify nutzt?
Quellen
Die Menüpfade beziehen sich auf die deutsche Oberfläche und die Standard-Themes. Eigene Themes, Apps und Plugins können abweichen.
Dieser Artikel gibt einen allgemeinen Überblick und ersetzt keine Rechtsberatung.
Weiterlesen
Alt-Texte für Produktbilder
Was ein guter Alt-Text beschreibt und wo Sie ihn in Ihrem Shopsystem eintragen.
Kontraste im Onlineshop
Welche Kontraste Schrift und Buttons mindestens brauchen und wie Sie Ihre Farben selbst prüfen.