Zum Inhalt springen
Pandus
de Sprache ändern
Menü

Shopify und WooCommerce: Barrierefreiheit nach BFSG prüfen und gezielt beheben

· Lesezeit: 4 Min.

Ob Shopify oder WooCommerce: Die meisten Barrieren in einem Online-Shop stammen aus vier Quellen – dem Theme, zusätzlichen Apps und Plugins, den Inhalten wie Produktbildern und Texten sowie eigenem Code. Wer weiß, aus welcher Quelle ein Fehler kommt, behebt ihn an der richtigen Stelle und oft gleich für tausende Seiten. Dieser Beitrag zeigt, was Sie in jedem Bereich prüfen sollten.

Gilt das BFSG überhaupt für Sie? Wenn Sie an Verbraucher verkaufen und kein Kleinstunternehmen sind (10 oder mehr Beschäftigte, oder sowohl Jahresumsatz als auch Jahresbilanzsumme über 2 Millionen Euro), dann ja. Details im Leitfaden Wer ist betroffen?.

Warum das Shopsystem allein nicht reicht

Shopify und WooCommerce sind Plattformen. Was Ihre Kundinnen und Kunden tatsächlich sehen und bedienen, entsteht aus dem Zusammenspiel von Plattform, Theme, Erweiterungen und Ihren Inhalten. Ein Theme, das in der Demo ordentlich aussieht, kann durch eine Bewertungs-App, ein Cookie-Banner oder ein selbst gebautes Mega-Menü neue Barrieren bekommen. Deshalb hilft nur, den eigenen Shop so zu prüfen, wie er live ist.

Quelle 1: das Theme

Das Theme bestimmt die Templates für Kategorie, Produkt, Warenkorb und oft auch Teile der Kasse. Fehler im Theme wiederholen sich auf jeder Seite des gleichen Typs.

Prüfen Sie:

  • Kontraste: Grauer Text auf weißem Grund, helle Preise, dezente Platzhalter in Formularfeldern. Normaler Text braucht mindestens ein Kontrastverhältnis von 4,5 : 1. Werte rechnen Sie mit unserem Kontrastrechner nach.
  • Navigation: Lässt sich das Menü mit der Tastatur öffnen und durchlaufen? Ist der Fokus sichtbar?
  • Icon-Buttons: Warenkorb, Suche, Merkliste und Menü sind oft nur Symbole. Ohne zugänglichen Namen weiß ein Screenreader nicht, was der Button tut.
  • Bildergalerien und Slider: Lassen sie sich per Tastatur bedienen und anhalten?
  • Größe der Bedienelemente: WCAG 2.2 verlangt für Klickziele grundsätzlich mindestens 24 × 24 CSS-Pixel oder ausreichend Abstand (Kriterium 2.5.8).

Viele Theme-Einstellungen wie Farben lassen sich ohne Code ändern. Für tiefere Eingriffe brauchen Sie die Theme-Entwicklung oder eine Agentur.

Quelle 2: Apps und Plugins

Erweiterungen bringen eigenes HTML, eigene Pop-ups und eigene Formulare mit. Typische Kandidaten sind Bewertungs-Widgets, Newsletter-Pop-ups, Chat-Fenster, Produktfilter, Größenberater und Cookie-Banner.

Prüfen Sie:

  • Pop-ups: Bekommen sie den Fokus, lassen sie sich mit der Escape-Taste oder einem beschrifteten Button schließen?
  • Formulare der Erweiterung: Hat jedes Feld eine sichtbare Beschriftung?
  • Cookie-Banner: Ist es per Tastatur bedienbar, und verdeckt es nicht den fokussierten Inhalt?

Liegt der Fehler in einer Erweiterung, können Sie ihn oft nicht selbst beheben. Melden Sie ihn dem Anbieter, suchen Sie eine Alternative oder prüfen Sie, ob Sie die Erweiterung wirklich brauchen. Vorsicht bei „Barrierefreiheits-Apps“, die ein Overlay einblenden: Sie ändern den Code Ihres Shops nicht. Warum, erklärt Overlays sind keine Lösung.

