Navigation

WCAG-Checkliste für Shopware-Shops

Barrierefreiheit ist ab dem 28. Juni 2025 für die meisten Onlineshops gesetzlich Pflicht. Mit dieser ausführlichen WCAG-Checkliste für Shopware findest du eine Schritt-für-Schritt-Anleitung, um alle relevanten Kriterien zu überprüfen und selbst im Shopware-Admin oder über empfohlene Plugins zu beheben. Jeder Punkt enthält praktische Hinweise, wie du fehlende Alt-Texte ergänzt, Formulare korrekt beschriftest oder Kontrastprobleme mit wenigen Klicks löst.

So stellst du sicher, dass dein Shop nicht nur den gesetzlichen Vorgaben entspricht, sondern auch für alle Besucher reibungslos nutzbar ist. Das spart spätere Kosten und stärkt dein SEO-Ranking.

Grundsätze der WCAG 2.1

Die WCAG folgen vier Prinzipien:

  • Wahrnehmbar – Inhalte müssen für Auge und Ohr verfügbar sein
  • Bedienbar – jede Funktion per Tastatur erreichbar
  • Verständlich – Informationen und Bedienung müssen klar sein
  • Robust – Inhalte mit aktuellen und künftigen Hilfstechnologien funktionieren

Mehr dazu unter w3.org/WAI/standards-guidelines/wcag

Legende Risikostufe

Nach Relevanz eingestuft:

  • Kritisch – gesetzlich erforderlich
  • Hoch – deutlicher Mehrwert für Nutzer
  • Mittel – wichtige Ergänzung
  • Niedrig – zusätzlicher Komfort

Die Navigation ist das Fundament deines Shops. Wenn sie nicht funktioniert, finden sich viele Nutzer nicht zurecht. Gerade Menschen, die keine Maus verwenden, sind auf eine gut erreichbare Struktur angewiesen. Dieser Abschnitt hilft dir dabei, genau das zu prüfen und zu verbessern. Ohne Programmierkenntnisse. Ohne Fachchinesisch. Einfach umsetzbar.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Warum das so wichtig ist

Viele Menschen surfen mit Tastatur, Touchscreen oder Screenreader. Wenn sie sich nicht durchklicken können oder der aktive Bereich nicht sichtbar ist, sind sie sofort raus. Das betrifft nicht nur eine kleine Randgruppe. Auch Google achtet auf diese Dinge. Eine barrierefreie Navigation hilft also allen: deinen Kunden, deinem Umsatz und deinem Ranking.

Fazit: Wenn deine Navigation nicht durchdacht ist, funktioniert der ganze Shop nicht richtig. Deshalb lohnt es sich, hier ganz genau hinzusehen. Teste selbst, beobachte kritisch und dokumentiere, was auffällt. Alles, was du nicht selbst lösen kannst, gib gezielt weiter – an deine Agentur, dein Team oder deinen Plugin-Anbieter.

Produkte & Warenkorb

Produktdarstellungen und der Warenkorb gehören zu den wichtigsten Bereichen deines Shops. Genau hier treffen Kunden Kaufentscheidungen. Damit alle Besucher den Shop nutzen können – auch mit Tastatur oder Screenreader – muss dieser Bereich barrierefrei funktionieren. Du kannst viele Dinge selbst prüfen und anpassen, ohne Entwickler zu sein.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Warum das so wichtig ist

Gerade im Produktbereich brechen viele Nutzer ab, wenn sie Funktionen nicht nutzen können. Ein fehlender Alt-Text oder ein unbedienbarer Button kann den Unterschied machen zwischen einem Kauf und einem Abbruch. Wenn ein Screenreader den Preis nicht erkennt oder der Button nicht anklickbar ist, hast du potenzielle Kunden verloren. Und zwar dauerhaft.

Barrierefreiheit bedeutet nicht, deinen Shop umzubauen. Es geht darum, sicherzustellen, dass alles lesbar, erreichbar und verständlich ist. Auch für Menschen mit anderen Geräten, Einschränkungen oder Nutzungsgewohnheiten.

