Barrierefreiheit im E-Commerce 2026: Ihren PrestaShop-Kaufweg prüfen
Barrierefreiheit im E-Commerce bedeutet, dass Kunden Produkte mit unterschiedlichen Arten der Websitebedienung finden, verstehen und kaufen können. Ein mit der Maus funktionierender Checkout belegt nicht, dass er für jemanden mit Tastatur oder Screenreader funktioniert.
Der European Accessibility Act gilt seit dem 28. Juni 2025 und umfasst E-Commerce-Dienste in seinem Anwendungsbereich mit Ausnahmen und Übergangsbestimmungen. Prüfen Sie die geltende nationale Umsetzung und die Lage Ihres Unternehmens; dieses praktische Audit ist keine rechtliche Konformitätsbewertung. Die EUR-Lex-Zusammenfassung erläutert den Rahmen.
Beginnen Sie mit einem vollständigen Kaufweg in Ihrem PrestaShop-Shop. Sie erstellen reproduzierbare Befunde, weisen Korrekturen zu und testen die Kundenaufgabe nach Änderungen erneut.
1. Eine Kaufaufgabe und ihre Grenzen definieren
Wählen Sie eine Aufgabe, die ein echter Kunde abschließen kann: ein blaues Notizbuch finden, die benötigte Größe wählen, die Lieferung verstehen und über einen genehmigten Testzahlungsweg eine Testbestellung aufgeben.
Listen Sie alle beteiligten Oberflächen auf. Nehmen Sie Navigation, Suche, Filter, Produktoptionen, Warenkorb, Einwilligungssteuerung, Adresseingabe und Zahlungsübergabe auf.
Erfassen Sie Theme, relevante Modulversionen, Browser, Gerät und Datum. Barrierefreiheit kann sich bei Updates von Zahlungs- oder Einwilligungskomponenten ändern, auch wenn die Produktvorlage unverändert bleibt.
Beginnen Sie mit dem normalen Weg und ergänzen Sie anschließend einen erneuten Besuch, einen Formularfehler und eine nicht verfügbare Variante. Diese Zustände zeigen oft Hindernisse, die ein Screenshot der ersten Seite nicht offenbart.
2. Ein Befundblatt mit beobachtbaren Ergebnissen vorbereiten
Schreiben Sie die genaue Aktion, das Geschehen und das erwartete Kundenergebnis auf. Vermeiden Sie vage Berichte wie „Checkout ist nicht barrierefrei“.
| Feld | Beispiel |
|---|---|
| Seite und Zustand | Adressformular nach Absenden eines leeren Pflichtfelds |
| Eingabemethode | Nur Tastatur |
| Reproduktion | Mit Tab zu Weiter wechseln und aktivieren |
| Beobachtetes Ergebnis | Fehler erscheint, aber Fokus bleibt weit vom betroffenen Feld entfernt |
| Kundenauswirkung | Käufer erkennt nicht leicht, wie er fortfahren kann |
| Zuständige Person | Betreuer des Checkout-Moduls |
| Erneuter Test | Dieselbe Aktion nach der Korrektur wiederholen |
Verwenden Sie hilfreiche Screenshots oder kurze Aufzeichnungen, fügen Sie aber schriftliche Schritte hinzu. Ein Video ohne Browser und Ausgangszustand kann für Entwickler schwer reproduzierbar sein.
Priorisieren Sie Barrieren, die den Aufgabenabschluss verhindern. Kosmetische Unstimmigkeiten können hinter einem Zahlungsdialog warten, der den Kunden festhält.
3. Den Weg nur mit der Tastatur durchlaufen
Legen Sie die Maus beiseite und navigieren Sie vom Seiteneinstieg aus. Beobachten Sie, wohin der Fokus wandert, ob er sichtbar ist und ob Sie dieselben wichtigen Bedienelemente wie Mausnutzer aktivieren können.
Testen Sie Menüs, Filter und Produktoptionen gezielt. Ein optisch attraktives Farbfeld ist per Tastatur nicht nutzbar, wenn es keinen Fokus erhalten oder die gewählte Option nicht mitteilen kann.
Öffnen und schließen Sie Dialoge einschließlich Warenkorbvorschau und Einwilligungspanel. Prüfen Sie, ob Sie nach dem Verlassen an eine sinnvolle Stelle zurückkehren und kein Bestandteil Sie darin festhält.
Die W3C- Hinweise zum Tastaturfokus bieten einen nützlichen Ausgangspunkt. Dokumentieren Sie die genaue fehlgeschlagene Interaktion, statt für alle Tastaturprobleme dieselbe technische Ursache anzunehmen.
Wiederholen Sie die Übung nach dem Hinzufügen eines Artikels zum Warenkorb. Dynamische Änderungen können das Fokusverhalten auf eine Weise ändern, die beim leeren Warenkorb verborgen bleibt.
4. Produktauswahl und Formularanweisungen prüfen
Stellen Sie Entscheidungsinformationen neben dem Bedienelement bereit. Kunden müssen Optionsname, aktuelle Auswahl, benötigte Angaben und relevante Einschränkungen kennen.
Prüfen Sie beim Notizbuchbeispiel, wie die Größenwahl gekennzeichnet und die ausgewählte Farbe mitgeteilt wird. Verwenden Sie nicht allein Farbe, um eine nicht verfügbare oder ausgewählte Option anzuzeigen.
Prüfen Sie beim Adressformular, ob Anweisungen nach dem Tippen verständlich bleiben. Ein verschwindender Platzhalter bietet beim Überprüfen der Eingaben möglicherweise nicht genügend dauerhaften Kontext.
Erzeugen Sie im Test eine ungültige Postleitzahl oder lassen Sie ein Pflichtfeld aus. Die Meldung sollte die nötige Korrektur erklären, das Feld kennzeichnen und bereits eingegebene nützliche Informationen erhalten.
Verwenden Sie das W3C-Formulartutorial als technische Referenz für die umsetzungsverantwortliche Person. Ihr Händlerakzeptanztest ist, ob der Käufer den Fehler ohne Raten beheben kann.
5. Vergrößerte Inhalte und kleine Bildschirme testen
Erhöhen Sie den Browserzoom und prüfen Sie dieselbe Aufgabe. Suchen Sie nach Text oder Bedienelementen hinter festen Bannern, abgeschnittenen Preisen und horizontaler Bewegung, die das Verfolgen eines Formulars erschwert.
Prüfen Sie die Produktspezifikationstabelle und nicht nur die Einleitung. Kunden, die die Passform eines Artikels beurteilen, brauchen Zugriff auf Maße bei ihrer bevorzugten Schriftgröße.
Testen Sie anschließend auf einem kleinen Bildschirm mit geöffneter Bildschirmtastatur. Feste Schaltflächen und Chatwidgets können Felder überdecken, die vor der Texteingabe gut aussahen.
Erfassen Sie Ansichtsbereich und Zoomstufe im Befund. Lassen Sie die umsetzungsverantwortliche Person die geltenden technischen Kriterien bewerten; Ihr Test soll ein konkretes Kaufhindernis aufdecken.
Vermeiden Sie eine Korrektur, die einfach Zoom deaktiviert. Das erfolgreiche Ergebnis ist ein nutzbares Layout bei vergrößertem Inhalt.
6. Bilder, Überschriften und Lesereihenfolge prüfen
Lesen Sie die Seite ohne Abhängigkeit vom dekorativen Layout. Produktname, Preis, Optionen, Lieferinformationen und Aktion sollten eine sinnvolle Reihenfolge bilden.
Prüfen Sie, ob Bildalternativen die für die Aufgabe nötigen Informationen vermitteln. Ein Foto des genauen Setinhalts erfordert eine andere Behandlung als ein rein dekorativer Hintergrund.
Verwenden Sie einen Screenreader mit jemandem, der das Werkzeug kennt, oder beziehen Sie eine Fachperson für Barrierefreiheit ein. Bedienprobleme eines Anfängers mit assistiver Technik sollten nicht mit einem bestätigten Websitefehler verwechselt werden.
Die W3C- Hinweise zur ersten Prüfung behandeln nützliche Anfangsprüfungen und erläutern ausdrücklich ihre Grenzen. Das Bestehen einer kurzen Checkliste belegt nicht, dass der gesamte Dienst jede Anforderung erfüllt.
Ergänzen Sie Befunde zu sinnvollem Inhalt in der Arbeit der katalogverantwortlichen Person und nicht nur in der Entwicklerwarteschlange. Fehlende Produktinformationen können auch nach HTML-Verbesserungen eine Barriere bleiben.
7. Zahlungs- und Supportkomponenten Dritter einbeziehen
Testen Sie den tatsächlichen Zahlungsweg in einer geeigneten Testumgebung einschließlich Authentifizierung, Abbruch und Rückkehr zum Shop. Ein nutzbares Adressformular ist nur ein Teil eines erfolgreichen Kaufs.
Erfassen Sie, wo Verantwortung zwischen Theme, Checkout-Modul und Zahlungsanbieter wechselt. Senden Sie jedem Betreuer das kleinste reproduzierbare Beispiel für seine Komponente.
Nehmen Sie jeden Kundenservicechat auf, der die Seite überdeckt oder Fokus übernimmt. Bieten Sie beim Bewerten eines neuen Supportwerkzeugs einen barrierefreien alternativen Kontaktweg an.
Verwenden Sie den Ablauf für Zahlungsfehler um Wiederherstellungsnachrichten nach fehlgeschlagener Zahlung zu prüfen. Barrierefreiheit und operative Richtigkeit müssen zusammen bestehen: Kunden sollten das Geschehen und den nächsten Schritt verstehen.
Genehmigen Sie eine Komponente nicht allein wegen einer allgemeinen Barrierefreiheitserklärung des Anbieters. Prüfen Sie die Konfiguration und den tatsächlich genutzten Kundenweg.
8. Korrekturen erneut testen und den Weg in Releaseprüfungen behalten
Weisen Sie jedem Befund eine zuständige Person, Priorität und ein erwartetes Ergebnis zu. Wiederholen Sie nach einer Korrektur die ursprünglichen Schritte und bestätigen Sie, dass der Kunde weiterkommt.
Prüfen Sie auch benachbarte Zustände. Die Fokuskorrektur in einem Dialog sollte ihn nicht im nächsten Zahlungsschritt entfernen oder das mobile Layout beschädigen.
Pflegen Sie einen kurzen wiederkehrenden Testsatz für Änderungen an Theme, Einwilligungsmanager, Produktoptionen und Checkout. Erfassen Sie Testzeitpunkte und beteiligte Versionen.
Planen Sie für eine breitere Bewertung fachliche Prüfung und Beteiligung von Menschen mit relevanten Behinderungen. Ihr erstes Audit liefert nützliche Nachweise und Prioritäten; es ersetzt diese Expertise nicht.
9. Häufige Probleme beim Barrierefreiheitsaudit
| Problem | Wahrscheinliche Ursache | Was zu prüfen oder zu ändern ist |
|---|---|---|
| Eine Farboption lässt sich nicht per Tastatur auswählen | Benutzerdefiniertes Bedienelement hat kein nutzbares Interaktionsmodell | Optionswahl für den Komponentenverantwortlichen reproduzieren |
| Fehler erscheinen, aber Kunden finden sie nicht | Fehlerrückmeldung und Fokus sind getrennt | Abgesendetes ungültiges Formular und Fehlerbehebungsweg testen |
| Ein Banner überdeckt die Zahlungsschaltfläche | Feste Elemente kollidieren bei kleinen Größen oder Zoom | Tatsächlichen Ansichtsbereich mit allen geöffneten Widgets prüfen |
| Automatischer Scan besteht, aber Kauf scheitert | Scan hat interaktive Zustände nicht durchlaufen | Manuelle aufgabenbezogene Tests ergänzen |
| Ein Modulupdate führt eine Barriere erneut ein | Barrierefreiheitsprüfungen fehlten in der Releaseprüfung | Gespeicherten Weg nach relevanten Änderungen erneut testen |
10. Checkliste für das Kaufwegaudit
- Die Aufgabe umfasst Produkterkennung, Optionen, Warenkorb und Zahlung.
- Browser, Gerät und relevante Versionen sind erfasst.
- Tastaturnavigation erreicht und bedient wesentliche Steuerelemente.
- Ausgewählte Optionen und Fehler sind verständlich.
- Vergrößerter Inhalt bleibt nutzbar.
- Produktinformationen haben eine sinnvolle Lesereihenfolge.
- Dialoge Dritter und Zahlungsfehlerbehebung sind enthalten.
- Befunde haben zuständige Personen und reproduzierbare Schritte für erneute Tests.
Häufig gestellte Fragen
Gilt der European Accessibility Act für jeden Onlineshop gleich?
Nein. Anwendungsbereich, Ausnahmen, Übergangsbestimmungen und nationale Umsetzung müssen für Unternehmen und Dienst bewertet werden. Verwenden Sie den offiziellen Rahmen und geeignete lokale Beratung, statt eine einheitliche Regel für jeden Händler anzunehmen.
Reicht ein automatisierter Barrierefreiheitswert aus?
Nein. Automatische Prüfungen können einige Probleme erkennen, belegen jedoch nicht, dass jemand jede interaktive Kaufaufgabe abschließen kann. Kombinieren Sie sie mit manuellen Tests und geeigneter fachlicher Bewertung.
Kann ich Barrierefreiheit durch ein einziges Widget lösen?
Behandeln Sie ein Widget nicht als Beweis für einen barrierefreien Kaufweg. Testen Sie zugrunde liegendes Theme, Formulare, Produktsteuerungen und Drittkomponenten mit denselben Kundenaufgaben.
Sollte ich nur den Checkout testen?
Testen Sie den Weg, über den Kunden den Checkout erreichen und nutzen. Suche, Filter, Produktauswahl und Lieferinformationen können einen Kauf schon vor der Zahlungsseite verhindern.
Wer sollte ein Problem innerhalb eines Zahlungsdialogs beheben?
Bestimmen Sie den Komponentenverantwortlichen und liefern Sie einen reproduzierbaren Fall mit Konfigurationsangaben. Ihr Shop muss weiterhin den gesamten Kundenweg bewerten und die Lösung koordinieren.
Was kann ein kleines Team zuerst tun?
Durchlaufen Sie einen vollständigen Tastaturweg und einen Weg mit vergrößertem Inhalt und dokumentieren Sie anschließend blockierende Barrieren. Nutzen Sie die Befunde zur Priorisierung und um nötige fachliche Hilfe zu bestimmen.