Formulare und Kasse per Tastatur: So prüfen Sie Ihren Shop selbst

Mehr Menschen, als man denkt. Sie alle kommen nur dann bis zur Bestellung, wenn sich jeder Schritt ohne Maus erreichen und auslösen lässt:

• Blinde Menschen, die sich die Seite von einem Screenreader vorlesen lassen
• Menschen, die wegen einer Lähmung, eines Zitterns oder Schmerzen keine Maus führen können
• Menschen mit Sprach- oder Schaltersteuerung – diese Hilfsmittel arbeiten wie eine Tastatur
• Alle, die mit der Tastatur schlicht schneller sind, etwa beim Ausfüllen der Lieferadresse

1. 1

   Schritt 1: Cookie-Banner schließen

   Laden Sie die Startseite neu und drücken Sie Tab. Landen Sie im Cookie-Banner, und können Sie eine Auswahl treffen und ihn schließen?

2. 2

   Schritt 2: Menü und Suche bedienen

   Gehen Sie mit Tab durch den Kopf der Seite. Sehen Sie jederzeit, wo der Fokus gerade steht? Öffnen sich Untermenüs, und kommen Sie mit Esc wieder heraus?

3. 3

   Schritt 3: Ein Produkt in den Warenkorb legen

   Öffnen Sie eine Produktseite, wählen Sie Größe oder Variante und legen Sie das Produkt in den Warenkorb – nur mit Tab, Pfeiltasten, Enter und Leertaste.

4. 4

   Schritt 4: Die Kasse bis zum letzten Schritt durchgehen

   Füllen Sie die Adresse aus und lassen Sie absichtlich ein Pflichtfeld leer. Erscheint ein Hinweis, und springt der Fokus dorthin? Wählen Sie Versand- und Zahlungsart. Vor „Kaufen“ hören Sie auf.

• Kein sichtbarer Fokus: Das Theme blendet den Rahmen um das gerade gewählte Element aus. Man drückt Tab und sieht nicht, wo man ist.
• Menüs, die sich nur öffnen, wenn die Maus darüberfährt
• Eigene Auswahlfelder für Größe oder Farbe, die nur auf einen Mausklick reagieren
• Fenster für Newsletter oder Gutscheine, die sich nicht per Tastatur schließen lassen – der Fokus hängt fest
• Formularfelder, die nur einen grauen Platzhaltertext haben. Er verschwindet beim Tippen und ist keine Beschriftung.
• Fehlermeldungen, die ein Feld nur rot umranden, ohne zu sagen, was fehlt

Fehlende Beschriftungen in Formularen sind das, was Sie am ehesten selbst beheben können. Ein sichtbarer Fokus, Menüs und eigene Auswahlfelder stecken dagegen im Theme – dafür brauchen Sie meist Ihre Agentur oder den Theme-Anbieter.

• Shopify

  Häufig Newsletter- oder Suchfelder. Im Theme-Code (z. B. sections/newsletter.liquid) ein <label> ergänzen; Dawn nutzt dafür die Klasse visually-hidden.

• WooCommerce

  Häufig Formular-Plugins (Contact Form 7, WPForms) oder Newsletter-Widgets. Im Plugin für jedes Feld eine Beschriftung aktivieren statt nur Platzhaltertext.

• Shopware

  Häufig Newsletter- oder Suchfelder. Im eigenen Theme die Twig-Vorlage des Formulars überschreiben und ein <label> ergänzen (ggf. mit Klasse visually-hidden).