Shopware Barrierefreiheit: Guide & WCAG-Checkliste

Barrierefreiheit ist seit dem 28. Juni 2025 für die meisten Onlineshops gesetzlich Pflicht. Diese Seite vereint beides: den Strategie-Guide, der dir Grundlagen, Gesetzeslage (BFSG) und den Fahrplan erklärt, und die ausführliche WCAG-2.1-Checkliste mit priorisierten Prüfpunkten, die du selbst im Shopware-Admin oder über empfohlene Plugins abarbeitest.

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.

Warum Barrierefreiheit ein Wettbewerbsvorteil ist

Ein barrierefreier Shop ist schneller, klarer und leichter bedienbar. Das verbessert deine Sichtbarkeit, steigert die Conversion und senkt Supportaufwand. Besucher mit Seh- oder Hörbeeinträchtigung profitieren unmittelbar. Ältere Menschen, mobile Nutzer mit kleinen Displays oder Kunden in hektischer Umgebung ebenso.

• Mehr Reichweite. Sauberer Code wird von Google besser verstanden. Du steigst im Ranking.
• Schnellere Ladezeiten. Schlanke Technik reduziert Wartezeiten und Absprungraten.
• Höhere Conversion. Klare Kontraste, sichtbare Fokusmarkierung und einfache Navigation führen Nutzer sicher zum Checkout.
• Stärkeres Markenimage. Du zeigst Verantwortung und erreichst neue Zielgruppen.

Was das Gesetz verlangt und wen es betrifft

Das Barrierefreiheitsstärkungsgesetz (BFSG) überträgt die Anforderungen der WCAG 2.1 AA auf den deutschen E-Commerce. Es gilt für Shops, die Produkte oder Dienstleistungen an Verbraucher verkaufen. Kleinstunternehmen und reine B2B-Shops können befreit sein. Prüfe daher deine Lage. Selbst bei Ausnahmen bietet Barrierefreiheit klare Vorteile für SEO und Usability. Die vier WCAG-Grundprinzipien (wahrnehmbar, bedienbar, verständlich, robust) findest du gleich zu Beginn von Teil 2.

Barrierefreiheit entsteht in drei Ebenen

Dein Theme als solides Fundament

Mit einem modernen Shopware-Theme wie ThemeWare bist du vielen Anforderungen einen Schritt voraus. Es liefert:

• Semantische HTML-Struktur. Hilft Screenreadern und Suchmaschinen.
• Tastaturbedienbare Navigation mit deutlich sichtbarem Fokus.
• Hohe Kontraste bei Text, Buttons und Formularen.
• Responsives Layout, das bei 200 Prozent Zoom nicht bricht.
• Regelmäßige Updates, damit du spätere WCAG-Änderungen automatisch bekommst.

Toolbar als Komfortschicht

Die kostenfreie Barrierefreiheit 1-Klick Toolbar ergänzt dein Theme. Nutzer können Kontraste erhöhen, Schriftgrößen anpassen oder Bilder ausblenden. Die Einstellungen werden lokal gespeichert. So bleibt der Shop performant und DSGVO-konform.

Eigene Inhalte gezielt optimieren

Die Technik hilft dir nur, wenn deine Inhalte klar und zugänglich sind. Beachte diese Punkte:

• Bilder. Nutze kurze Alt-Texte. Beschreibe das Wesentliche ohne Keyword-Spam.
• Videos. Füge Untertitel hinzu. Ein Transkript hilft zusätzlich.
• PDFs. Exportiere sie als barrierefreie PDF/UA. Verwende Tags und klare Lesereihenfolge.
• Überschriften. Eine H1 pro Seite. Danach H2, dann H3.
• Sprache. Verwende kurze Sätze und vermeide unnötige Fremdwörter.
• Kontrast. Prüfe Textfarbe und Hintergrund mit einem Tool wie dem WCAG Color Contrast Checker.

Tipp: Erstelle einen internen Styleguide. So behalten alle Teammitglieder dieselben Standards im Blick.

Fünf schnelle Schritte zum Einstieg

1. Starte WAVE auf deiner Startseite und notiere die größten Fehler.
2. Ergänze Alt-Texte für die wichtigsten Bilder.
3. Ersetze deine häufigste PDF-Datei durch eine barrierefreie Version.
4. Gehe einmal nur mit der Tab-Taste durch den Checkout.
5. Erstelle deine öffentliche Erklärung mit unserem Barrierefreiheitserklärung-Muster.

Navigation & Seitenstruktur

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

• Kritisch Alle Menüpunkte sind mit Tab und Enter erreichbar
• Kritisch Es ist jederzeit klar erkennbar, welches Element gerade fokussiert ist
• Hoch Ein Skip-Link erlaubt es, die Navigation zu überspringen und direkt zum Hauptinhalt zu springen
• Mittel Breadcrumbs zeigen die Seitenposition und sind technisch korrekt ausgezeichnet

