Barrierefreie Shop-Filter und Checkout: Praxischeck nach WCAG 2.2

Ein Onlineshop kann modern aussehen und trotzdem für viele Menschen schwer zu bedienen sein. Das merkt man oft nicht auf der Startseite, sondern beim Einkauf: Ein Filter lässt sich nur mit der Maus öffnen, die ausgewählte Produktvariante ist unklar oder eine Fehlermeldung im Checkout erklärt nicht, wie es weitergeht. Barrierefreiheit ist deshalb kein nachträgliches Design-Extra. Sie gehört zur Qualität eines funktionierenden Verkaufssystems. Dieser Leitfaden zeigt, wie Teams in Webasyst Shop-Script und anderen Shops die entscheidenden Kaufwege systematisch prüfen und verbessern können.

Mit einer konkreten Einkaufsaufgabe beginnen

Prüfen Sie zunächst eine vollständige Aufgabe und nicht nur einzelne Seiten: eine umfangreiche Kategorie öffnen, nach Eigenschaften filtern, eine Variante auswählen, den Artikel in den Warenkorb legen und eine Testbestellung abschließen. Verwenden Sie bewusst auch einen Artikel mit vielen Merkmalen, langen technischen Angaben oder mehreren verfügbaren Ausführungen. Wiederholen Sie diesen Ablauf ausschließlich mit der Tastatur. Danach prüfen Sie ihn auf einem kleinen Bildschirm und bei vergrößerter Darstellung. Falls möglich, ergänzen Sie einen Screenreader-Test.

Notieren Sie für jeden Fehler die konkrete URL, den Schritt, das erwartete Verhalten, die beobachtete Abweichung und das betroffene Gerät. Eine unbedienbare Filterauswahl ist ein größeres Problem als ein rein dekoratives Symbol ohne zusätzlichen Text. Berücksichtigen Sie auch die fachliche Richtigkeit: Ein bequem bedienbarer Variantenknopf hilft nicht, wenn er falsche Preise oder Lagerbestände ausgibt.

Filter so bauen, dass sie wirklich bedienbar sind

Technische Kataloge verwenden oft komplexe Filter. Problematisch wird es, wenn ein eigenes JavaScript-Steuerelement nur auf Hover reagiert oder die Trefferliste nach jeder Änderung unvorhersehbar neu lädt. Bevorzugen Sie echte Schaltflächen, Auswahlfelder und Checkboxen, wenn sie die Aufgabe erfüllen. Eine Filteroption sollte nicht nur über ein winziges Kästchen, sondern auch über ihre sichtbare Beschriftung aktivierbar sein. Eine klar erkennbare Funktion zum Zurücksetzen verhindert, dass Kunden in einer leeren Trefferliste stecken bleiben.

Nach einem dynamischen Update sollten Nutzer erfahren, dass sich die Trefferzahl verändert hat. Eine verständliche Statusmeldung kann diese Information auch für assistive Technik verfügbar machen. Vermeiden Sie es, den Tastaturfokus nach jeder Auswahl kommentarlos an den Seitenanfang zu versetzen. Testen Sie außerdem Situationen ohne Treffer und widersprüchliche Merkmale. Gerade bei Ersatzteilen ist eine gut bedienbare Oberfläche nur dann hilfreich, wenn die zugrunde liegenden Attribute korrekt zugeordnet sind.

Den Tastaturfokus sichtbar halten

Drücken Sie wiederholt die Tabulatortaste und verfolgen Sie den Fokus durch Menü, Suchfeld, Sortierung, Filter, Produktkarten und Warenkorb. Ist die aktuelle Position jederzeit erkennbar? Ein entferntes CSS-Outline oder ein überlagerndes Chatfenster kann die Orientierung zerstören. Die W3C-Erläuterung zu Focus Not Obscured in WCAG 2.2 beschreibt für Level AA, dass ein fokussiertes Bedienelement nicht vollständig durch vom Seitenbetreiber erzeugte Inhalte verdeckt sein darf.

Prüfen Sie den Zustand auch nach dem Öffnen eines mobilen Menüs oder Dialogfensters. Ein Modal benötigt eine nachvollziehbare Fokusführung und sollte den Fokus nach dem Schließen sinnvoll zurückgeben. Korrigieren Sie bei fixierten Kopfbereichen nötigenfalls Abstände zum Scrollziel. Eine künstlich festgelegte Tabulator-Reihenfolge ist dagegen oft nur eine kurzfristige Reparatur; die HTML-Struktur sollte der logischen Bedienreihenfolge folgen.

