Shopify · BFSG

Shopify Barrierefreiheit: die praktische BFSG-Checkliste

Den Checkout pflegt Shopify selbst, aber Theme, Apps und Inhalte liegen in Ihrer Verantwortung. Hier scheitern die meisten Shopify-Shops, und so beheben Sie jeden Punkt.

1. Alternativtexte für Produktbilder

Produkte → Produkt öffnen → auf jedes Medium klicken → „Alt-Text hinzufügen“. Beschreiben Sie, was für Käufer zählt: „Navyblauer Merino-Pullover mit Rundhals, Vorderansicht“. Kollektionsbilder und Banner stellen Sie im Theme-Editor im jeweiligen Block ein.

2. Farbkontraste

Onlineshop → Themes → Anpassen → Theme-Einstellungen → Farben. Ziel: 4,5:1 für Text, Buttons, Sale-Badges und Streichpreise. Hellgrauer Text und Pastell-Buttons mit weißer Schrift sind die häufigsten Ursachen.

3. Icon-Buttons ohne Namen

Warenkorb, Suche, Konto, Menü, Slider-Pfeile und Social-Links haben oft keinen Text. Fügen Sie im Code-Editor in Header- und Footer-Sections aria-label="Warenkorb" usw. zu diesen <a>- und <button>-Elementen hinzu.

4. Formularfelder ohne Beschriftung

Newsletter- und Suchfelder nutzen oft nur einen Platzhaltertext. Ergänzen Sie für jedes Feld ein <label class="visually-hidden">.

5. Apps und Pop-ups

Bewertungs-, Upsell- und Pop-up-Apps bringen eigenen Code mit. Prüfen Sie, ob sich Pop-ups mit Escape schließen lassen und der Fokus erhalten bleibt. Fällt eine App durch, fragen Sie den Anbieter nach einer barrierefreien Version oder ersetzen Sie sie.

6. Theme-Wahl

Aktuelle Online-Store-2.0-Themes aus dem Theme Store (etwa Dawn und darauf basierende Themes) bieten eine deutlich bessere Grundlage als alte oder stark angepasste Themes.

7. Erklärung zur Barrierefreiheit

Legen Sie unter Onlineshop → Seiten eine Seite mit Ihrer Erklärung an und verlinken Sie sie im Footer-Menü. Unser kostenloser Generator erstellt sie in zwei Minuten.