1Woher kommen die Barrieren?
Theme: Viele Shops bauen auf der Shopware-Storefront auf und passen sie in einem eigenen Theme an. Was das eigene Theme überschreibt, kann Barrieren mitbringen. Erweiterungen: Plugins und Apps aus dem Shopware Store bringen eigenen Code mit, etwa für Slider, Filter oder Cookie-Hinweise. Inhalte: Bilder in den Medien sowie Texte und Überschriften in den Erlebniswelten 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 Shopware
Inhalte, dann Medien, dann Bild auswählen, dann Feld „Alt-Text“ in der Seitenleiste ausfüllen
Gilt auch für Produktbilder. 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 Shopware
Häufig Newsletter- oder Suchfelder. Im eigenen Theme die Twig-Vorlage des Formulars überschreiben und ein <label> ergänzen (ggf. mit 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 Shopware
Meist Icon-Buttons (Suche, Menü, Merkzettel). Im eigenen Theme die betreffende Twig-Vorlage überschreiben und ein aria-label ergänzen. 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 Shopware
Inhalte, dann Themes, dann Ihr Theme, dann Farben
Primär-, Text- und Hintergrundfarben anpassen. Farben in Erlebniswelten separat prüfen. 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 Shopware
Meist Icon-Links in Header und Footer. Im eigenen Theme die Twig-Vorlage (z. B. layout/header/header.html.twig) überschreiben und ein aria-label 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 Shopware
In Inhalte → Erlebniswelten bei Text-Elementen die Überschriften-Ebene im Editor prüfen; feste Ebenen im eigenen Theme (Twig) anpassen. Ratgeber: Überschriften richtig gliedern
3Was können Sie selbst beheben?
Ohne Programmierkenntnisse: Alt-Texte in den Medien, Farben im Theme, Überschriften und Texte in den Erlebniswelten und Meta-Titel im Reiter SEO. Mit Unterstützung: Icon-Buttons, Beschriftungen und Seitenbereiche in den Twig-Vorlagen des eigenen Themes. Bei Problemen in Erweiterungen hilft eine Anfrage beim Anbieter.
4Was ein automatischer Test hier nicht findet
Landet der Fokus im Warenkorb, wenn er sich öffnet – und wieder auf der Seite, wenn er sich schließt? Sehen Sie jederzeit, wo der Fokus gerade steht? Werden Fehlermeldungen im Formular vorgelesen, wenn Sie etwas vergessen haben? Beschreiben die Alt-Texte das, was auf dem Bild zu sehen ist?
5Häufige Fragen
Gibt es eine Erweiterung, die das löst?
Muss ich mein Theme neu bauen lassen?
Erkennt BarriereCheck, dass mein Shop Shopware nutzt?
Quellen
- Shopware: Barrierefreiheit in der Storefront (englisch)
- Shopware: Digitale Barrierefreiheit im E-Commerce
- WCAG 2.1 – Kurzreferenz des W3C (englisch)
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.