Auf dem Smartphone Fehlbedienungen reduzieren

Eng nebeneinanderliegende Mengenknöpfe, kleine Schließen-Symbole und winzige Seitenzahlen erschweren die Bedienung. Das W3C erläutert im Kriterium Target Size (Minimum) von WCAG 2.2 auf Level AA eine Mindestgröße von 24 × 24 CSS-Pixeln für Zeigerziele, mit genau beschriebenen Ausnahmen etwa bei ausreichenden Abständen. Diese Grenze ist kein allgemeines Idealmaß für gute mobile Bedienung. Häufig sind größere und klar getrennte Schaltflächen sinnvoll.

Prüfen Sie den tatsächlich klickbaren Bereich und nicht nur die sichtbare Grafik. Das gilt besonders für Filter-Chips, Varianten, Galerie-Pfeile und die Wahl des Versanddienstes. Testen Sie vergrößerte Darstellung und lange übersetzte Beschriftungen. Ein unabsichtlicher Tipp sollte sich leicht korrigieren lassen, bevor daraus eine falsche Bestellung entsteht.

Checkout-Felder eindeutig beschriften

Ein Platzhalter wie „Name“ verschwindet beim Tippen und ersetzt keine dauerhafte Feldbezeichnung. Kundinnen und Kunden müssen erkennen können, ob Rechnungsanschrift, Lieferanschrift, Ansprechpartner oder Firmenname gemeint ist. Das W3C-Tutorial zu Formularbeschriftungen beschreibt die technisch korrekte Verbindung zwischen Label und Eingabefeld. Die W3C-Hinweise zu Formularanweisungen empfehlen außerdem klare Angaben zu Pflichtfeldern, zulässigen Formaten und benötigten Informationen.

Verwandte Optionen wie Zahlungsart und Versandart sollten übersichtlich gruppiert sein. Werden Firmenfelder erst nach einer Auswahl eingeblendet, müssen sie anschließend auch per Tastatur erreichbar und verständlich sein. Ein Shop sollte möglichst keine Angaben verlangen, die für die Bestellung noch gar nicht nötig sind. Bereits richtig ausgefüllte Felder dürfen nach einem anderen Validierungsfehler nicht unnötig verloren gehen.

Fehlermeldungen müssen zur Lösung führen

Eine rote Umrandung oder der Satz „Fehler aufgetreten“ erklärt kaum etwas. Besser ist eine verständliche Zusammenfassung mit einem Hinweis direkt am betreffenden Feld: etwa „Bitte eine vollständige E-Mail-Adresse eingeben“. Eine hilfreiche Fehlermeldung benennt das Problem und eine mögliche Korrektur. Die W3C-Anleitung zur Eingabevalidierung zeigt, wie Fehler erkannt und nutzbar zurückgemeldet werden können. Meldungen sollten nicht ausschließlich über Farbe vermittelt werden.

Bei Zahlungsproblemen ist besondere Sorgfalt nötig. Ein abgelehnter Bezahlversuch unterscheidet sich von einem unterbrochenen Rückruf des Zahlungsanbieters. Bevor Sie „Bestellung fehlgeschlagen“ anzeigen, muss der tatsächliche Bestellstatus geklärt sein. Nach einem Fehler sollten korrekte Adress- und Lieferdaten erhalten bleiben. Solche Abläufe lassen sich nicht allein mit einer visuellen Prüfung bewerten: Die eingebundenen Systeme müssen im Test tatsächlich zusammenarbeiten.

Anmeldung und Kontozugang ohne unnötige Hürden

Wer ein Kundenkonto benötigt, sollte dafür nicht ständig Geheimnisse auswendig wissen oder Sicherheitscodes mühsam abtippen müssen. Die W3C-Erläuterung zu Accessible Authentication (Minimum) nennt unter anderem Passwortmanager und Kopieren-und-Einfügen als mögliche Mechanismen, um die kognitive Belastung zu reduzieren. Deaktivieren Sie daher nicht pauschal das Einfügen in Passwort- oder Codefelder. Kontrollieren Sie, ob automatische Eingabe und sinnvolle Feldnamen funktionieren.

