WCAG Prüfung Online-Shop: In 5 Schritten zur Barrierefreiheit für Shopware

Der Stichtag für den digitalen Handel rückt unaufhaltsam näher. Am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz in Kraft.

\n

Ab diesem Datum müssen verpflichtete Online-Shops im B2C-Bereich zwingend barrierefrei gestaltet sein. Auch B2B-Shops sind betroffen, sofern sie sich zusätzlich an Endverbraucher richten.

Wer jetzt abwartet, geht ein immenses strategisches und finanzielles Risiko ein. Eine frühzeitige Überprüfung der Barrierefreiheit im E-Commerce ist der einzige Weg, um rechtzeitig technische Mängel aufzudecken und den Shop gesetzeskonform umzubauen.

Viele Shopbetreiber fühlen sich von den komplexen Richtlinien überfordert. Dabei ist der Prozess mit der richtigen Struktur gut zu bewältigen.

In diesem Beitrag erfährst Du, wie Du eine fundierte WCAG Prüfung Online-Shop Schritt für Schritt aufbaust. Zudem erhältst Du eine praxiserprobte Checkliste, mit der Du selbst eine erste Einschätzung Deines Systems vornehmen kannst.

Die rechtlichen und technischen Grundlagen verstehen

Bevor Du in die Praxis einsteigst, musst Du die gesetzlichen Rahmenbedingungen kennen. Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die deutsche Umsetzung des European Accessibility Act (EAA).

Dieses Gesetz nimmt E-Commerce-Plattformen explizit in die Pflicht. Es gibt allerdings eine wichtige Ausnahme für sogenannte Kleinstunternehmen.

Unternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz oder einer Jahresbilanzsumme von höchstens zwei Millionen Euro sind von der Pflicht ausgenommen. Beide Bedingungen müssen gleichzeitig erfüllt sein, um von der Befreiung zu profitieren.

Fällt Dein Unternehmen nicht unter diese Ausnahme, führt an einer detaillierten Evaluierung Deines Systems auf Zugänglichkeit kein Weg vorbei. Die Einhaltung der gesetzlichen Vorgaben wird streng kontrolliert.

Bei Nichterfüllung nach dem 28. Juni 2025 drohen Bußgelder von bis zu 100.000 Euro. Marktüberwachungsbehörden können zudem die komplette Abschaltung des Shops anordnen.

Bitte beachte, dass dies den aktuellen gesetzlichen Stand darstellt. Bei rechtlichen Detailfragen oder spezifischen Fristen für Sonderfälle solltest Du vor der Umsetzung immer eine juristische Vorab-Prüfung durch eine Fachkanzlei durchführen lassen.

Die maßgeblichen Standards für Deine Prüfung

Maßgeblich für die technische Umsetzung in Europa ist die Norm EN 301 549. Diese europäische Norm verweist für Web-Inhalte direkt auf die Web Content Accessibility Guidelines, kurz WCAG.

Für Deine WCAG Prüfung Online-Shop ist die Konformitätsstufe AA der Version 2.1 entscheidend. Diese Version bildet die rechtliche Mindestanforderung für das BFSG.

Zwar wurde im Oktober 2023 bereits die neuere Version WCAG 2.2 veröffentlicht. Die rechtlich verbindliche Messlatte für den Sommer 2025 bleibt jedoch vorerst die Version 2.1 Level AA.

Eine vollständige Konformität erfordert die Erfüllung von exakt 50 sogenannten Erfolgskriterien. Diese Kriterien decken visuelle, auditive, motorische und kognitive Anforderungen ab.

Schritt 1: Die Vorbereitung der WCAG Prüfung Online-Shop

Der erste Schritt zu einem barrierefreien Shop ist eine schonungslose Bestandsaufnahme. Du musst genau wissen, aus welchen Bausteinen Dein E-Commerce-System besteht.

Dazu gehören nicht nur das Kernsystem wie Shopware, Magento oder Shopify, sondern sämtliche eingesetzten Plugins. Gerade Drittanbieter-Tools verursachen in der Praxis die meisten Barrierefreiheits-Fehler.

