Ein Produkt in den Warenkorb legen, die Menge ändern, zur Kasse gehen, Adresse eintragen, Versand auswählen und schließlich bezahlen. Mit der Maus wirkt dieser Ablauf in einem guten Online-Shop meistens selbstverständlich.

Legt man die Maus zur Seite, sieht die Sache manchmal ganz anders aus.

Plötzlich lässt sich die Produktmenge nicht mehr verändern. Der Button zum Entfernen eines Artikels ist nicht erreichbar. Beim Öffnen einer Gutscheineingabe verschwindet der Fokus irgendwo auf der Seite. Und spätestens bei der Zahlungsart geht es nicht mehr weiter.

Genau deshalb gehört die Tastaturbedienung zu den wichtigsten Tests für Warenkorb und Checkout.

Ein Shop sollte nicht voraussetzen, dass jeder Kunde eine Maus benutzen kann. Menschen mit motorischen Einschränkungen arbeiten teilweise ausschließlich mit Tastatur oder alternativen Eingabegeräten. Auch Screenreader-Nutzer navigieren häufig über die Tastatur.

Dabei geht es nicht darum, für diese Nutzer einen besonderen zweiten Checkout zu entwickeln. Der normale Warenkorb und die normale Kasse sollten so aufgebaut sein, dass alle wichtigen Funktionen auch ohne Maus erreichbar sind.

Warum gerade Warenkorb und Checkout kritisch sind

Eine nicht erreichbare Schaltfläche auf einer Informationsseite ist ärgerlich.

Eine nicht erreichbare Schaltfläche im Checkout verhindert möglicherweise den Kauf.

Genau darin liegt der Unterschied.

Im Warenkorb und an der Kasse treffen viele interaktive Elemente aufeinander:

• Mengenfelder
• Plus- und Minus-Buttons
• Entfernen-Buttons
• Gutscheinfelder
• Versandoptionen
• Formularfelder
• Checkboxen
• Dropdowns
• Zahlungsarten
• Bestellübersichten
• Hinweise und Fehlermeldungen
• externe Zahlungsfenster
• der finale Bestellbutton

Schon ein einziges dieser Elemente kann den gesamten Prozess blockieren.

Deshalb lohnt es sich, diesen Bereich nicht nur mit automatischen Tools, sondern vor allem praktisch mit der Tastatur zu testen.

Welche Tasten braucht man für einen einfachen Test?

Für einen ersten Test reichen einige wenige Tasten.

Tab
Springt normalerweise zum nächsten interaktiven Element.

Shift + Tab
Geht in der Reihenfolge zurück.

Enter
Öffnet Links oder aktiviert viele Schaltflächen.

Leertaste
Aktiviert beispielsweise Buttons und Checkboxen.

Pfeiltasten
Werden häufig für Radio-Buttons, Auswahlfelder oder bestimmte Menüs verwendet.

Escape
Sollte viele geöffnete Dialoge, Popups oder Menüs schließen können.

Damit lässt sich bereits ein großer Teil eines Shops überprüfen.

Die wichtigste Regel für den Test lautet:

Die Maus bleibt liegen.

Sobald man bei einem Problem kurz zur Maus greift, übersieht man genau die Barriere, die man eigentlich finden wollte.

Den Warenkorb mit der Tastatur testen

Beginnen wir nicht gleich mit der Kasse. Bereits der Warenkorb kann mehrere Stolperfallen enthalten.

1. Ist der Link zum Warenkorb erreichbar?

Nach dem Hinzufügen eines Produkts sollte der Kunde den Warenkorb problemlos erreichen können.

Viele Shops besitzen oben rechts nur ein Warenkorb-Symbol.

Für sehende Nutzer ist dessen Bedeutung offensichtlich. Technisch sollte das Symbol aber einen verständlichen Namen besitzen.

Ein Screenreader sollte beispielsweise nicht nur:

„Link Grafik“

ausgeben, sondern:

„Warenkorb“

oder noch hilfreicher:

„Warenkorb, 2 Artikel“

Auch mit Tab muss der Link erreichbar sein und einen sichtbaren Fokus erhalten.

