Ein nicht bedienbarer Variantenwähler, ein Checkout mit unklaren Fehlermeldungen oder ein Cookie-Banner, das den Tastaturfokus verschluckt: Genau an diesen Stellen verlieren Shops Umsatz und schaffen unnötige Risiken. Diese Checkliste Onlineshop Barrierefreiheit hilft dabei, die kritischen Punkte im Shop systematisch zu prüfen – vom Template über Produktdaten bis zu angebundenen Diensten.
Seit dem 28. Juni 2025 gelten mit dem Barrierefreiheitsstärkungsgesetz, kurz BFSG, für viele B2C-Onlineshops konkrete Anforderungen an die digitale Zugänglichkeit. Wer Waren oder Dienstleistungen an Verbraucher verkauft, sollte nicht darauf setzen, dass ein Standard-Theme oder ein Relaunch das Thema automatisch erledigt. Barrierefreiheit ist eine Aufgabe über mehrere Systeme hinweg: Frontend, Content, Checkout, Zahlungsanbieter, Suche, ERP-Daten und laufende Releases müssen zusammenpassen.
Was vor dem Prüfen geklärt werden muss
Nicht jeder Shop ist in gleichem Umfang betroffen. Entscheidend sind unter anderem Zielgruppe, Angebot und Unternehmensgröße. Für Kleinstunternehmen können unter bestimmten Voraussetzungen Ausnahmen gelten. Wer überwiegend B2B verkauft, muss genauer auf seinen tatsächlichen Kundenkreis schauen: Ein frei zugänglicher Shop mit Bestellmöglichkeit für Verbraucher wird nicht dadurch zum B2B-Shop, dass Preise erst nach Login sichtbar sind.
Diese Einordnung ersetzt keine Rechtsberatung. Sie verhindert aber den häufigsten Fehler in Projekten: Erst entwickeln, dann feststellen, dass Shop, App, Kundenportal oder digitale Services anders bewertet werden müssen. Dokumentieren Sie, welche Bereiche Sie prüfen, welche Anforderungen umgesetzt sind und wo externe Anbieter beteiligt sind. Das schafft eine belastbare Arbeitsgrundlage für Technik, Legal und Betrieb.
Checkliste für die Onlineshop-Barrierefreiheit
Die folgende Prüfung orientiert sich an typischen Schwachstellen in Shopware-, Shopify-, WooCommerce- und JTL-Shop-Projekten. Sie ist kein Ersatz für einen vollständigen Accessibility-Audit, zeigt aber zuverlässig, wo technische und redaktionelle Arbeit ansteht.
1. Navigation vollständig per Tastatur bedienen
Jede Kernfunktion muss ohne Maus erreichbar und bedienbar sein: Hauptnavigation, Suche, Filter, Varianten, Warenkorb, Login und Checkout. Testen Sie mit Tab, Shift + Tab, Enter, Leertaste und Escape. Der sichtbare Fokus darf nicht verschwinden oder hinter einem Sticky Header, Overlay oder Chat-Widget liegen.
Besondere Aufmerksamkeit verdienen Mega-Menüs und Filter. Viele individuelle Themes sehen sauber aus, erzeugen aber eine unlogische Tab-Reihenfolge oder lassen Nutzer in geöffneten Menüs festhängen. Das ist kein kosmetisches Detail, sondern ein Abbruchgrund vor dem Kauf.
2. Semantik vor reinem Design prüfen
Überschriften müssen eine nachvollziehbare Hierarchie haben. Buttons sind Buttons, Links sind Links, Formularfelder besitzen zugeordnete Labels. Ein klickbares `div`-Element mit JavaScript ist keine gleichwertige Alternative zu einem echten Bedienelement.
Screenreader benötigen diese technische Struktur, um Seiten verständlich anzukündigen. Auch Suchtreffer, Akkordeons, Modalfenster und Warenkorb-Updates brauchen korrekte Rollen und Zustände. Gerade bei Plugin-Kombinationen entstehen hier oft Konflikte, weil mehrere Erweiterungen dieselben Elemente manipulieren.
3. Kontraste und Informationen ohne Farbe absichern
Text, Icons, Buttons und Formularzustände müssen ausreichend kontrastreich sein. Prüfen Sie nicht nur die Markenfarben im Styleguide, sondern auch Hover-Zustände, deaktivierte Schaltflächen, Sale-Badges, Hinweise zur Lieferzeit und Fehlermeldungen.
Farbe darf nie die einzige Information sein. Wenn ein Pflichtfeld lediglich rot markiert wird, fehlt einem Teil der Nutzer der entscheidende Hinweis. Ergänzen Sie klare Texte, Symbole oder programmgesteuerte Fehlermeldungen. Das verbessert auch die Verständlichkeit auf kleinen Mobilgeräten und bei schwierigen Lichtverhältnissen.
4. Bilder, Grafiken und Produktmedien sinnvoll beschreiben
Produktbilder brauchen Alternativtexte, wenn sie relevante Informationen transportieren. Ein guter Alt-Text beschreibt nicht jede sichtbare Kleinigkeit, sondern den kaufrelevanten Inhalt: Produkttyp, Farbe, Variante oder besondere Eigenschaft. Rein dekorative Bilder sollten dagegen als dekorativ behandelt werden, damit Screenreader nicht mit unnötigen Ansagen überladen werden.
Bei Tabellen, Größenratgebern, technischen Zeichnungen und Infografiken reicht ein allgemeiner Alt-Text häufig nicht aus. Stellen Sie die Information zusätzlich als strukturierter Text oder Tabelle bereit. Bei Produktvideos sind Untertitel, verständliche Transkripte und bei relevanten Bildinformationen gegebenenfalls Audiodeskriptionen zu prüfen.
5. Produktseiten nicht nur visuell verständlich machen
Varianten müssen eindeutig benannt sein. Ein Farbswatch ohne Text oder programmatische Beschriftung ist für viele Nutzer nicht nutzbar. Gleiches gilt für Sterne-Bewertungen, Verfügbarkeitsanzeigen und Mengenwähler.
Preise, Grundpreise, Lieferinformationen und Aktionsbedingungen sollten im Text klar erfassbar sein. Versteckte Hinweise in Tooltips oder nur beim Hover sichtbare Inhalte sind im E-Commerce besonders problematisch. Was eine Kaufentscheidung beeinflusst, muss zuverlässig erreichbar sein.
6. Formulare und Checkout unter Realbedingungen testen
Der Checkout ist der wirtschaftlich wichtigste Testfall. Prüfen Sie Adresseingabe, Gastbestellung, Gutscheincode, Versandart, Zahlungsart, Zustimmung zu Bedingungen und Bestellabschluss. Fehlermeldungen müssen konkret erklären, welches Feld betroffen ist und wie der Fehler korrigiert wird.
Autovervollständigung, Eingabeformate und Pflichtfelder verdienen ebenfalls Aufmerksamkeit. Ein Feld mit der Beschriftung „PLZ/Ort“ spart vielleicht Platz, erhöht aber die Fehlerquote. Saubere Einzelfelder, verständliche Labels und korrekt hinterlegte Autocomplete-Attribute helfen Nutzern und senken Supportaufwand.
7. Cookie-Banner, Pop-ups und Overlays einbeziehen
Consent-Tools werden gern übersehen, obwohl sie vor dem Shop liegen. Das Banner muss fokussierbar sein, sich per Tastatur bedienen lassen und darf den Fokus nicht unkontrolliert in den Hintergrund springen lassen. Ablehnen, Speichern und detaillierte Einstellungen müssen verständlich erreichbar sein.
Dasselbe gilt für Newsletter-Pop-ups, Altersabfragen, Größenberater, Terminbuchungen und Chat-Widgets. Externe Tools bleiben Teil des Kundenerlebnisses. „Kommt vom Anbieter“ ist technisch keine Lösung, wenn der Checkout dadurch nicht zugänglich ist.
8. Suche, Filter und Sortierung verständlich aufbauen
Facettennavigation ist bei größeren Sortimenten geschäftskritisch und technisch anspruchsvoll. Nutzer müssen erkennen, welche Filter aktiv sind, wie sie entfernt werden und wie viele Ergebnisse verbleiben. Dynamische Aktualisierungen sollten auch für Screenreader angekündigt werden, ohne jede Interaktion mit unnötigen Meldungen zu überfrachten.
Testen Sie außerdem leere Suchergebnisse, Rechtschreibfehler und Filterkombinationen. Eine gute Suche führt nicht nur schneller zum Produkt, sondern verhindert, dass Nutzer wegen einer unverständlichen Oberfläche abspringen.
9. Responsive Nutzung und Zoom nicht vergessen
Ein Shop muss auch bei starkem Zoom und auf mobilen Geräten funktionieren. Inhalte dürfen nicht abgeschnitten werden, horizontales Scrollen sollte auf normalen Inhaltsseiten vermieden werden, und Touch-Ziele brauchen ausreichend Platz. Besonders anfällig sind Tabellen, Filterleisten, Sticky Cart-Buttons und Zahlungsarten im Checkout.
Hier zeigt sich ein klarer Zusammenhang zur Conversion-Optimierung: Was bei 200 Prozent Zoom unlesbar oder schwer klickbar ist, ist meist auch für mobile Käufer unnötig kompliziert.
10. Drittanbieter, Plugins und Schnittstellen prüfen
Zahlungsdienstleister, Bewertungswidgets, Produktempfehlungen, Doofinder-Suche, Versandtools und Marketing-Tags erweitern den Shop – und können ihn zugleich unzugänglich machen. Erfassen Sie alle eingebundenen Komponenten samt Verantwortlichen. Prüfen Sie nach Updates nicht nur, ob die Funktion lädt, sondern ob Fokusführung, Beschriftungen und Kontraste weiterhin stimmen.
Bei Shopware- oder WooCommerce-Projekten ist das besonders relevant, weil individuelle Plugins und Theme-Anpassungen häufig tief in Produktdetailseite und Checkout eingreifen. Eine saubere Schnittstellenarchitektur reduziert spätere Nacharbeiten.
11. Produktdaten und Prozesse als Teil der Lösung behandeln
Barrierefreiheit scheitert nicht nur im Code. Fehlende Alternativtexte, kryptische Variantenbezeichnungen oder unstrukturierte PDFs entstehen oft im PIM, ERP oder direkt in der Warenwirtschaft. Definieren Sie daher Pflichtfelder und Qualitätsregeln dort, wo Daten gepflegt werden.
Wenn JTL-WaWi, Odoo oder ein anderes ERP Produktinformationen an mehrere Kanäle ausspielt, sollten Beschreibungen, Medien und Dokumente nicht je Shop manuell korrigiert werden. Zentral gepflegte Daten reduzieren Fehler und halten Marktplätze, B2B-Portale und Shop konsistent.
12. Testen, dokumentieren und nach Releases wiederholen
Automatisierte Checks finden viele Grundlagenfehler schnell, etwa fehlende Labels oder Kontrastprobleme. Sie ersetzen jedoch keinen manuellen Test. Tastaturbedienung, sinnvolle Ansagen im Screenreader und verständliche Kaufprozesse lassen sich nicht vollständig automatisieren.
Planen Sie Tests deshalb in Ihren Release-Prozess ein: vor Livegang, nach Theme-Updates, nach neuen Plugins und nach Checkout-Änderungen. Halten Sie Befunde, Prioritäten, Verantwortlichkeiten und erledigte Maßnahmen fest. Kritische Blocker im Kaufprozess gehören vor optische Detailkorrekturen.
Wo die Checkliste an ihre Grenzen kommt
Eine Checkliste identifiziert wiederkehrende Risiken, beurteilt aber nicht jede Nutzungssituation. Ein technisch korrekt ausgezeichnetes Element kann trotzdem unverständlich formuliert sein. Umgekehrt kann eine visuell gelungene Seite bei Tastaturbedienung scheitern. Für komplexe Shops mit individuellen B2B-Logins, Konfiguratoren, Marktplatzanbindungen oder mehreren Storefronts lohnt sich ein strukturierter Audit mit echten Nutzungsszenarien.
Priorisieren Sie dabei nicht nach Bauchgefühl, sondern nach Reichweite und Umsatzwirkung: Startseite und Navigation zuerst, dann Suche, Produktdetailseiten, Warenkorb und Checkout. Anschließend folgen Kundenkonto, Servicebereiche und Kampagnen-Landingpages. Aventux betrachtet dabei nicht nur das Theme, sondern auch die Datenflüsse und Erweiterungen, die den Shop im Alltag wirklich steuern.
Barrierefreiheit ist keine einmalige Abnahme und kein Häkchen im Relaunch-Plan. Wer sie als festen Qualitätsstandard in Entwicklung, Content-Pflege und Release-Management verankert, reduziert Reibung für alle Käufer – und baut einen Shop, der bei Wachstum nicht an seinen eigenen Details scheitert.