Es ist unmöglich und auch nicht nötig, im ersten Schritt jede einzelne Unterseite manuell zu testen. Eine effiziente und zielgerichtete Barrierefreiheits-Analyse basiert auf der Auswahl repräsentativer Seitentypen.

Du definierst ein Set an Seiten, die alle Funktionen und Layout-Templates Deines Shops abbilden. Fehlt hier eine wichtige Funktionsebene, verfälscht das Dein gesamtes Prüfergebnis.

Wähle zwingend die Startseite, eine komplexe Kategorieseite mit Filtern und eine Produktdetailseite mit Varianten aus. Auch statische Inhaltsseiten wie das Impressum oder Kontaktformulare gehören in das Test-Set.

Besonderes Augenmerk verdient der gesamte Weg zur Kasse. Wenn Nutzer mit Einschränkungen den Kauf nicht abschließen können, verlierst Du nicht nur Umsatz, sondern riskierst auch rechtliche Konsequenzen.

Teste daher den kompletten Prozess vom Warenkorb bis zur Bestellbestätigung. Weitere Informationen zur Optimierung dieses sensiblen Bereichs findest Du in unserem Ratgeber zum Shopware Checkout.

Schritt 2: Das automatisierte Basis-Testing

Sobald Deine Testseiten feststehen, beginnst Du mit der automatisierten Analyse. Dieser Teil der systematischen Überprüfung des Webshops ist schnell durchgeführt und liefert erste wichtige Anhaltspunkte.

Nutze etablierte Tools wie Google Lighthouse, WAVE oder aXe. Diese Programme scannen den Quellcode Deiner Seiten auf typische Syntax-Fehler und eindeutige Verstöße gegen die Richtlinien.

Automatisierte Tools finden verlässlich fehlende Alt-Attribute bei Bildern. Sie erkennen fehlerhafte HTML-Strukturen, doppelte IDs oder unzureichende Farbkontraste im Basis-CSS.

Viele Shopbetreiber glauben fälschlicherweise, dass ein fehlerfreier Tool-Report bereits Barrierefreiheit bedeutet. Das ist ein gefährlicher Irrtum, der im Ernstfall teuer wird.

Erfahrungsgemäß können Software-Scanner nur etwa 25 bis 30 Prozent der potenziellen WCAG-Fehler verlässlich erkennen. Die Tools verstehen keinen inhaltlichen Kontext und können die tatsächliche Bedienbarkeit nicht beurteilen.

Ein Tool sieht zwar, dass ein Alt-Text vorhanden ist. Es kann aber nicht bewerten, ob der Text „Bild 1“ das gezeigte Produkt für blinde Nutzer sinnvoll beschreibt.

Daher ist das automatisierte Testing nur das Vorspiel. Die eigentliche Arbeit einer professionellen WCAG Prüfung Online-Shop beginnt erst mit den manuellen Tests.

Schritt 3: Die manuelle Tiefenprüfung nach WCAG-Kriterien

Der Kern jeder seriösen Überprüfung ist der manuelle Testdurchlauf. Hier nimmst Du die Perspektive von Nutzern mit verschiedenen Einschränkungen ein.

Die wichtigste Disziplin ist der Tastatur-Check. Lege Deine Computermaus beiseite und versuche, Deinen gesamten Shop ausschließlich mit der Tabulator-Taste, der Enter-Taste und den Pfeiltasten zu bedienen.

Bei einem korrekten Audit der Web-Accessibility muss jeder Button, jeder Link und jedes Formularfeld erreichbar sein. Zudem muss jederzeit durch eine deutliche optische Markierung erkennbar sein, wo sich der Fokus gerade befindet.

Der zweite essenzielle manuelle Test ist der Screenreader-Check. Blinde und stark sehbehinderte Nutzer verwenden Software wie NVDA oder VoiceOver, die den Bildschirminhalt vorliest.