2. Ist erkennbar, dass ein Produkt hinzugefügt wurde?

Der Nutzer aktiviert:

„In den Warenkorb“

Danach muss klar werden, ob die Aktion erfolgreich war.

Manche Shops ändern lediglich eine kleine Zahl am Warenkorb-Symbol.

Das kann für Screenreader-Nutzer unbemerkt bleiben.

Eine verständlichere Rückmeldung wäre:

„Der Artikel wurde in den Warenkorb gelegt.“

Optional kann direkt eine weitere Aktion angeboten werden:

„Warenkorb öffnen“

oder:

„Weiter einkaufen“

Die Rückmeldung sollte nicht bereits verschwunden sein, bevor der Nutzer sie überhaupt wahrnehmen konnte.

3. Reihenfolge der Warenkorb-Elemente prüfen

Öffne den Warenkorb und drücke Tab.

Die Reihenfolge sollte nachvollziehbar sein.

Zum Beispiel:

Produktlink → Menge → Entfernen → Gutschein → Warenkorb aktualisieren → Checkout.

Die genaue Reihenfolge kann je nach Aufbau anders sein. Entscheidend ist, dass sie logisch wirkt.

Problematisch wäre:

Produkt 1 → Footer → Produkt 2 → Navigation → Gutschein → zurück zu Produkt 1.

Solche Sprünge entstehen manchmal durch schlecht angepasste Themes oder Plugins.

4. Mengenänderung muss ohne Maus funktionieren

Viele Shops verwenden kleine Plus- und Minus-Schaltflächen.

Optisch ist das praktisch:

− 1 +

Aber die Buttons müssen auch mit der Tastatur erreichbar sein.

Noch wichtiger: Sie brauchen verständliche Namen.

Ein Screenreader sollte nicht hören:

„Button Minus“

sondern besser:

„Menge von Wanderschuh Trail Pro verringern“

und:

„Menge von Wanderschuh Trail Pro erhöhen“

Besonders bei mehreren Produkten im Warenkorb ist dieser Zusammenhang wichtig.

Ein normales Zahlenfeld kann zusätzlich eine gute Lösung sein. Dann lässt sich die gewünschte Menge direkt eintippen.

5. Änderungen müssen bestätigt werden

Wird die Menge von eins auf zwei erhöht, verändert sich möglicherweise sofort der Gesamtpreis.

Diese Änderung ist für sehende Nutzer sichtbar.

Ein Nutzer mit Screenreader sollte ebenfalls erfahren, was passiert ist.

Eine Rückmeldung könnte lauten:

„Menge geändert. Neuer Warenwert: 89,80 Euro.“

Dabei sollte die Website nicht bei jeder kleinen Aktion eine halbe Seite vorlesen. Kurze Statusmeldungen reichen.

6. Produkte müssen per Tastatur entfernbar sein

Viele Warenkörbe verwenden ein kleines X oder Papierkorb-Symbol.

Das ist in Ordnung, solange seine Funktion auch technisch verständlich ist.

Schlecht:

„Button X“

Besser:

„Wanderschuh Trail Pro aus dem Warenkorb entfernen“

Nach dem Entfernen sollte eine Rückmeldung erscheinen:

„Wanderschuh Trail Pro wurde aus dem Warenkorb entfernt.“

Hilfreich kann außerdem eine Möglichkeit sein, die Aktion rückgängig zu machen.

7. Vorsicht bei automatisch aktualisierten Warenkörben

Moderne Shops aktualisieren den Warenkorb oft ohne vollständiges Neuladen der Seite.

Das ist grundsätzlich angenehm.

Problematisch wird es, wenn dabei der Tastaturfokus verloren geht.

Beispiel:

Der Nutzer erhöht die Menge.

Der Warenkorb aktualisiert sich.

Plötzlich springt der Fokus ganz nach oben zum Logo.

Jetzt muss er erneut durch Navigation und Warenkorb laufen.

Nach einer Aktualisierung sollte der Nutzer möglichst an einer sinnvollen Stelle bleiben.

Gutscheinfelder per Tastatur bedienen