Fazit: Achte darauf, dass deine Produkte nicht nur gut aussehen, sondern auch funktional zugänglich sind. Nimm dir Zeit für diesen Bereich. Denn genau hier entscheidet sich, ob dein Shop verkauft – oder verliert.

Formulare & Checkout

Kontaktformulare, Registrierungen und der Checkout sind entscheidend für deinen Umsatz. Wenn Nutzer hier nicht weiterkommen, weil Felder fehlen oder Rückmeldungen unklar sind, brechen sie ab. Besonders Menschen mit Screenreader oder Tastatursteuerung brauchen eine klare Struktur. Die gute Nachricht: Du kannst viele Dinge direkt selbst prüfen und anpassen.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Warum das so wichtig ist

Barrierefreiheit bedeutet nicht, dass du alles umkrempeln musst. Es geht darum, dass dein Shop auch in kritischen Momenten funktioniert. Wenn jemand ein Feld nicht versteht, keine Rückmeldung bekommt oder den Fehler nicht sieht, ist der Kauf vorbei. Und zwar sofort.

Ein gut beschriftetes Formular wirkt nicht nur professionell, es schafft auch Vertrauen. Du zeigst damit, dass du alle Nutzer ernst nimmst. Und ganz nebenbei sparst du dir Supportanfragen und Kaufabbrüche.

Fazit: Deine Formulare müssen klar, verständlich und technisch zugänglich sein. Prüfe sie Schritt für Schritt. Alles, was du nicht direkt selbst lösen kannst, lässt sich dokumentieren und weitergeben. Der Aufwand ist überschaubar, der Effekt dafür umso größer.

Medien & PDFs

Viele Shops setzen auf Bilder, Videos oder eingebundene PDFs. Doch genau hier entstehen oft Barrieren. Wenn Videos keine Untertitel haben oder ein PDF nicht strukturiert ist, sind wichtige Inhalte für viele Nutzer nicht zugänglich. Besonders Screenreader-Nutzer sind davon betroffen. Mit ein paar einfachen Maßnahmen kannst du das ändern.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Warum das so wichtig ist

PDFs und Videos enthalten oft zentrale Informationen – zum Beispiel Lieferbedingungen, Produktinfos oder Anleitungen. Wenn diese Inhalte nicht zugänglich sind, schließen sie ganze Zielgruppen aus. Ein nicht getaggtes PDF ist für Screenreader nutzlos. Ein Video ohne Untertitel erreicht viele Nutzer nicht.

Barrierefreiheit bei Medien ist mehr als eine Pflicht. Sie zeigt, dass dein Shop professionell ist und sich um Details kümmert. Und sie stärkt dein SEO, weil Texte aus Transkripten und PDFs indexiert werden können.

Fazit: Mach deine Medien verständlich, strukturiert und zugänglich. Nutze klare Dateien, ergänze Untertitel und sorge dafür, dass niemand ausgeschlossen wird. Du musst dafür kein Entwickler sein. Nur aufmerksam.

Farben & Kontrast

Farben sind nicht nur Design. Sie entscheiden darüber, ob Inhalte lesbar sind oder nicht. Gerade Menschen mit eingeschränktem Sehvermögen, Farbsehschwächen oder Blendempfindlichkeit sind auf klare Kontraste angewiesen. Auch für mobile Nutzer oder in heller Umgebung spielt das eine große Rolle. Die WCAG gibt hier ganz konkrete Mindestwerte vor. Du kannst diese Punkte leicht prüfen und anpassen.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Warum das so wichtig ist

Gute Kontraste sorgen für bessere Lesbarkeit, weniger Irritation und höhere Nutzerfreundlichkeit. Wenn Texte schwer zu erkennen sind, steigen die Absprungraten. Wenn Links nicht klar erkennbar sind, werden Inhalte nicht gefunden. Und wenn Icons keine Bedeutung vermitteln, entsteht Unsicherheit.