Aktiviere einen Screenreader und navigiere blind durch Deinen Shop. Werden die Produktbilder korrekt beschrieben? Werden Formularfelder sinnvoll angesagt?

Ein häufiges Problemfeld sind dynamische Änderungen auf der Website. Wenn ein Artikel in den Warenkorb gelegt wird, erscheint oft ein kleines Popup oder eine Erfolgsmeldung.

Ohne spezielle Code-Auszeichnungen, sogenannte ARIA-Live-Regions, bekommt der Screenreader-Nutzer von dieser Änderung nichts mit. Er weiß nicht, ob das Produkt erfolgreich in den Warenkorb gelegt wurde.

Der dritte wichtige Bereich des manuellen Barrierefreiheits-Tests ist der visuelle Check. Hier prüfst Du das Verhalten der Seite bei starker Vergrößerung.

Die Richtlinien fordern, dass sich eine Seite um 200 Prozent skalieren lässt, ohne dass Funktionen oder Inhalte verloren gehen. Texte dürfen sich nicht überlagern und Buttons müssen weiterhin klickbar bleiben.

Schritt 4: Typische Shopware-Stolperfallen beheben

Im deutschen Mittelstand und speziell bei Shopware-Projekten zeigen sich immer wieder die gleichen Hürden. Wer diese typischen Fehlerquellen kennt, kann seine Systemuntersuchung deutlich zielgerichteter durchführen.

Die größte Fehlerquelle sind Drittanbieter-Integrationen. Ein Shopware-System selbst kann technisch perfekt barrierefrei konfiguriert sein.

Sobald Du jedoch ein Cookie-Consent-Tool, einen Chatbot oder ein Payment-Gateway eines Drittherstellers einbindest, entstehen oft neue Barrieren. Viele dieser Widgets lassen sich nicht mit der Tastatur bedienen oder sperren den Fokus des Nutzers ein.

Wenn ein Nutzer das Cookie-Banner nicht per Tastatur schließen kann, ist der gesamte Shop für ihn unbenutzbar. Prüfe externe Scripte daher besonders kritisch.

Ein weiteres massives Problem im E-Commerce sind fehlende Stammdaten. Barrierefreiheit erfordert aussagekräftige Alt-Texte für alle informationstragenden Produktbilder.

Oft fehlen diese Texte schlichtweg, weil sie in den angebundenen ERP- oder PIM-Systemen historisch nie gepflegt wurden. Sie werden daher gar nicht erst an den Shop übergeben.

Hier zeigt sich, dass eine vollständige Untersuchung der Zugänglichkeit tief in die Unternehmensprozesse eingreift. Es geht nicht nur um Frontend-Code, sondern auch um die Qualität der Produktdatenpflege.

Auch die Hauptnavigation ist ein klassischer Schwachpunkt. Sogenannte Mega-Flyout-Menüs lassen sich oft nicht logisch per Tabulator-Taste durchlaufen und schließen.

Nutzer von Tastaturen verheddern sich in endlosen Unterkategorien, aus denen sie nicht mehr herauskommen. Hier sind oft maßgeschneiderte JavaScript-Lösungen gefragt, um die Fokus-Führung korrekt zu steuern.

Barrierefreiheit Shopware Kosten: Was kommt auf Betreiber zu?

Die wirtschaftliche Frage treibt viele Geschäftsführer im Mittelstand um. Die Barrierefreiheit Shopware Kosten variieren stark und hängen vom aktuellen Zustand des Systems ab.

Wenn Dein Shop stark individualisiert ist und viele veraltete Plugins nutzt, ist der Umbau aufwendig. Bei modernen, nah am Standard entwickelten Systemen ist der Aufwand überschaubarer.

Ein wesentlicher Faktor für die Barrierefreiheit Shopware Kosten ist die Vorbereitung. Wenn Du völlig blind eine Agentur beauftragst, zahlst Du viele Beratungsstunden für grundlegende Analysen.

Indem Du selbst einen ersten fundierten Audit nach aktuellen Zugänglichkeitsstandards durchführst, senkst Du die externen Ausgaben erheblich.