Gutscheine wirken wie eine kleine Nebenfunktion. In der Praxis sorgen sie aber erstaunlich häufig für Bedienprobleme.

8. Gutscheinfeld eindeutig beschriften

Ein Eingabefeld braucht eine klare Beschriftung.

Zum Beispiel:

Gutscheincode

Nicht nur:

Code

oder einen Platzhalter wie:

Hier eingeben

Der Nutzer muss auch nach dem Tippen noch erkennen können, wofür das Feld gedacht ist.

9. Gutschein-Button eindeutig benennen

Neben dem Feld sollte beispielsweise stehen:

„Gutschein anwenden“

statt einfach:

„OK“

Nach dem Aktivieren sollte eine klare Meldung erscheinen:

„Der Gutschein wurde angewendet. Sie sparen 10 Euro.“

oder:

„Dieser Gutscheincode ist nicht gültig.“

10. Fehlermeldung nicht nur farbig darstellen

Ein roter Rahmen um das Gutscheinfeld reicht nicht aus.

Die Meldung sollte als Text erklären, was passiert ist.

Zum Beispiel:

„Der Gutscheincode ist abgelaufen.“

oder:

„Der eingegebene Gutscheincode wurde nicht gefunden.“

Das hilft jedem Kunden mehr als ein allgemein gehaltenes „Fehler“.

Der Weg vom Warenkorb zur Kasse

Der nächste kritische Punkt ist der Übergang zum Checkout.

11. Checkout-Button muss eindeutig sein

Ein Button wie:

„Zur Kasse“

ist klar.

Auch:

„Weiter zum Checkout“

funktioniert.

Weniger hilfreich wären:

„Weiter“

oder:

„Nächster Schritt“

wenn nicht klar ist, wohin dieser Schritt führt.

Der Button sollte mit Tab erreichbar, deutlich sichtbar und klar vom übrigen Inhalt unterscheidbar sein.

12. Sticky Elemente dürfen den Button nicht verdecken

Gerade auf Smartphones gibt es häufig:

• Cookie-Banner
• Chat-Buttons
• Newsletter-Leisten
• Sticky Footer
• Rabatt-Popups

Der Checkout-Button kann dadurch teilweise oder vollständig verdeckt werden.

Besonders kritisch ist das beim Tastaturfokus.

Wenn der Button Fokus erhält, aber hinter einem festen Banner liegt, weiß der Nutzer nicht mehr, wo er sich befindet.

Die Kasse komplett ohne Maus testen

Jetzt kommt der wichtigste Teil.

Versuche, den gesamten Checkout nur mit Tastatur zu durchlaufen.

13. Der Fokus sollte sinnvoll im Checkout starten

Nach dem Öffnen der Kasse sollte der Nutzer nicht an einer völlig unerwarteten Stelle landen.

Bei einem normalen Checkout könnte die Reihenfolge beispielsweise beginnen mit:

E-Mail-Adresse

oder:

Vorname

Bei einem mehrstufigen Checkout vielleicht zuerst mit der Überschrift des aktuellen Schritts.

Wichtig ist, dass der Einstieg nachvollziehbar bleibt.

14. Alle Formularfelder müssen erreichbar sein

Gehe mit Tab durch jedes Eingabefeld.

Prüfe:

• Vorname
• Nachname
• Straße
• Hausnummer
• Postleitzahl
• Ort
• Land
• E-Mail-Adresse
• Telefonnummer

Optional kommen weitere Felder hinzu.

Kein notwendiges Feld darf übersprungen werden.

Gleichzeitig sollten Elemente, die gar nicht bedienbar sind, nicht unnötig Fokus erhalten.

15. Formularbeschriftungen dauerhaft sichtbar lassen

Ein häufiges Problem sind Formulare, die nur Platzhalter verwenden.

Im leeren Feld steht:

E-Mail-Adresse

Der Nutzer beginnt zu tippen und der Hinweis verschwindet.

Danach sieht man nur noch:

max@beispiel.de

Bei einem langen Checkout kann man schnell vergessen, welches Feld gerade ausgefüllt wurde.

