Ratgeber / Planung & Praxis

Onlineshop barrierearm gestalten: Den Kaufweg praktisch prüfen

Ein Shop muss sich auch ohne Maus und mit vergrößerter Darstellung bedienen lassen. Ein durchgehender Beispielkauf zeigt, wo Sie genauer hinsehen sollten.

Przemyslaw Martyna · PEMKO4 Min. Lesezeit
Inhalt dieses Ratgebers

Ein Kunde kann das Produkt lesen, aber die Größe nicht auswählen. Ein anderer findet nach einer Fehlermeldung das betroffene Feld nicht wieder. Solche Hindernisse werden auf einem Bild der fertigen Shopseite kaum sichtbar. Um sie zu erkennen, muss der Einkauf tatsächlich durchgespielt werden.

Hier geht es um einen ersten praktischen Prüfweg und darum, beobachtete Probleme so zu beschreiben, dass sie bearbeitet werden können. Eine vollständige Prüfung der Barrierefreiheit benötigt einen umfassenderen fachlichen Rahmen. Auch das W3C grenzt seine ersten Prüfungen ausdrücklich von einer vollständigen Bewertung ab.

Eine Bestellung vollständig mit der Tastatur durchgehen

Als Beispiel dient ein Shop für Schreibtischzubehör. Sie wählen eine Ablage in einer bestimmten Farbe, legen sie in den Warenkorb und möchten als Gast bestellen. Verwenden Sie für den ersten Durchlauf ausschließlich die Tastatur. Halten Sie an jeder Stelle fest, ob erkennbar ist, welches Element gerade ausgewählt ist und wie Sie weiterkommen.

Besonders aufschlussreich sind selbst gestaltete Farbfelder, ausklappende Warenkörbe und eingeblendete Dialoge. Lässt sich die Farbauswahl erreichen? Wird die gewählte Variante auch als Text verständlich? Können Sie einen Dialog schließen und anschließend am passenden Punkt weiterarbeiten? Bleibt der Fokus hinter einer geöffneten Ebene, kann der sichtbare Kaufweg für Tastaturnutzer abbrechen.

Vergrößern, ohne den Zusammenhang zu verlieren

Wiederholen Sie die Auswahl mit deutlich vergrößerter Browserdarstellung. Betrachten Sie nicht nur einzelne Wörter: Bleiben Preis, ausgewählte Variante und Bestellschaltfläche einander zugeordnet? Verdeckt ein feststehender Hinweis den Inhalt? Ist der Warenkorb noch erreichbar, wenn eine Bildschirmtastatur Platz beansprucht?

Für den Bericht sind die konkrete Zoomstufe, Browser und Fenstergröße wichtig. „Am großen Monitor funktioniert es“ beschreibt eine andere Situation. Zusätzliche Prüfungen mit einem Screenreader müssen gesondert eingeplant werden; ein gelungener Tastaturdurchlauf sagt noch nicht, welche Informationen dort vorgelesen werden.

Einen Eingabefehler bewusst provozieren

Lassen Sie im Beispiel die Postleitzahl weg und versuchen Sie fortzufahren. Prüfen Sie, ob die Meldung das betroffene Feld und die nötige Korrektur nennt. Ein roter Rahmen allein erklärt den Fehler nicht. Bereits eingegebene Lieferangaben sollten bei der Korrektur nicht grundlos verschwinden.

Das W3C-Tutorial für Formulare beschreibt unter anderem zugeordnete Beschriftungen, Hilfen und verständliche Rückmeldungen. Auf den Kaufweg übertragen heißt das: Kunden brauchen nach einem Fehler einen nachvollziehbaren nächsten Schritt. Notieren Sie die tatsächlich sichtbare und vorgelesene Meldung, statt nur „Formular unverständlich“ zu vermerken.

Ein Fehlerprotokoll, mit dem die Umsetzung arbeiten kann

Das folgende Muster beschreibt einen möglichen Befund. Es ist kein Messergebnis eines bestimmten Shops.

Beispiel: Farbauswahl bleibt ohne Maus unerreichbar
Feld im Protokoll Beispieleintrag
Ausgangssituation Produktseite einer Ablage, Auswahl per Tab-Taste, Browser und Version ergänzen
Beobachtung Fokus springt vom Produktlink direkt zur Mengenangabe; Farbfelder werden übersprungen
Erwarteter Ablauf Verfügbare Farben sind bedienbar; aktuelle Auswahl ist erkennbar und verständlich benannt
Auswirkung Gewünschte Ausführung kann ohne Maus nicht gewählt werden
Nachprüfung Nach Änderung denselben Ablauf sowie die Übernahme der Variante im Warenkorb wiederholen

Ergänzen Sie eine zuständige Person und den Bearbeitungsstand. So können Sie behobene Fehler von lediglich gemeldeten unterscheiden. Ein neues Design allein ist noch keine Nachprüfung.

Die Übergabe an den Zahlungsanbieter gehört dazu

Der Test endet nicht am eigenen Bestellknopf. Prüfen Sie mit den vorgesehenen Testverfahren auch eingebundene Zahlungsdialoge und die Rückkehr in den Shop. Kann der Kunde abbrechen und eine andere Zahlart wählen? Ist danach erkennbar, ob die Bestellung abgeschlossen wurde?

Bei einem fremden Modul muss der Befund an dessen zuständigen Anbieter gehen. Dokumentieren Sie, welche Teile Sie selbst ändern können und welche Rückmeldung noch aussteht. Für die umfassendere kaufmännische und technische Abnahme hilft der Beitrag Onlineshop: Angebot und Abnahme prüfen.

Was das BFSG für die Planung bedeutet

Seit dem 28. Juni 2025 gilt das BFSG für die erfassten Produkte und Dienstleistungen, darunter bestimmte Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher. Ob Ihr Angebot darunterfällt und ob eine Ausnahme greift, muss für Ihr Unternehmen geklärt werden. Die Ausnahme für Dienstleistungen bestimmter Kleinstunternehmen lässt sich nicht pauschal auf Pflichten für erfasste Produkte übertragen. Die Bundesfachstelle erläutert den Anwendungsbereich im Onlinehandel.

Ein technisches Prüfprotokoll ersetzt diese rechtliche Einordnung nicht. Auch eine zusätzliche Bedienleiste macht einen Shop nicht automatisch barrierefrei. Für eine Beauftragung sollten Prüfumfang, zugrunde gelegte Anforderungen und Nachprüfung ausdrücklich benannt sein.

Wenn Sie einen Onlineshop neu gestalten oder überarbeiten lassen möchten, schicken Sie PEMKO über das Kontaktformular die Shopadresse und den problematischen Schritt. Damit lässt sich klären, welche technische Arbeit und welche ergänzende Fachprüfung benötigt werden.

Ihr nächster Schritt

Besprechen wir Ihre Website.

Welche Leistungen bieten Sie an? Was soll ein Besucher auf Ihrer Website erledigen können? Mit diesen Angaben beginnt die Planung.

Projekt anfragen

Aktualisiert am 27.09.2026 · Weitere Ratgeber

Ihre Website mit PEMKOProjekt anfragen