Ein Gastkauf kann für manche Sortimente hilfreich sein, passt aber nicht zu jedem Geschäftsmodell. Sicherheitsprüfungen müssen nicht entfallen; sie sollten verständlich, zugänglich und bei Unterbrechungen wiederholbar sein. Bewerten Sie Registrierung und Checkout gemeinsam, weil Kontoanforderungen oft mitten im Kaufprozess auftauchen.

Automatisierte Scans richtig einordnen

Prüfwerkzeuge erkennen zahlreiche technische Auffälligkeiten, etwa fehlende Beschriftungen oder bestimmte Kontrastprobleme. Sie verstehen jedoch nicht zuverlässig, ob ein komplizierter Ersatzteilfilter logisch bedient werden kann oder ob eine Fehlermeldung verständlich ist. Kombinieren Sie deshalb automatische Kontrollen mit Tastatur- und Screenreader-Tests, mobilem Zoom und vollständigen Testkäufen. Prüfen Sie ausdrücklich nach dynamischen Updates und bei Fehlermeldungen; der Zustand nach einem Klick kann sich deutlich von der geladenen Ausgangsseite unterscheiden.

Eine sinnvolle Reihenfolge für Korrekturen festlegen

Beginnen Sie mit Blockaden: unerreichbare Filter, unsichtbarer Fokus, unbeschriftete Pflichtfelder oder nicht korrigierbare Checkout-Fehler. Danach bearbeiten Sie wiederkehrende Reibung wie zu enge Bedienelemente und unklare Statusanzeigen. Kosmetische Details folgen, wenn die wesentlichen Aufgaben zuverlässig funktionieren. Jede Maßnahme braucht einen überprüfbaren Abnahmetest. „Alle Filter sind ohne Maus auswählbar“ ist konkreter als „Barrierefreiheit verbessern“.

Änderungen an Versand, Zahlung, Steuern oder Warenkorb gehören zuerst in eine sichere Testumgebung. Kontrollieren Sie nicht nur den reparierten Fall, sondern auch ausverkaufte Varianten, leere Trefferlisten, abgelaufene Sitzungen und gescheiterte Zahlungen. Erstellen Sie vor Eingriffen in Shop-Script-Themes oder Plugins eine Sicherung und halten Sie einen Rückweg bereit. Eine Veränderung ist kein Erfolg, wenn sie zwar einen Test besteht, aber Bestellungen beschädigt.

Ein kleiner Startplan für Shop-Script-Projekte

Wählen Sie fünf typische Seiten und zwei Checkout-Szenarien. Dokumentieren Sie den Ablauf mit Tastatur und Mobilgerät, ordnen Sie die Fehler der jeweiligen Theme-Datei oder Erweiterung zu und definieren Sie pro Punkt das gewünschte Verhalten. Prüfen Sie nach der Umsetzung denselben Ablauf erneut. Lassen Sie möglichst auch eine Person testen, die den Shop nicht täglich bedient. Das hilft, blinde Flecken des Entwicklungsteams zu erkennen.

Barrierearme Bedienung und Datenqualität sollten dabei zusammengedacht werden. Ein Filter mit guter Tastatursteuerung benötigt weiterhin verlässliche Produktmerkmale, und Checkout-Hinweise hängen vom richtigen Bestellstatus ab. Der Quadro Design Bereich eCommerce-Entwicklung beschreibt unseren Ansatz für Shopstruktur und Nutzerwege. Unter Kontakt können Sie die betroffenen Seiten und Abläufe für eine gezielte Einschätzung übermitteln.

Fazit: verständlich einkaufen und Fehler korrigieren können

Ein guter Shop ermöglicht Menschen, Produkte zu finden, Änderungen wahrzunehmen, Eingaben zu korrigieren und sicher abzuschließen – unabhängig davon, ob sie Maus, Tastatur oder unterstützende Technik verwenden. WCAG 2.2 ist ein wichtiger technischer Bezugspunkt, ersetzt aber keine Tests mit echten Produkten, Plugins und Zahlungsszenarien. Wer mit den wichtigsten Kaufhandlungen beginnt, konkrete Hindernisse dokumentiert und jede Änderung vollständig nachprüft, schafft eine belastbare Grundlage für weitere Verbesserungen.