Was oft Probleme macht

• Die Navigation funktioniert nur mit der Maus
• Der Fokus ist unsichtbar, weil er per CSS entfernt wurde
• Ein Skip-Link fehlt komplett oder funktioniert nicht, weil die Ziel-ID nicht vergeben wurde
• Breadcrumbs sehen gut aus, helfen aber technisch nicht weiter, weil sie nicht als Navigation markiert sind

Das kannst du selbst tun

• Teste die Tastaturnavigation: Drücke mehrfach die Tab-Taste. Achte darauf, ob du alle Menüpunkte erreichst. Auch die Untermenüs.
• Mach den Fokus sichtbar: Geh ins Theme und prüfe die Fokus-Styles. Entferne alles, was den Fokus unsichtbar macht. Zum Beispiel outline: none.
• Nutze die 1-Klick Toolbar: Mit dem kostenlosen Plugin kannst du schnell erkennen, ob Fokusrahmen fehlen oder Tastaturfunktionen eingeschränkt sind. Es hilft dir beim Prüfen, ersetzt aber keine echte Lösung.
  Link zum Plugin: store.shopware.com
• Nutze Breadcrumbs richtig: Verwende das passende CMS-Element.

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

• Kritisch Alle Produktbilder haben einen aussagekräftigen Alternativtext
• Kritisch Varianten-Dropdowns und Farbfelder lassen sich mit der Tastatur bedienen
• Hoch Der „In den Warenkorb“-Button ist technisch eindeutig ausgezeichnet, zum Beispiel mit einem ARIA-Label
• Mittel Preise werden als Text angezeigt und sind nicht nur Teil eines Bildes

Was oft Probleme macht

• Produktbilder enthalten keinen Alt-Text oder nur automatische Dateinamen
• Farbfelder lassen sich nur mit der Maus klicken und reagieren nicht auf Tastatureingaben
• Der Warenkorb-Button hat kein aussagekräftiges ARIA-Label und wird von Screenreadern nicht korrekt erkannt
• Preise sind Teil eines Banners oder als Bild eingebunden und damit für viele Nutzer nicht lesbar

Das kannst du selbst tun

• Alt-Texte pflegen: Öffne den Medien-Manager und ergänze bei jedem Bild einen kurzen, beschreibenden Alternativtext. Zum Beispiel „Babybett in Weiß mit Matratze“ statt „image-123.jpg“.
• Button technisch korrekt beschreiben: Frage dein Team oder deine Agentur, ob der „In den Warenkorb“-Button ein ARIA-Label enthält. Es sollte z. B. lauten: aria-label="Produkt XYZ in den Warenkorb legen".
• Preise immer als Text darstellen: Verwende für Preise echte Textbausteine oder CMS-Textfelder. Achte darauf, dass sie nicht nur in Produktbildern oder Grafiken vorkommen.

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

• Kritisch Jedes Eingabefeld hat ein sichtbares Label
• Kritisch Fehlermeldungen erscheinen direkt am Feld und sind leicht verständlich
• Hoch Pflichtfelder sind klar gekennzeichnet und auch technisch mit aria-required versehen
• Mittel Bei Fehlern springt der Fokus automatisch zum betroffenen Feld

Was oft Probleme macht

• Label fehlen komplett oder stehen nur als Platzhalter im Feld
• Fehlermeldungen erscheinen zu spät oder nicht eindeutig zuordenbar
• Pflichtfelder werden optisch markiert, aber Screenreader erkennen sie nicht als Pflicht
• Der Fokus bleibt bei Fehlern irgendwo oben, statt auf das fehlerhafte Feld zu springen

Das kannst du selbst tun

• Labels aktivieren: Erstelle dein Formular in den Erlebniswelten oder im Formulareditor. Achte darauf, dass jedes Feld ein sichtbares Label hat – zum Beispiel „E-Mail-Adresse“ oder „Telefon“.
• Fehlermeldungen verständlich formulieren: Vermeide technische Begriffe. Nutze klare Sätze wie „Bitte gib deine E-Mail-Adresse ein“ oder „Dieses Feld darf nicht leer sein“.
• Fokusverhalten testen: Mach eine echte Testbestellung. Lass absichtlich ein Feld leer und beobachte, ob der Fokus automatisch auf das betroffene Feld springt. Wenn nicht, sollte das angepasst werden.
• Popups mit Formular prüfen: Öffne dein Newsletter-Modal oder andere Formularfenster. Teste, ob es sich per ESC schließen lässt und ob der Fokus danach zurückspringt. Falls nicht, sollte die Fokussteuerung angepasst werden – das ist besonders bei mobilen Nutzern und Tastatursteuerung wichtig.

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