Quelle 3: Ihre Inhalte

Inhalte pflegt meist das Team selbst – und hier entstehen viele Fehler ganz nebenbei:

  • Alternativtexte für Produktbilder: Fehlen sie, hört ein blinder Kunde nur den Dateinamen oder gar nichts. Ein guter Alternativtext beschreibt, was auf dem Bild zu sehen ist, etwa Farbe und Ansicht des Produkts.
  • Text in Bildern: Rabatt-Banner, auf denen Bedingungen nur als Grafik stehen, sind für Screenreader unsichtbar.
  • Überschriften: Produktbeschreibungen mit fett gesetzten Zeilen statt echter Überschriften erschweren die Orientierung.
  • Linktexte: „Hier klicken“ sagt nichts darüber, wohin der Link führt.
  • Größentabellen und Versandinfos: als echte Tabelle oder Text, nicht als Bild.

Inhaltsfehler beheben Sie direkt in der Produktverwaltung. Für WooCommerce zeigt unser WordPress-Plugin die Probleme direkt neben jeder Seite und jedem Produkt und schlägt Alternativtexte vor.

Quelle 4: eigener Code

Individuelle Anpassungen – ein eigenes Menü, ein Konfigurator, ein angepasster Checkout-Schritt – sind häufig die Stellen mit den schwersten Barrieren, weil sie nie gegen Barrierefreiheitskriterien getestet wurden. Klassiker:

  • klickbare div-Elemente statt echter Buttons, die per Tastatur nicht erreichbar sind,
  • eigene Auswahlfelder für Varianten ohne zugängliche Namen und Zustände,
  • Fehlermeldungen, die nur farblich markiert sind.

Hier hilft nur die Entwicklung. Geben Sie ihr die betroffenen Elemente mit Selektor und Kriterium mit – unser Bericht liefert dafür einen Anhang für Entwickler.

Template statt Einzelseite denken

Ein Shop mit 5.000 Produkten hat nicht 5.000 verschiedene Fehler, sondern meist eine Handvoll Templates mit Fehlern. Sortieren Sie die Ergebnisse einer Prüfung deshalb nach Template:

  1. Kasse und Warenkorb zuerst, weil hier der Kauf scheitert.
  2. Produkt-Template, weil es die meisten Seiten erzeugt.
  3. Kategorie mit Filtern und die Suche.
  4. Header und Footer, die auf jeder Seite stehen.
  5. Alles andere.

Ein korrigiertes Produkt-Template behebt den Fehler auf allen Produktseiten zugleich. Die wichtigsten Kriterien fasst die WCAG-2.2-Checkliste zusammen.

So gehen Sie konkret vor

  1. Eine Seite je Template auswählen: Kategorie, Produkt, Warenkorb, Kasse, Kundenkonto.
  2. Automatisiert prüfen, etwa mit unserer kostenlosen Prüfung für eine Seite oder dem Express-Bericht für mehrere Seiten.
  3. Jeden Fehler einer Quelle zuordnen: Theme, Erweiterung, Inhalt oder eigener Code.
  4. Beheben, dann manuell nachtesten: einmal mit der Tastatur bis zur Zahlungsauswahl, einmal mit Screenreader.
  5. Nach jedem Update erneut prüfen, am besten automatisch und wöchentlich.

Unsere Prüfung ist eine automatisierte Prüfung nach WCAG 2.2 AA, kein vollständiges Audit, und keine Rechtsberatung. Die Berichte enthalten Anleitungen für Shopify, WooCommerce, PrestaShop und Shoptet. Welche Schritte das BFSG insgesamt verlangt, zeigt der Beitrag BFSG: Was Online-Shops jetzt tun müssen.

Quellen

Weitere Artikel