Besser ist eine dauerhafte Beschriftung oberhalb oder neben dem Feld.

16. Sichtbarer Fokus bei jedem Feld

Der Nutzer muss bei jedem Tab-Schritt erkennen können, welches Element aktiv ist.

Das betrifft nicht nur Eingabefelder, sondern auch:

• Checkboxen
• Links
• Versandoptionen
• Zahlungsarten
• Buttons
• Hilfe-Icons
• Dropdowns

Der Browser zeigt häufig bereits einen Fokusrahmen.

Dieser sollte nicht einfach aus Designgründen entfernt werden.

Wenn das Theme einen eigenen Fokus gestaltet, muss dieser deutlich sichtbar bleiben.

17. Fokus darf nicht hinter Elementen verschwinden

Ein moderner Checkout besitzt gerne eine feststehende Bestellübersicht.

Auf der rechten Seite bleibt sie beim Scrollen sichtbar.

Zusätzlich gibt es möglicherweise ein Cookie-Banner am unteren Rand.

Dadurch kann es passieren, dass der aktuell fokussierte Button technisch vorhanden, aber optisch verdeckt ist.

Beim Test sollte man deshalb immer beobachten:

Kann ich das aktive Element tatsächlich sehen?

Checkboxen richtig bedienen

Checkout-Seiten enthalten häufig mehrere Checkboxen.

18. Checkbox und Text miteinander verbinden

Typische Beispiele:

• abweichende Lieferadresse
• Kundenkonto erstellen
• AGB akzeptieren
• Newsletter abonnieren

Die Beschriftung sollte technisch mit der Checkbox verbunden sein.

Dadurch kann der Nutzer nicht nur das kleine Kästchen, sondern auch den dazugehörigen Text anklicken.

Das vergrößert die Bedienfläche und macht die Nutzung angenehmer.

19. Leertaste muss funktionieren

Eine fokussierte Checkbox sollte sich normalerweise mit der Leertaste aktivieren lassen.

Teste das ausdrücklich.

Manche individuell gestalteten Checkboxen funktionieren optisch wunderbar, reagieren aber ausschließlich auf Mausklicks.

20. Auswahlzustand muss erkennbar sein

Ein Screenreader muss unterscheiden können:

nicht ausgewählt

und:

ausgewählt

Auch visuell sollte der Zustand deutlich sein.

Eine extrem leichte Farbänderung ist dafür nicht ideal.

Versandarten mit Tastatur auswählen

Auch Versandoptionen können problematisch sein.

21. Versandarten verständlich benennen

Beispiel:

Standardversand – 4,90 Euro

Expressversand – 9,90 Euro

Das ist klarer als:

Option 1

und:

Option 2

Zusätzliche Informationen wie Lieferzeiten können ebenfalls hilfreich sein.

22. Radio-Buttons korrekt verwenden

Wenn nur eine Versandart ausgewählt werden kann, sind Radio-Buttons ein naheliegendes Bedienkonzept.

Diese lassen sich üblicherweise mit Tastatur bedienen.

Bei individuell gestalteten großen Auswahlkarten sollte die gleiche Bedienlogik erhalten bleiben.

Ein Nutzer darf nicht gezwungen sein, exakt auf einen kleinen Kreis zu klicken.

23. Änderungen der Versandkosten ankündigen

Wählt der Kunde Expressversand, ändert sich der Gesamtpreis.

Die Änderung sollte verständlich mitgeteilt werden.

Zum Beispiel:

„Expressversand ausgewählt. Versandkosten 9,90 Euro. Neuer Gesamtbetrag 109,80 Euro.“

Zahlungsarten ohne Maus bedienen

Hier scheitern viele Tastaturtests.

24. Jede Zahlungsart muss erreichbar sein

Prüfe nacheinander:

• Rechnung
• Kreditkarte
• PayPal
• Lastschrift
• weitere angebotene Zahlungsarten

Jede Option sollte mit Tastatur erreichbar und auswählbar sein.

25. Zahlungslogos reichen nicht

Ein PayPal-, Kreditkarten- oder Banklogo kann optisch hilfreich sein.