Barrierefreiheit im Design bedeutet nicht, auf Ästhetik zu verzichten. Im Gegenteil. Gut gemachte Kontraste und klare Elemente sehen nicht nur besser aus, sie wirken auch professioneller – und helfen dir dabei, mehr Nutzer zu erreichen.

Fazit: Prüfe deine Farben nicht nach Gefühl, sondern nach Wirkung. Sorge dafür, dass Texte klar lesbar sind und Links sofort erkannt werden. Schon kleine Anpassungen können hier einen großen Unterschied machen.

Tastaturbedienung

Ein barrierefreier Shop muss komplett mit der Tastatur nutzbar sein. Viele Nutzer verwenden keine Maus – zum Beispiel bei motorischen Einschränkungen oder weil sie mit Hilfstechnologien wie Screenreadern arbeiten. Auch im mobilen Kontext oder bei Laptop-Touchpads kann die Tastaturbedienung entscheidend sein. Deshalb ist sie ein Pflichtkriterium der WCAG.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Warum das so wichtig ist

Wenn Nutzer mit der Tastatur stecken bleiben oder Popups nicht schließen können, verlassen sie den Shop. Nicht weil sie nicht wollen – sondern weil sie nicht weiterkommen. Solche Barrieren sind unsichtbar für die meisten, aber ein echtes Ausschlusskriterium für viele.

Gleichzeitig ist die Tastaturnavigation ein starker UX-Indikator. Wenn hier alles sauber funktioniert, profitieren auch mobile Nutzer, Suchmaschinen und alle, die schnell durch Seiten navigieren möchten.

Fazit: Mach den Tab-Test. Beobachte die Reihenfolge. Schließe Popups mit ESC. Und wenn etwas nicht funktioniert, dokumentiere es. So schaffst du nicht nur Barrierefreiheit, sondern auch spürbare Nutzerfreundlichkeit.

Sprache & Inhalt

Eine klare Struktur hilft allen Nutzern – egal ob mit oder ohne Einschränkungen. Gerade Screenreader-Nutzer sind auf korrekt ausgezeichnete Überschriften angewiesen, um sich schnell auf einer Seite zu orientieren. Aber auch Menschen ohne Einschränkungen profitieren von guter Sprache, verständlichen Begriffen und logischem Aufbau. Dieser Bereich gehört deshalb zur Basis jeder barrierefreien Seite.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Warum das so wichtig ist

Gute Struktur ist keine Formsache, sondern Navigation. Screenreader-Nutzer springen gezielt von Überschrift zu Überschrift, um Seiten zu erfassen. Wenn die Hierarchie fehlt oder durcheinander ist, fehlt auch die Orientierung. Das wirkt unprofessionell und frustriert.

Auch inhaltlich gilt: Klarheit gewinnt. Verständliche Begriffe wirken vertrauensvoll. Komplizierte Sprache oder interne Kürzel führen dagegen zu Verwirrung – und manchmal zum Absprung.

Fazit: Mach Sprache sichtbar, logisch und verständlich. Strukturiere Inhalte so, wie du sie selbst gerne lesen würdest. Je klarer deine Sprache, desto besser funktioniert dein Shop – für alle Nutzer.

Technik & ARIA

Barrierefreiheit ist nicht nur eine Designfrage. Auch der technische Aufbau deiner Seite spielt eine große Rolle. Screenreader und andere Hilfstechnologien „verstehen“ Inhalte nur dann richtig, wenn HTML-Elemente sauber strukturiert sind. Genau hier kommt der semantische Aufbau ins Spiel – und bei komplexeren Komponenten auch ARIA-Attribute. Du musst das nicht alles selbst umsetzen, aber du solltest wissen, worauf es ankommt.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Warum das so wichtig ist

Semantisches HTML ist die Grundlage für barrierefreies Web. Es sorgt dafür, dass Screenreader Inhalte korrekt einordnen und durch die Seite navigieren können. Wenn diese Struktur fehlt, ist deine Seite zwar sichtbar, aber nicht verständlich – zumindest nicht für alle.