• Kritisch Alle PDFs sind nach dem Standard PDF/UA getaggt und haben eine logische Lesereihenfolge
• Kritisch Videos bieten Untertitel und ein vollständiges Transkript
• Hoch Karussells oder Slider lassen sich jederzeit pausieren oder stoppen

Was oft Probleme macht

• PDFs werden aus Design-Tools exportiert, aber nicht als barrierefreie Dokumente gespeichert
• Videos sind nur eingebunden, ohne Untertitel oder zusätzliche Beschreibung
• Slider laufen automatisch durch und lassen sich nicht stoppen – weder per Maus noch Tastatur

Das kannst du selbst tun

• Barrierefreie PDFs erzeugen: Exportiere deine PDFs aus Programmen wie Word oder InDesign immer mit aktivierter PDF/UA-Option. Achte dabei auf Überschriftenstruktur, Lesereihenfolge und Alternativtexte. Lade anschließend die neue Version im Medien-Manager hoch.
• Videos mit Transkript ergänzen: Erstelle unter jedem Video in den Erlebniswelten einen zusätzlichen Textblock. Dort kannst du ein vollständiges Transkript bereitstellen. Das hilft nicht nur bei Barrierefreiheit, sondern auch beim SEO.
• Untertitel prüfen oder nachreichen: Nutze Plattformen wie YouTube, um automatische Untertitel zu generieren und manuell zu korrigieren. Bette das Video danach per iFrame mit aktivierten Untertiteln ein.
• Karussells steuerbar machen: Nutze im CMS das Karussell-Element mit aktivierter Pausen-Funktion. Achte darauf, dass der Pause-Button sichtbar und beschriftet ist.

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

• Kritisch Texte und Hintergrundfarben erreichen mindestens den Kontrastwert 4,5:1
• Mittel Linktexte sind klar erkennbar und nicht nur farblich hervorgehoben
• Niedrig Icons haben eine sichtbare Beschriftung oder einen erklärenden Tooltip

Was oft Probleme macht

• Text erscheint in zu hellen Farben auf weißem Hintergrund – zum Beispiel Hellgrau auf Weiß
• Links unterscheiden sich nur durch Farbe, haben aber keine Unterstreichung oder andere Hervorhebung
• Icons erklären sich nicht von selbst und haben weder Text noch Tooltip

Das kannst du selbst tun

• Farben testen: Nutze ein Online-Tool wie den WCAG Contrast Checker und prüfe deine Farbkombinationen. Achte dabei auf Fließtext, Buttons und Labels.
• Links besser kennzeichnen: Geh in die Erlebniswelten und formatiere Links zusätzlich mit einer Unterstreichung oder einem Symbol. Das hilft nicht nur bei Barrierefreiheit, sondern auch bei der allgemeinen Orientierung.
• Icons verständlich machen: Ergänze Icons im CMS mit kurzen Beschreibungen als Tooltip (z. B. mit dem title-Attribut). Alternativ kannst du auch eine kleine Textzeile darunter setzen.

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

• Kritisch Es gibt keine sogenannten „Keyboard-Traps“ – also Stellen, an denen der Fokus hängen bleibt
• Kritisch Modale Fenster (z. B. Newsletter-Popups) lassen sich mit der Escape-Taste schließen
• Hoch Die Reihenfolge beim Durchtabben folgt der sichtbaren Struktur

Was oft Probleme macht

• Der Fokus springt in Modalen nicht zurück oder bleibt komplett „gefangen“
• ESC schließt Popups nicht – Nutzer müssen mit der Maus klicken
• Die Tab-Reihenfolge ist wirr: Erst ein Button unten rechts, dann zurück zum Menü oben

Das kannst du selbst tun

• Tastaturtest machen: Geh auf deinen Shop, leg die Maus beiseite und nutze nur die Tabulatortaste. Beobachte, ob du alle Bereiche logisch und vollständig erreichst.
• ESC-Funktion testen: Öffne ein Popup oder ein modales Fenster – zum Beispiel den Newsletter-Layer oder ein Cookie-Banner. Drücke ESC. Wenn nichts passiert, sollte dein Entwickler nachbessern.
• Tab-Reihenfolge prüfen: Achte darauf, ob die Reihenfolge dem sichtbaren Aufbau der Seite entspricht. Falls du springen oder zurückspringen musst, liegt wahrscheinlich ein technischer Fehler vor.

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

• Kritisch Jede Seite hat genau eine einzige H1-Überschrift
• Hoch Überschriften folgen einer logischen Hierarchie – also H1, dann H2, dann H3
• Mittel Fachbegriffe und Abkürzungen werden erklärt oder vermieden

Was oft Probleme macht