Der Name der Zahlungsart sollte trotzdem als Text verfügbar sein.

Ein Screenreader sollte nicht hören:

„Grafik Zahlungslogo“

sondern:

„PayPal“

oder:

„Kreditkarte“

26. Neue Felder nach Auswahl müssen erreichbar werden

Bei Kreditkartenzahlung erscheinen möglicherweise zusätzliche Felder:

• Karteninhaber
• Kartennummer
• Ablaufdatum
• Sicherheitscode

Diese Felder müssen nach der Auswahl logisch in die Tastaturreihenfolge integriert werden.

Der Nutzer sollte nicht plötzlich hinter dem Bestellbutton landen und erst später zufällig auf die Kreditkartenfelder stoßen.

27. Eingebettete Zahlungsfelder besonders testen

Viele Zahlungsanbieter laden ihre Eingabefelder über externe Komponenten.

Optisch merkt man davon kaum etwas.

Für Tastatur und Screenreader kann sich der Wechsel jedoch bemerkbar machen.

Teste deshalb den echten Zahlungsprozess möglichst weit durch.

Wichtig sind unter anderem:

• Erreichbarkeit der Felder
• verständliche Beschriftungen
• sichtbarer Fokus
• Fehlermeldungen
• Rückkehr zum Shop

Fehler im Checkout richtig behandeln

Fehler passieren.

Barrierefreiheit zeigt sich deshalb nicht nur darin, ob ein Formular bei korrekter Eingabe funktioniert, sondern auch darin, was passiert, wenn etwas falsch läuft.

28. Absichtlich Fehler erzeugen

Teste beispielsweise:

• E-Mail-Adresse leer lassen
• ungültige E-Mail-Adresse eingeben
• Postleitzahl vergessen
• keine Versandart auswählen
• keine Zahlungsart auswählen
• notwendige Checkbox nicht aktivieren

Dann versuche, den Fehler ausschließlich per Tastatur zu korrigieren.

29. Fehler als Text erklären

Schlecht:

„Ungültige Eingabe.“

Besser:

„Bitte geben Sie eine gültige E-Mail-Adresse ein.“

Noch besser ist es, wenn die Meldung direkt dem betroffenen Feld zugeordnet ist.

Der Nutzer sollte nicht raten müssen, welches der zehn Felder falsch ausgefüllt wurde.

30. Fokus sinnvoll zum Fehler führen

Nach dem Absenden eines fehlerhaften Formulars kann der Fokus beispielsweise:

• zur Fehlerübersicht
• oder zum ersten fehlerhaften Feld

geführt werden.

Beides kann sinnvoll sein.

Problematisch ist, wenn einfach nichts passiert und irgendwo weit unten auf der Seite ein roter Text erscheint.

Ein Tastaturnutzer bemerkt ihn möglicherweise überhaupt nicht.

31. Mehrere Fehler übersichtlich darstellen

Bei mehreren Fehlern kann eine Zusammenfassung hilfreich sein.

Zum Beispiel:

Bitte korrigieren Sie folgende Angaben:

• E-Mail-Adresse
• Postleitzahl
• Zahlungsart

Die einzelnen Einträge können direkt zu den jeweiligen Feldern führen.

So muss niemand den gesamten Checkout erneut durchsuchen.

32. Eingegebene Daten erhalten

Nach einer Fehlermeldung sollten normale Eingaben möglichst nicht verschwinden.

Wer gerade Name, Adresse, Telefonnummer und Lieferhinweis eingetragen hat, möchte das nicht alles erneut machen.

Sensible Zahlungsinformationen können aus Sicherheitsgründen anders behandelt werden.

Normale Adressdaten sollten jedoch nicht ohne guten Grund verloren gehen.

Dropdowns im Checkout

Auch klassische Auswahlfelder sollten getestet werden.

33. Länderauswahl

Ein typisches Beispiel ist:

Land auswählen

Die Liste kann sehr lang sein.

Der Nutzer sollte sie mit Tastatur öffnen und bedienen können.

Bei individuell programmierten Such-Dropdowns muss zusätzlich getestet werden:

• Suchfeld erreichbar?
• Treffer navigierbar?
• Auswahl möglich?
• Dropdown wieder schließbar?

34. Keine überraschenden Änderungen

Wenn eine Auswahl sofort große Teile des Checkouts verändert, sollte das nachvollziehbar bleiben.

Beispiel:

Der Nutzer ändert das Lieferland.

Daraufhin ändern sich:

• Versandkosten
• Steuern
• Versandarten
• Gesamtbetrag

Diese Änderungen sollten verständlich kommuniziert werden.

Popups und Dialogfenster im Checkout

Ein Checkout kann weitere Fenster öffnen.

Zum Beispiel:

• Gutscheinbedingungen
• Adresssuche
• Login
• Zahlungsfenster
• Altersprüfung
• Hilfe

35. Fokus muss in den Dialog wechseln

Öffnet sich ein echtes Dialogfenster, sollte der Tastaturfokus dort landen.

Der Nutzer sollte nicht weiter hinter dem geöffneten Fenster durch die eigentliche Checkout-Seite navigieren.

36. Dialog muss wieder verlassen werden können

Escape kann eine gute Möglichkeit sein, ein nicht zwingendes Fenster zu schließen.

Zusätzlich sollte ein klar erreichbarer Schließen-Button vorhanden sein.

Dieser braucht eine verständliche Bezeichnung wie:

„Fenster schließen“

statt nur:

„X“

37. Fokus nach dem Schließen zurückgeben

Nach dem Schließen sollte der Nutzer idealerweise zu dem Element zurückkehren, mit dem der Dialog geöffnet wurde.

So weiß er sofort, wo er sich befindet.

Der Bestellbutton

Am Ende läuft alles auf ein Element hinaus.

Den finalen Button.

38. Der Button muss erreichbar sein

Das klingt selbstverständlich.

Trotzdem sollte es getestet werden.

Nach allen Formularfeldern, Optionen und Zustimmungen muss der Nutzer mit Tab zum Bestellbutton gelangen können.

39. Der Fokus muss deutlich sichtbar sein

Gerade der wichtigste Button des gesamten Shops darf keinen kaum erkennbaren Fokus besitzen.

Er sollte sich im fokussierten Zustand deutlich von seiner normalen Darstellung unterscheiden.

40. Beschriftung muss eindeutig sein

Der Button muss klar vermitteln, dass mit seiner Aktivierung die Bestellung abgeschlossen wird.

Welche konkrete Formulierung notwendig ist, hängt zusätzlich von rechtlichen Anforderungen des jeweiligen Angebots ab.

Aus Sicht der Bedienbarkeit gilt aber:

Der Nutzer sollte niemals raten müssen, ob ein Button den nächsten Formularschritt öffnet oder bereits die Bestellung auslöst.

Was passiert nach der Bestellung?

Auch nach dem letzten Tastendruck muss der Ablauf verständlich bleiben.

41. Bestellbestätigung klar anzeigen

Nach erfolgreichem Abschluss sollte deutlich erkennbar sein:

„Vielen Dank. Ihre Bestellung wurde erfolgreich übermittelt.“

Dazu können folgen:

• Bestellnummer
• Gesamtbetrag
• Zahlungsstatus
• Lieferadresse
• weitere Schritte

42. Fokus sinnvoll auf der Bestätigungsseite platzieren

Nach einem Seitenwechsel beginnt die Tastaturnavigation technisch oft wieder oben.

Eine saubere Seitenstruktur und gegebenenfalls ein Sprunglink zum Hauptinhalt helfen dabei, schnell zur Bestellbestätigung zu gelangen.

43. Zahlungsfehler verständlich behandeln

Nicht jede Zahlung funktioniert.

Der Kunde sollte erkennen können:

• Ist die Bestellung trotzdem angelegt?
• Ist die Zahlung fehlgeschlagen?
• Muss erneut bezahlt werden?
• Kann eine andere Zahlungsart gewählt werden?
• Wurde möglicherweise bereits Geld abgebucht?

Eine Meldung wie:

„Payment error 104“

