Was macht einen Checkout unzugänglich?
Ein Onlineshop kann optisch perfekt wirken und dennoch für jemanden, der nur mit der Tastatur navigiert oder auf einen Screenreader angewiesen ist, unbrauchbar sein. Meist liegt das Problem nicht auf der Produktseite, sondern im Checkout – genau dort, wo die Conversion stattfindet.
Eine aktuelle Studie der Contentsquare Foundation hat ergeben, dass 94 % der größten E-Commerce-Websites in Europa nach wie vor nicht barrierefreie Checkout-Prozesse aufweisen.
Jedes unzugängliche Feld, jede unklare Beschriftung oder jede nicht angekündigte Fehlermeldung kann einen interessierten Kunden dazu veranlassen, den Kaufvorgang abzubrechen.
Die 3 häufigsten Barrierefreiheitsfehler im E-Commerce
- Formularfelder ohne sichtbare Beschriftung. Felder für Name, Adresse und Kreditkartendaten verlassen sich oft nur auf Platzhaltertext. Das reicht nicht aus, da der Platzhaltertext verschwindet, sobald der Nutzer mit der Eingabe beginnt, und WCAG 3.3.2 schreibt Beschriftungen oder Anweisungen für Eingabefelder ausdrücklich vor.
- Schaltflächen, die als generische anklickbare Elemente erstellt wurden. „In den Warenkorb“- oder „Bestellung abschließen“-Buttons werden manchmal als Divs statt als native interaktive Elemente gestaltet, wodurch sie für Tastaturnutzer unter Umständen nicht erreichbar sind.
- Fehlermeldungen, die nicht mit dem entsprechenden Feld verknüpft sind. Wenn Validierungsfehler nicht programmatisch mit dem betroffenen Feld verbunden sind, verstehen Screenreader-Nutzer möglicherweise nicht, was schiefgelaufen ist. WCAG 3.3.1 behandelt dies direkt.
So verbessern Sie die Barrierefreiheit im Checkout, ohne alles neu gestalten zu müssen
Die korrekte Beschriftung von Formularfeldern, die Verwendung nativer Elemente wie <label> , <button> und <a> anstelle von gestylten Divs sowie die klare Verknüpfung von Fehlermeldungen mit den jeweiligen Feldern können die meisten dieser Barrieren beseitigen, ohne dass Sie Ihr Design ändern müssen.
Die gute Nachricht ist, dass WordPress bereits großen Wert auf Barrierefreiheit legt. WordPress.org gibt klar an, dass das Projekt wo immer möglich die WCAG 2.2 AA-Richtlinien anstrebt und dass neuer oder aktualisierter Code den WordPress-Standards für Barrierefreiheit entsprechen soll. Das bedeutet jedoch nicht, dass jede WordPress-Website automatisch barrierefrei ist. Für Ihr Theme, Ihre Formulare und Ihre benutzerdefinierten Blöcke sind Sie weiterhin selbst verantwortlich.
Deshalb lohnt es sich, insbesondere Formulare, die Tastaturnavigation und Feldbezeichnungen zu überprüfen. WordPress empfiehlt korrekt erstellte Formulare mit gültigem HTML, sichtbaren Beschriftungen und klaren Anweisungen, während die W3C-Richtlinien ausdrücklich darauf hinweisen, dass Platzhaltertext kein Ersatz für ein echtes Label ist. Wenn Sie Lead-, Kontakt- oder Checkout-Formulare auf einer WordPress-Seite haben, treten dort häufig die ersten Barrieren auf.
Shopify bewegt sich ebenfalls in diese Richtung und gibt an , dass das Unternehmen seine Dienste kontinuierlich auf die Einhaltung der WCAG 2.2 Level AA prüft. Das ist ein hilfreicher Kontext, bedeutet aber noch lange nicht, dass Ihr spezifisches Theme, Ihre Apps oder Ihr individueller Checkout-Prozess automatisch konform sind.
Warum WordPress- und Shopify-Shops weiterhin manuelle Prüfungen benötigen
Die Barrierefreiheit der Plattform ist eine hilfreiche Grundlage, aber nicht gleichbedeutend mit einer durchgängigen Konformität. Ein WordPress-Theme kann schlechte Kontraste, fehlerhafte Fokus-Zustände oder nicht barrierefreies Formular-Markup einführen. Ein Shopify-Shop kann weiterhin Barrierefreiheitsprobleme durch Apps, benutzerdefinierte Bereiche oder Skripte von Drittanbietern erben.
Deshalb sollte die Barrierefreiheit auf Plattformebene als Ausgangspunkt und nicht als Ziellinie betrachtet werden. Der eigentliche Test besteht darin, ob ein Nutzer den Weg von der Produktansicht bis zum Checkout reibungslos absolvieren kann.
So prüfen Sie Ihren Checkout in 10 Minuten
Sie benötigen kein vollständiges manuelles Audit, um loszulegen. Eine schnelle Überprüfung des Live-Checkouts kann die größten Hindernisse sofort aufdecken:
- Führen Sie den Barrierefreies Check auf der Live-Checkout-Seite aus, nicht nur auf der Startseite.
- Versuchen Sie, den gesamten Checkout-Prozess nur mit der Tab-Taste und ohne Maus abzuschließen.
- Senden Sie das Formular leer ab und prüfen Sie, ob Fehlermeldungen deutlich neben dem entsprechenden Feld erscheinen.
- Überprüfen Sie, ob jedes Eingabefeld ein sichtbares Label hat und nicht nur einen Platzhalter.
- Stellen Sie sicher, dass der Fokus-Zustand während des gesamten Prozesses immer sichtbar ist.
Wenn Sie häufige Usability-Hürden reduzieren möchten, ohne auf einen vollständigen Entwicklungszyklus zu warten, kann das Barrierefreies Widget auf Interface-Ebene helfen. Für Teams, die sicherstellen möchten, dass zukünftige Theme- oder Plugin-Updates nicht dieselben Probleme verursachen, hilft unser Barrierefreies Monitor dabei, die Barrierefreiheit langfristig zu überwachen.
FAQ
Wie mache ich meinen Onlineshop barrierefrei?
Beginnen Sie damit, die kritischen Seiten – Produkt, Warenkorb und Checkout – anhand der WCAG 2.2 zu prüfen und anschließend Beschriftungen, Kontraste, Tastaturnavigation sowie die Fehlerbehandlung zu optimieren.
Muss der Checkout barrierefrei sein?
Ja. Gemäß dem European Accessibility Act müssen E-Commerce-Dienste die Barrierefreiheitsanforderungen auf Basis der EN 301 549 und WCAG erfüllen, und der Checkout ist ein zentraler Bestandteil dieses Prozesses.
Ist Shopify standardmäßig barrierefrei?
Nicht vollständig. Shopify bietet eine solide Basis, aber Apps, Themes und individuelle Anpassungen am Checkout müssen dennoch überprüft werden.
Ist WordPress standardmäßig barrierefrei?
Nein. WordPress bietet ein starkes Fundament für Barrierefreiheit, aber Ihr Theme, Ihre Formulare und benutzerdefinierte Blöcke können dennoch Barrieren enthalten.
Was ist der schnellste Weg, die Barrierefreiheit zu prüfen?
Führen Sie einen automatisierten Scan des Live-Checkouts durch und testen Sie den Ablauf anschließend manuell – nur mit der Tastatur und durch das Absenden eines leeren Formulars.
Shop kostenlos scannen → scan.wawsome.com
Quellen:
- Contentsquare Foundation, Kann jeder den Bezahlvorgang abschließen?
- W3C, Verständnis von SC 3.3.1: Fehlererkennung
- W3C, Verständnis von SC 3.3.2: Beschriftungen oder Anweisungen
- Shopify, Erklärung zur Barrierefreiheit
- WordPress, Entwicklerdokumentation