Du kannst offensichtliche inhaltliche Fehler, wie fehlende Alt-Texte oder schlechte Kontraste, bereits intern beheben lassen. Die Agentur konzentriert sich dann ausschließlich auf die komplexen technischen Baustellen wie ARIA-Labeling oder Tastatur-Fokus-Management.

Betrachte die Barrierefreiheit Shopware Kosten nicht als reine Compliance-Ausgabe. Ein barrierefreier Shop lädt schneller, bietet sauberen Code für Suchmaschinen und erschließt eine neue, kaufkräftige Zielgruppe.

Deine Checkliste: WCAG Prüfung Online-Shop zur Selbsteinschätzung

Damit Du sofort starten kannst, haben wir eine pragmatische Checkliste für Dich zusammengestellt. Diese Liste ersetzt kein vollständiges Audit, deckt aber die kritischsten Fehlerquellen ab.

Nutze diese Checkliste für Deine erste interne Evaluierung des eigenen Webshops auf Accessibility. Gehe die ausgewählten Testseiten systematisch durch und dokumentiere die Ergebnisse.

Kategorie 1: Visuelle Prüfung

• Sind die Kontraste von Texten zu Hintergrundfarben stark genug? (Gefordert: 4,5:1 für normalen Text, 3:1 für großen Text).
• Ist die Seite bei 200 Prozent Zoom im Browser noch vollständig nutzbar, ohne dass Texte abgeschnitten werden?
• Wird Farbe niemals als einziges Mittel zur Informationsvermittlung genutzt? (Fehlermeldungen müssen Text enthalten, nicht nur rote Rahmen).
• Können automatische Slider, Karussells oder Videos durch den Nutzer pausiert oder gestoppt werden?

Kategorie 2: Tastatur-Navigation

• Ist jedes interaktive Element (Links, Buttons, Formulare) mit der Tabulator-Taste erreichbar?
• Ist der aktuelle Fokus-Zustand jederzeit deutlich durch einen Rahmen oder eine Hintergrundfarbe erkennbar?
• Bleibt die Reihenfolge der Fokussierung logisch und vorhersehbar (meist von links nach rechts, von oben nach unten)?
• Lassen sich Dropdown-Menüs und Popups mit der Escape-Taste wieder schließen?
• Blockieren Drittanbieter-Tools (z. B. Cookie-Banner) nicht den Fokus der Tastatur?

Kategorie 3: Screenreader und Formulare

• Haben alle Bilder, die nicht reines Dekor sind, einen beschreibenden Alt-Text?
• Sind alle Formularfelder (z. B. in der Kasse oder bei der Registrierung) mit sichtbaren und programmatisch verknüpften Labels versehen?
• Werden dynamische Veränderungen (Artikel im Warenkorb, Filter-Updates) vom Screenreader angesagt?
• Gibt es bei fehlerhaften Formulareingaben klare Textmeldungen, die das Problem genau beschreiben und Lösungsvorschläge bieten?

Kategorie 4: Struktur und Code

• Gibt es auf jeder Seite genau eine H1-Überschrift, die den Inhalt korrekt beschreibt?
• Ist die Überschriftenhierarchie (H1, H2, H3) logisch und überspringt keine Ebenen?
• Ist die Hauptsprache der Website im HTML-Dokument korrekt definiert?
• Gibt es einen „Skip-Link“, mit dem Tastaturnutzer direkt zum Hauptinhalt springen können, ohne jedes Mal die Navigation durchlaufen zu müssen?

Wenn Du bei mehreren dieser Punkte unsicher bist oder Fehler feststellst, ist Handlungsbedarf geboten. Eine gründliche Untersuchung der Shop-Umgebung durch Fachexperten sollte dann der nächste Schritt sein.

Schritt 5: Dokumentation und Barrierefreiheitserklärung

Die Behebung technischer Fehler ist nur ein Teil der gesetzlichen Anforderungen. Das BFSG verlangt von Betreibern auch ein Höchstmaß an Transparenz.