• Mehrere H1-Überschriften auf einer Seite – etwa in CMS-Blöcken oder durch doppelte Titel
• Überschriften werden nur visuell formatiert, aber nicht korrekt ausgezeichnet (zum Beispiel als div statt als h2)
• Texte enthalten unverständliche Abkürzungen, technische Begriffe oder interne Fachsprache

Das kannst du selbst tun

• H1 richtig setzen: Verwende pro Seite nur eine einzige H1. Diese sollte das Hauptthema der Seite beschreiben – zum Beispiel „Babybetten im Überblick“ oder „So funktioniert der Versand“.
• Überschriften logisch strukturieren: Verwende in den Erlebniswelten gezielt H2 und H3 – nie einfach nur „fett“ oder „größer“. Nutze echte Überschriftenblöcke statt Textelemente.
• Fachbegriffe erklären: Ergänze in Texten bei schwierigen Begriffen eine kurze Erklärung in Klammern oder einen kleinen Zusatzsatz. Beispiel: „PDF/UA (barrierefreier PDF-Standard)“

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

• Kritisch Die Seite verwendet sinnvolle HTML-Strukturen wie <main>, <nav>, <footer>
• Hoch ARIA-Rollen werden gezielt und korrekt eingesetzt – nicht überall, sondern dort, wo sie nötig sind
• Mittel Dynamische Inhalte (z. B. der Warenkorb) nutzen sogenannte „Live-Regionen“ für Screenreader

Was oft Probleme macht

• Shopseiten bestehen nur aus allgemeinen <div>-Containern ohne klare Struktur
• ARIA-Rollen werden automatisch von Plugins gesetzt, aber nicht korrekt eingesetzt – zum Beispiel mehrfach oder widersprüchlich
• Statusänderungen wie „Artikel zum Warenkorb hinzugefügt“ sind für Screenreader nicht wahrnehmbar

Das kannst du selbst tun

• Hauptbereiche mit IDs versehen: Achte darauf, dass der zentrale Inhaltsbereich deiner Seite eine eindeutige ID trägt – zum Beispiel main-content. Das ist wichtig für Skip-Links und die Orientierung mit Screenreader.
• Technik nicht blind übernehmen: Wenn du mit Agenturen oder Plugins arbeitest, fordere eine saubere semantische Struktur ein. Lass prüfen, ob die wichtigsten Container korrekt als <main>, <header>, <nav> oder <footer> ausgezeichnet sind.
• Nur gezielte ARIA-Nutzung: ARIA ist kein Ersatz für gutes HTML. Es sollte nur dann eingesetzt werden, wenn es wirklich nötig ist – zum Beispiel für komplexe UI-Elemente wie Slider oder Tabs.

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

• Kritisch Eine Barrierefreiheitserklärung ist auf deiner Website verlinkt und aktuell
• Hoch Der Shop wird regelmäßig mit Tools wie WAVE oder axe geprüft
• Mittel Es gibt ein einfaches Feedback-Formular für Barriere-Hinweise

Was oft Probleme macht

• Die Erklärung ist veraltet oder fehlt komplett
• Technische Tests werden nur einmal gemacht, aber nicht regelmäßig wiederholt
• Besucher können Barrieren nicht melden – oder wissen gar nicht, dass sie dürfen

Das kannst du selbst tun

• Erklärung veröffentlichen: Nutze unsere Vorlage und binde sie im Footer ein. Achte darauf, dass sie erreichbar, verständlich und rechtlich aktuell ist. Zur Muster-Barrierefreiheitserklärung
• Feedback ermöglichen: Erstelle im Footer einen einfachen CMS-Block mit einem kurzen Text und einem Formularfeld – zum Beispiel: „Barriere entdeckt? Gib uns gern eine kurze Rückmeldung.“
• Tools wie WAVE nutzen: Mit diesen kostenlosen Browser-Tools kannst du einzelne Seiten auf häufige Fehler prüfen. Gerade für kleinere Shops mit wenigen Templates ist das ein guter Einstieg.

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 seit 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 spezialisierter Partner.

Starke Partner und exklusive Rabatte

Du möchtest schnelle Ergebnisse oder brauchst professionelle Begleitung?

• Trusted Shops. Rechtssicherheit mit eingebauter Barrierefreiheit. Whitepaper, Checkliste und Webinar inklusive. Exklusiver Gratismonat auf jedes Rechtspaket. Mehr erfahren
• IT-Recht Kanzlei. Generator für deine Pflichtseite. Zuverlässig und schnell. 10 % Rabatt auf das komplette Paket. Mehr erfahren

Häufige Fragen zur Shopware-Barrierefreiheit

Bereit für einen barrierefreien Shop?

Starte mit den fünf schnellen Schritten, arbeite die Checkliste ab und veröffentliche deine Barrierefreiheitserklärung. Du musst kein Entwickler sein — nur konsequent.

Mit 5 Schritten starten Zur Muster-Erklärung

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