Falsch eingesetzte ARIA-Rollen richten sogar Schaden an. Sie können Informationen doppelt ausgeben, falsche Rollen vortäuschen oder Funktionen verstecken. Deshalb: lieber wenige, aber korrekt gesetzte ARIA-Attribute statt „sicher ist sicher“.

Fazit: Du musst kein Entwickler sein, um technisches Grundverständnis zu haben. Achte auf sinnvolle Strukturen, fordere sauberes HTML ein und stelle die richtigen Fragen an dein Team. Barrierefreiheit beginnt im Code – aber sie wirkt sich auf den ganzen Shop aus.

Monitoring & Erklärung

Barrierefreiheit ist keine einmalige Aufgabe. Sie muss dauerhaft mitgedacht und regelmäßig geprüft werden. Neue Seiten, Plugins oder Designänderungen können schnell neue Barrieren verursachen – oft ohne dass du es merkst. Deshalb ist es wichtig, eine Routine zu entwickeln oder ein zuverlässiges Monitoring-Tool zu nutzen.

Diese Punkte solltest du prüfen

Was oft Probleme macht

Das kannst du selbst tun

Unsere Empfehlung für zuverlässiges Monitoring

Wenn du viele Unterseiten, dynamische Inhalte oder regelmäßig neue Kampagnen hast, reicht eine manuelle Prüfung nicht aus. Hier empfehlen wir unseren Partner Eye-Able®:

Eye-Able® – Jetzt 30 Tage testen + 1 Monat kostenlos

Die smarte Lösung für dauerhafte Barrierefreiheit im Shop:

  • Automatische Prüfungen – Barrieren erkennen und effizient beheben
  • Handlungsempfehlungen statt komplizierter Analysen
  • Laufende Überwachung deines Shops – auch bei vielen Unterseiten
  • Rechtlich abgesichert: WCAG- und BITV-konform

Mehr erfahren und Angebot sichern

Warum das so wichtig ist

Barrierefreiheit ist ein laufender Prozess. Jede neue Seite, jede kleine Änderung am Theme oder jedes Plugin kann unbeabsichtigt neue Hürden schaffen. Wenn du nicht regelmäßig prüfst, verlierst du schnell den Überblick – und riskierst Abmahnungen oder verärgerte Besucher.

Gleichzeitig ist Monitoring ein starkes Signal: Du zeigst, dass du Verantwortung übernimmst. Für deine Nutzer. Für die Qualität deines Shops. Und für die Einhaltung der gesetzlichen Pflicht ab dem 28. Juni 2025.

Fazit: Ob mit eigenem Prozess oder professionellem Partner – sorge dafür, dass Barrierefreiheit in deinem Shop dauerhaft mitläuft. So bist du nicht nur rechtlich auf der sicheren Seite, sondern erreichst auch mehr Menschen. Jeden Tag.

Nächste Schritte

Barrierefreiheit klingt komplex – ist aber in vielen Bereichen einfacher, als du denkst. Wichtig ist, dass du jetzt anfängst. Schritt für Schritt. Du musst nicht alles auf einmal lösen. Aber du solltest wissen, wo du stehst und was zu tun ist.

Starte mit den Punkten, die als Kritisch eingestuft sind. Diese betreffen gesetzliche Vorgaben und haben die größte Wirkung auf Nutzbarkeit und rechtliche Sicherheit. Arbeite dich dann weiter durch die Hoch und Mittel priorisierten Themen. Viele Dinge kannst du selbst umsetzen oder an deine Agentur weitergeben.

Du musst kein Entwickler sein. Du musst nur hinschauen, testen, dokumentieren und konsequent verbessern.

Unsere Empfehlung: Nutze diese Checkliste regelmäßig. Als festen Bestandteil deiner Qualitätskontrolle. Oder als Briefing für neue Templates, Plugins oder Inhalte. Und wenn du sicherstellen willst, dass dein Shop auch bei Wachstum barrierefrei bleibt, dann nutze die Unterstützung von Partnern wie Eye-Able®.


Hinweis: Diese Checkliste ersetzt keine Rechtsberatung. Für verbindliche Auskünfte wende dich an eine Fachstelle oder einen spezialisierten Anwalt.