Du bist verpflichtet, eine detaillierte Erklärung zur Barrierefreiheit auf Deinem Shop zu veröffentlichen. Diese muss leicht auffindbar sein, idealerweise im Footer neben dem Impressum.

In dieser Erklärung dokumentierst Du die Ergebnisse Deiner letzten WCAG Prüfung Online-Shop. Du musst ehrlich benennen, welche Bereiche aktuell noch nicht vollständig barrierefrei sind.

Zudem musst Du eine Kontaktmöglichkeit für Nutzer anbieten, die auf Barrieren stoßen. So können Betroffene Fehler melden, die Du in Deinen agilen Weiterentwicklungsprozess aufnimmst.

Barrierefreiheit ist kein Projekt mit einem fixen Enddatum. Jeder neue Content-Beitrag, jedes neue Plugin und jedes Update kann neue Barrieren verursachen.

Deshalb muss die Accessibility-Kontrolle fester Bestandteil Deiner Unternehmensprozesse werden. Eine regelmäßige, mindestens jährliche technische Kontrolle nach geltenden Richtlinien sichert die dauerhafte Compliance.

Schule Dein Content-Team darin, Alt-Texte zu schreiben und Überschriften korrekt zu setzen. Nur wenn alle Beteiligten das Thema verinnerlichen, bleibt Dein Shop langfristig zugänglich.

Omnichannel-Barrierefreiheit: Auch am POS relevant?

Viele B2B- und B2C-Händler betreiben nicht nur einen Online-Shop, sondern auch stationäre Verkaufsstellen oder Showrooms. Die digitale Transformation vernetzt diese Kanäle immer stärker.

Das BFSG betrifft nicht nur den klassischen Webbrowser. Auch Selbstbedienungsterminals, digitale Informationsbildschirme und bestimmte Kassensysteme fallen unter die Regulierungen des European Accessibility Act.

Wenn Du digitale Touchpoints vor Ort anbietest, müssen auch diese für Menschen mit Einschränkungen bedienbar sein. Eine isolierte Betrachtung des Webshops greift bei einer echten Omnichannel-Strategie oft zu kurz.

Es ist sinnvoll, die Barrierefreiheit als ganzheitliches Konzept für alle Kundeninteraktionen zu verstehen. Erfahre mehr darüber, wie Du Deine stationären Verkaufsprozesse modernisierst, in unserem Bereich für POS / Kassensystem.

Fazit: Die WCAG Prüfung Online-Shop als Wettbewerbsvorteil

Die Deadline im Juni 2025 sorgt im E-Commerce aktuell für viel Unruhe. Wer das Thema strategisch angeht, muss jedoch keine Panik vor Abmahnungen haben.

Eine strukturierte Analyse der E-Commerce-Zugänglichkeit schafft Klarheit über den aktuellen technischen Stand. Sie trennt echte Baustellen von unbegründeten Sorgen und bildet die Basis für einen effizienten Projektplan.

Branchenschätzungen gehen davon aus, dass über 70 Prozent der E-Commerce-Plattformen im deutschen Mittelstand aktuell noch erhebliche Mängel aufweisen. Die meisten Shops werden die Kriterien nach WCAG 2.1 Level AA nicht auf Anhieb erfüllen.

Wer jetzt handelt, investiert nicht nur in Rechtssicherheit. Ein barrierefreier Shop belohnt Dich mit einer besseren Code-Qualität, die Google mit besseren Rankings honoriert.

Zudem öffnest Du Deinen Shop für eine große Kundengruppe, die auf gut bedienbare Websites angewiesen ist. Eine konsequente Umsetzung der Richtlinien sorgt für eine bessere Usability für ausnahmslos alle Nutzer.

Nutze unsere Checkliste für den ersten Selbsttest. Führe Deinen internen Basis-Check anhand der Accessibility-Richtlinien durch, senke damit die anfänglichen Projektkosten und bereite Dein Unternehmen optimal auf die Zusammenarbeit mit spezialisierten Entwicklern vor.