ist für normale Kunden wenig hilfreich.

Warenkorb und Kasse auf dem Smartphone mit Tastatur testen

Dieser Punkt wird gerne vergessen.

Auch mobile Geräte können mit externer Tastatur oder Hilfstechnologien bedient werden.

Außerdem zeigen mobile Layouts oft andere Komponenten als die Desktop-Version.

44. Mobile Navigation separat prüfen

Vielleicht ist die Bestellübersicht am Desktop offen sichtbar.

Mobil wird sie zu einem Akkordeon.

Dann muss auch dieses Akkordeon per Tastatur bedienbar sein.

45. Sticky Bestellbutton kontrollieren

Mobile Shops verwenden gerne einen dauerhaft sichtbaren Button am unteren Bildschirmrand.

Das kann praktisch sein.

Er darf aber keine Formularfelder, Fehlermeldungen oder andere fokussierte Elemente verdecken.

46. Bildschirmtastatur berücksichtigen

Auch wenn der eigentliche Test mit externer Tastatur erfolgt, sollte zusätzlich die normale Touch-Eingabe geprüft werden.

Die Bildschirmtastatur kann einen großen Teil des Displays verdecken.

Ein fokussiertes Formularfeld sollte trotzdem sichtbar bleiben.

Typische Tastaturfehler in WooCommerce und anderen Shops

In der Praxis wiederholen sich bestimmte Probleme immer wieder.

Dazu gehören:

• Warenkorb-Symbol besitzt keine verständliche Bezeichnung
• Plus- und Minus-Buttons sind nicht fokussierbar
• Entfernen-Button heißt nur „X“
• nach Warenkorb-Aktualisierung springt der Fokus nach oben
• Gutscheinfeld besitzt kein Label
• Checkboxen reagieren nicht auf Leertaste
• Zahlungsarten lassen sich nur anklicken
• Fokusrahmen wurde durch das Theme entfernt
• externe Zahlungsfelder sind schlecht beschriftet
• Cookie-Banner verdeckt den Bestellbutton
• Fehlermeldungen werden nicht angekündigt
• Fokus bleibt in einem Popup hängen
• mobile Akkordeons funktionieren nicht per Tastatur

Nicht jedes Shop-System hat automatisch all diese Fehler.

Sie entstehen häufig erst durch die Kombination aus Theme, Plugins und individuellen Anpassungen.

Deshalb sollte immer der fertige Shop getestet werden.

Automatische Tools reichen hier nicht aus

Automatische Accessibility-Tests sind hilfreich.

Sie können beispielsweise erkennen:

• fehlende Beschriftungen
• leere Buttons
• manche Kontrastprobleme
• fehlerhafte Strukturen

Was sie kaum zuverlässig beurteilen können:

Kann ein echter Nutzer die Bestellung ohne Maus abschließen?

Dafür braucht es einen manuellen Test.

Eine Schaltfläche kann technisch fokussierbar sein und trotzdem in einer völlig unlogischen Reihenfolge auftauchen.

Ein Zahlungsfeld kann formal ein Label besitzen, das für einen Kunden trotzdem unverständlich ist.

Genau deshalb ist die praktische Bedienung so wichtig.

Der 10-Minuten-Test für Warenkorb und Kasse

Für einen schnellen ersten Test kannst du so vorgehen:

1. Öffne eine Produktseite.
2. Lege ein Produkt mit der Tastatur in den Warenkorb.
3. Öffne den Warenkorb ohne Maus.
4. Ändere die Menge.
5. Entferne das Produkt und füge es wieder hinzu.
6. Teste ein Gutscheinfeld.
7. Öffne den Checkout.
8. Fülle alle Formularfelder aus.
9. Wähle Versand und Zahlung.
10. Erzeuge absichtlich einen Fehler.
11. Korrigiere den Fehler.
12. Navigiere bis zum Bestellbutton.

Dabei stellst du dir immer drei Fragen:

Sehe ich, wo ich gerade bin?

Verstehe ich, was ich gerade bedienen kann?

Kann ich ohne Maus zum nächsten Schritt gelangen?

