Shopify · BFSG

Shopify barrierefrei machen (BFSG): die häufigsten Fehler und ihre Lösung

Viele Shopify-Themes sind ordentlich gebaut, aber die typischen Lücken entstehen beim Einrichten: Bilder ohne Alt-Text, Symbol-Schaltflächen ohne Namen, eine fehlende Erklärung zur Barrierefreiheit.

1. Alt-Texte für Produktbilder

Produkte → Produkt öffnen → Medien → Bild anklicken → Alt-Text. Beschreibe, was man sieht und was für den Kauf zählt: „Merino-Socke in Dunkelblau, Größe 39–42“ statt „IMG_2231“.

2. Symbol-Schaltflächen benennen

Warenkorb, Suche, Menü und Konto sind oft nur Symbole. Ohne Namen sagt ein Screenreader nur „Schaltfläche“. Im Code-Editor (Onlineshop → Themes → Code bearbeiten) in der Header-Datei ergänzen:

<button class="header__icon--cart" aria-label="Warenkorb, {{ cart.item_count }} Artikel">
  {% render 'icon-cart' %}   <!-- im Icon-Snippet: aria-hidden="true" -->
</button>

3. Suchfeld beschriften

<label for="Search-In-Modal" class="visually-hidden">Im Shop suchen</label>
<input id="Search-In-Modal" type="search" placeholder="Suchen">

Viele Themes haben die Klasse visually-hidden schon eingebaut.

4. Erklärung zur Barrierefreiheit anlegen

Onlineshop → Seiten → neue Seite „Barrierefreiheit“, Text aus dem Generator einfügen, dann unter Navigation ins Footer-Menü hängen.

5. Apps prüfen

Bewertungs-Widgets, Chat-Fenster und Cookie-Banner von Drittanbietern bringen oft eigene Barrieren mit. Mit der Tastatur testen; beim Anbieter nach einer barrierefreien Variante fragen.

Häufige Fragen

Ist Shopify automatisch BFSG-konform?

Nein. Shopify und viele Themes bringen gute Grundlagen mit, doch Inhalte (Alt-Texte, Linktexte), Theme-Anpassungen, Apps und die Erklärung zur Barrierefreiheit liegen in der Verantwortung des Shop-Betreibers.

Wo trage ich in Shopify Alt-Texte ein?

Im Produkt unter Medien: Bild anklicken und „Alt-Text hinzufügen“. Für andere Dateien unter Inhalte → Dateien.