Wenn eine dieser Fragen mit Nein beantwortet wird, lohnt sich eine genauere Prüfung.

Kurze Checkliste für den Warenkorb

Prüfe:

• Ist der Warenkorb per Tastatur erreichbar?
• Wird die Anzahl der Artikel verständlich angegeben?
• Können Mengen geändert werden?
• Sind Plus- und Minus-Buttons eindeutig beschriftet?
• Können Artikel entfernt werden?
• Werden Änderungen bestätigt?
• Funktioniert das Gutscheinfeld?
• Bleibt der Fokus nach Aktualisierungen erhalten?
• Ist der Checkout-Button erreichbar?
• Wird kein Element durch Banner oder Popups verdeckt?

Kurze Checkliste für die Kasse

Prüfe:

• Sind alle Formularfelder per Tastatur erreichbar?
• Hat jedes Feld eine klare Beschriftung?
• Ist der Fokus immer sichtbar?
• Ist die Reihenfolge logisch?
• Funktionieren Checkboxen?
• Lassen sich Versandarten auswählen?
• Lassen sich Zahlungsarten auswählen?
• Funktionieren externe Zahlungsfelder?
• Werden Fehler verständlich beschrieben?
• Wird der Fokus zu Fehlern geführt?
• Bleiben Eingaben nach Fehlern erhalten?
• Funktionieren Dropdowns?
• Lassen sich Popups schließen?
• Ist der Bestellbutton eindeutig und erreichbar?
• Wird die Bestellung anschließend verständlich bestätigt?

Welche Probleme sollte man zuerst beheben?

Bei einem bestehenden Shop kann die Liste lang werden.

Dann sollte zuerst alles repariert werden, was einen Kauf vollständig verhindert.

Priorität 1: Kaufblocker

Dazu gehören:

• Checkout-Button nicht erreichbar
• Zahlungsart nicht per Tastatur auswählbar
• notwendige Checkbox funktioniert nicht
• Formularfeld kann nicht ausgefüllt werden
• Fokusfalle in einem Popup
• Bestellbutton nicht erreichbar

Priorität 2: Orientierung

Danach:

• fehlender Fokus
• unlogische Reihenfolge
• schlecht beschriftete Buttons
• unklare Fehlermeldungen
• nicht angekündigte Änderungen

Priorität 3: Bedienkomfort

Anschließend:

• bessere Statusmeldungen
• komfortablere Mengensteuerung
• optimierte Gutscheinfunktion
• verständlichere Hinweise
• bessere mobile Bedienung

Fazit: Eine Bestellung muss auch ohne Maus möglich sein

Der einfachste Grundsatz lautet:

Ein Kunde sollte den kompletten Einkauf abschließen können, ohne die Maus auch nur einmal anzufassen.

Vom Warenkorb über die Adresse bis zur Versand- und Zahlungsart.

Wer diesen Ablauf selbst einmal ausprobiert, bekommt einen ganz anderen Blick auf den eigenen Shop.

Plötzlich fallen Dinge auf, die man mit Maus jahrelang nicht bemerkt hat: winzige Buttons, unsichtbarer Fokus, unlogische Sprünge oder Zahlungsoptionen, die sich mit Tab zwar erreichen, aber nicht aktivieren lassen.

Das Gute ist: Viele dieser Probleme lassen sich gezielt beheben.

Dabei profitiert nicht nur eine kleine Nutzergruppe. Eine klare Tastaturbedienung geht häufig mit einer besseren Struktur, verständlicheren Formularen und eindeutigen Rückmeldungen einher.

Und genau diese Eigenschaften machen einen Checkout auch für Maus- und Smartphone-Nutzer angenehmer.

Wer wissen möchte, wo er anfangen soll, braucht deshalb zunächst kein kompliziertes Prüfverfahren.

Maus weglegen. Produkt kaufen. Jeden Stolperstein notieren.

Damit findet man oft schon einen großen Teil der wichtigsten Probleme.

Hinweis: Dieser Beitrag bietet eine allgemeine Orientierung und ersetzt keine individuelle Rechtsberatung oder vollständige Barrierefreiheitsprüfung.