Tastaturtest in 10 Minuten: den Shop ohne Maus prüfen
Veröffentlicht am 20. Oktober 2026
Ob Ihre Website mit der Tastatur bedienbar ist, testen Sie, indem Sie die Maus weglegen und mit Tab, Umschalt+Tab, Enter, Leertaste, Pfeiltasten und Esc einmal die ganze Kaufstrecke bis zur Zahlungsauswahl durchgehen. Bestanden ist der Test, wenn Sie jedes Bedienelement erreichen und auslösen, immer sehen, wo der Fokus steht, nirgends hängen bleiben und der Fokus in einer sinnvollen Reihenfolge wandert.
Dieser Artikel gibt Ihnen dafür einen getakteten Ablauf für etwa zehn Minuten, eine Tastenübersicht, eine Tabelle, die jeden Fund einem Kriterium der WCAG 2.2 und einer zuständigen Stelle zuordnet, und einen Protokollvordruck. Der Tastaturtest ist ein Baustein der Handprüfung; wie er mit automatischem Test, Zoom und Screenreader zusammenspielt, steht in Website auf Barrierefreiheit prüfen: Checkliste für Onlineshops.
Warum Sie das selbst prüfen müssen
Das zentrale Kriterium ist 2.1.1 Tastatur (Stufe A): Alle Funktionen des Inhalts müssen über eine Tastaturschnittstelle bedienbar sein, ohne dass es auf das Timing einzelner Tastendrücke ankommt. Ein automatischer Scan sieht davon nur einzelne Code-Muster. Ob sich Größenauswahl, Mini-Warenkorb oder Zahlungsfenster wirklich bedienen lassen, zeigt nur Ihr eigener Durchgang. Welche Kriterien ein Werkzeug überhaupt automatisch prüfen kann, zeigt der Ratgeber WCAG-Check online.
Auch das W3C nennt seinen eigenen Schnelltest zu Tastatur und Fokus in den Easy Checks nur eine erste Prüfung: Eine Seite kann ihn bestehen und trotzdem erhebliche Barrieren haben (gelesen am 20.10.2026). Der Ablauf unten ist entsprechend ein Schnelltest, keine vollständige Prüfung.
Vorbereitung: Browser einstellen (2 Minuten)
Unter Windows brauchen Sie nichts einzustellen; das sagen auch die Easy Checks des W3C (gelesen am 20.10.2026). Auf dem Mac springt die Tabulatortaste ohne Einstellung nicht zu allen Bedienelementen. Schalten Sie deshalb zwei Dinge ein:
- macOS: Laut Apple-Hilfe zur Tastaturnavigation (gelesen am 20.10.2026) aktivieren Sie unter Systemeinstellungen > Tastatur die Option Tastaturnavigation. Dann bewegt Tab den Fokus zum nächsten Steuerelement und Umschalt+Tab zum vorherigen.
- Safari: Laut Apple-Hilfe zu den Einstellungen „Erweitert“ in Safari (gelesen am 20.10.2026) wählen Sie unter Safari > Einstellungen > Erweitert die Option Über Tabulator jedes Objekt auf einer Webseite hervorheben. Damit erreichen Sie auch Links und Tasten nacheinander ohne Maus.
Für Chrome und Firefox auf dem Mac haben wir keine Herstellerhilfe gefunden, die die nötige Einstellung beschreibt. Testen Sie auf dem Mac deshalb mit Safari und beiden Einstellungen.
Dann: Klicken Sie einmal in die Adresszeile, laden Sie Ihre Startseite und legen Sie die Maus beiseite, wie es die Easy Checks beschreiben. Halten Sie den Protokollvordruck vom Ende dieses Artikels bereit.
Die Tasten, die Sie brauchen
| Taste | Was sie tun sollte | Quelle |
|---|---|---|
| Tab | Fokus zum nächsten Bedienelement | APG: Keyboard Interface |
| Umschalt+Tab | Fokus zum vorherigen Bedienelement | APG: Keyboard Interface |
| Enter | Link öffnen, Schaltfläche auslösen | APG: Button, Easy Checks |
| Leertaste | Schaltfläche auslösen, Kontrollkästchen an- und abhaken | APG: Button, APG: Checkbox |
| Pfeiltasten | innerhalb von Menüs, Auswahllisten und einer Gruppe von Optionsfeldern wechseln; Tab verlässt die Gruppe | Easy Checks, APG: Keyboard Interface |
| Esc | einen Dialog schließen; der Fokus kehrt danach in der Regel zu dem Element zurück, das ihn geöffnet hat | APG: Modaler Dialog |
Alle Quellen gelesen am 20.10.2026. Die APG (ARIA Authoring Practices Guide) des W3C ist eine Anleitung für Entwickler, keine Norm. Weicht Ihr Shop davon ab, ist das nicht automatisch ein Verstoß; entscheidend ist, ob Sie die Funktion erreichen und bedienen können.
Der Ablauf in zehn Minuten
Die Zeiten sind unser Vorschlag für einen kleinen Shop, keine Vorgabe. Bei jedem Schritt achten Sie auf dieselben vier Fragen: Erreiche ich es? Sehe ich den Fokus? Löst es aus? Komme ich wieder heraus? Schreiben Sie jede Stelle auf, an der eine Antwort Nein ist.
| Minute | Station | Was Sie tun | Woran Sie einen Fehler erkennen |
|---|---|---|---|
| 0 bis 1 | Cookie-Banner | Seite neu laden, Tab drücken. Banner erreichen, eine Auswahl treffen, Banner schließen | Banner sperrt die Seite, aber der Fokus landet trotzdem dahinter auf der Seite; Banner lässt sich nur per Maus schließen; das fokussierte Element ist vom Banner ganz verdeckt |
| 1 bis 2 | Kopfbereich | Erster Tab nach dem Banner: Erscheint ein Link wie „Zum Inhalt springen“? Enter drücken | kein Sprunglink oder anderer Weg, die Navigation zu überspringen; Sprunglink führt nirgendwohin |
| 2 bis 3 | Menü | Hauptmenü mit Tab erreichen, Untermenü öffnen (Enter, Leertaste oder Pfeiltasten), mit Esc schließen | Untermenü öffnet nur beim Darüberfahren mit der Maus; Untermenü lässt sich nicht schließen; Seite wechselt, sobald ein Menüpunkt nur den Fokus bekommt |
| 3 bis 4 | Suche | Suchfeld erreichen, Begriff tippen, Vorschläge mit Pfeiltasten wählen, Enter | Vorschlagsliste per Tastatur nicht erreichbar; Fokus springt beim Tippen weg |
| 4 bis 5 | Kategorie und Filter | Filter setzen, Sortierung ändern, Preisfilter einstellen | Filter nur per Klick; Schieberegler ohne Tastaturbedienung; Seite lädt beim Durchblättern einer Auswahlliste mit Pfeiltasten schon neu |
| 5 bis 7 | Produktseite | Bildergalerie durchblättern, Größe und Farbe wählen, Menge ändern, „In den Warenkorb“ auslösen | Farbfelder oder Größen nicht erreichbar; Fokus springt nach dem Hinzufügen an den Seitenanfang oder in die Fußzeile; Galerie ist eine Falle |
| 7 bis 8 | Mini-Warenkorb und Warenkorb | Mini-Warenkorb öffnen und mit Esc schließen, im Warenkorb Menge ändern, Artikel entfernen, Gutscheinfeld nutzen | Seitenleiste lässt sich nicht schließen oder Fokus bleibt dahinter auf der Seite; Entfernen-Kreuz nicht erreichbar |
| 8 bis 10 | Checkout bis zur Zahlungsauswahl | Formular ausfüllen, Lieferart und Zahlungsart wählen, Kontrollkästchen setzen, ein Pflichtfeld leer lassen und absenden | Fokus verschwindet hinter einer fest stehenden Kopfleiste; Zahlungsart nicht wählbar; eingebettetes Kartenfeld oder Zahlungsfenster lässt den Fokus nicht wieder heraus |
Unterwegs auftauchende Dialoge wie Newsletter-Popup, Chat-Fenster, Größenberater oder ein „Artikel hinzugefügt“-Fenster prüfen Sie dort, wo sie erscheinen: erreichen, bedienen, mit Esc oder einer Schließen-Schaltfläche verlassen, und danach prüfen, ob der Fokus an einer sinnvollen Stelle weitergeht.
Die Bestellung schicken Sie nicht ab. Den letzten Schritt bis zur Bestellbestätigung und jede Zahlungsart einzeln testen Sie besser in einem Testmodus Ihres Shops oder Zahlungsanbieters. Was im Checkout darüber hinaus zu prüfen ist, steht im Ratgeber Barrierefreier Checkout: Warenkorb und Kaufstrecke prüfen und beheben.
Was Sie sehen, welches Kriterium, wer es behebt
Die Kriterien und Stufen stammen aus den WCAG 2.2 in der Fassung vom 12. Dezember 2024 (gelesen am 20.10.2026). Die Spalte „Wer behebt es“ ist unsere Einschätzung für typische Shops; in Ihrem Fall kann die Zuständigkeit anders liegen, etwa wenn eine Agentur das Theme angepasst hat.
| Was Sie sehen | Kriterium (Stufe) | Wer behebt es meist |
|---|---|---|
| Ein Menüpunkt, eine Größe, ein Filter oder eine Zahlungsart lässt sich mit der Tastatur nicht erreichen oder nicht auslösen | 2.1.1 Tastatur (A) | Theme-Anbieter; bei Filtern, Bewertungen oder Zahlungsarten der Anbieter der App oder des Plugins |
| Sie kommen aus Banner, Popup, Galerie, Chat oder Zahlungsfeld nicht wieder heraus | 2.1.2 Keine Tastaturfalle (A) | Anbieter der jeweiligen App, des Plugins oder des Zahlungsdienstes |
| Kein Weg, Kopfbereich und Menü zu überspringen, oder der Sprunglink funktioniert nicht | 2.4.1 Blöcke umgehen (A) | Theme-Anbieter |
| Der Fokus springt unlogisch, etwa nach „In den Warenkorb“ in die Fußzeile, oder landet hinter einem geöffneten Dialog | 2.4.3 Fokus-Reihenfolge (A) | Theme-Anbieter oder Anbieter des Dialogs |
| Sie sehen nicht, welches Element gerade den Fokus hat | 2.4.7 Fokus sichtbar (AA) | Theme-Anbieter; Sie oder Ihre Agentur, wenn eigenes CSS den Fokusrahmen entfernt |
| Das fokussierte Element ist vollständig von Kopfleiste, Cookie-Banner oder Chat-Symbol verdeckt | 2.4.11 Fokus nicht verdeckt (Minimum) (AA) | Theme-Anbieter bei fester Kopfleiste; Anbieter von Cookie-Banner oder Chat |
| Die Seite wechselt oder ein Fenster öffnet sich, nur weil ein Element den Fokus bekommt | 3.2.1 Bei Fokus (A) | Theme-Anbieter oder App-Anbieter |
| Die Seite lädt neu oder springt zu einer anderen Variante, sobald Sie in einer Auswahlliste mit den Pfeiltasten etwas wählen, ohne Hinweis vorab | 3.2.2 Bei Eingabe (A) | Theme-Anbieter oder Anbieter des Filters |
| Ein Untermenü oder Tooltip, das beim Fokus erscheint, lässt sich nicht schließen, ohne den Fokus zu bewegen | 1.4.13 Eingeblendeter Inhalt bei Hover oder Fokus (AA) | Theme-Anbieter |
| Ein Preisfilter funktioniert nur durch Ziehen am Schieberegler | 2.1.1 Tastatur (A); für Maus und Touch zusätzlich 2.5.7 Ziehbewegungen (AA) | Theme-Anbieter oder Anbieter des Filters |
| Ein einzelner Buchstabe löst eine Aktion aus, etwa „S“ öffnet die Suche, während Sie in ein Feld tippen wollen | 2.1.4 Tastaturkürzel (A) | Anbieter der App oder des Themes |
Zwei Feinheiten, die oft falsch verstanden werden:
- Esc ist nicht vorgeschrieben. Kriterium 2.1.2 verlangt, dass Sie den Fokus mit der Tastatur wieder wegbewegen können. Braucht das mehr als die unveränderten Pfeil- oder Tabtasten oder andere übliche Wege, muss die Seite Ihnen sagen, wie es geht (2.1.2). Ein Dialog mit einer erreichbaren Schließen-Schaltfläche, der nicht auf Esc reagiert, ist nach unserer Lesart noch keine Tastaturfalle, aber unbequem.
- Teilweise verdeckt ist in Stufe AA kein Fehler. Kriterium 2.4.11 verlangt nur, dass das fokussierte Element nicht vollständig verdeckt ist (2.4.11). Das Understanding-Dokument zu 2.4.11 (gelesen am 20.10.2026) nennt fest stehende Kopf- und Fußleisten, nicht modale Dialoge wie ein Chat-Fenster und ausdrücklich ein Cookie-Banner als typische Ursachen.
Protokollvordruck
Kopieren Sie diese Tabelle in ein Dokument oder eine Tabellenkalkulation und füllen Sie sie bei jedem Test aus. Eine Zeile pro Station; bei mehreren Funden an einer Station eine Zeile pro Fund.
Kopfdaten: Datum: ______ · Geprüft von: ______ · Browser und Version: ______ · Betriebssystem: ______ · Theme und Version: ______ · Anlass (Erstprüfung, Update, neues Plugin): ______
| Station | Adresse der Seite | Erreichbar? | Fokus sichtbar? | Bedienbar? | Wieder heraus? | Fund in eigenen Worten | Kriterium | Zuständig | Behoben am |
|---|---|---|---|---|---|---|---|---|---|
| Cookie-Banner | ja / nein | ja / nein | ja / nein | ja / nein | |||||
| Kopfbereich und Sprunglink | ja / nein | ja / nein | ja / nein | ja / nein | |||||
| Menü | ja / nein | ja / nein | ja / nein | ja / nein | |||||
| Suche | ja / nein | ja / nein | ja / nein | ja / nein | |||||
| Kategorie und Filter | ja / nein | ja / nein | ja / nein | ja / nein | |||||
| Produktseite mit Varianten | ja / nein | ja / nein | ja / nein | ja / nein | |||||
| Mini-Warenkorb und Warenkorb | ja / nein | ja / nein | ja / nein | ja / nein | |||||
| Checkout bis Zahlungsauswahl | ja / nein | ja / nein | ja / nein | ja / nein | |||||
| Dialoge (Popup, Chat, Größenberater) | ja / nein | ja / nein | ja / nein | ja / nein |
So beschreiben Sie einen Fund, damit Ihre Agentur oder der Theme-Anbieter ihn nachstellen kann. Beispiel: „Produktseite Leinenkissen, Safari auf macOS: Nach Auswahl der Farbe mit der Leertaste springt der Fokus an den Seitenanfang. Kriterium 2.4.3.“ Nennen Sie Seite, Browser, die gedrückte Taste und was danach passiert ist.
Ein ausgefülltes Protokoll ist auch ein Beleg dafür, dass und wie Sie geprüft haben. Welche Unterlagen Sie darüber hinaus vorhalten sollten, steht im Ratgeber BFSG-Nachweis.
Wann Sie den Test wiederholen
Unsere Empfehlung: nach jedem Theme-Update, nach jeder neuen oder aktualisierten App und jedem Plugin, das im Shop etwas anzeigt, nach einem neuen Zahlungsanbieter und nach Änderungen am eigenen CSS. Der Durchgang ist dann schneller, weil Sie Ihre Notizen vom letzten Mal haben.
Ihr nächster Schritt
Machen Sie zusätzlich den kostenlosen Scan. Er prüft Startseite, Produktseite und Warenkorb automatisch gegen die WCAG-Regeln, ohne Konto, und zeigt, was zuerst behoben werden sollte. Den Tastaturtest ersetzt er nicht: Ob Sie den Kauf ohne Maus abschließen können, ob der Fokus sichtbar ist und ob Sie aus jedem Dialog wieder herauskommen, erkennt kein automatischer Scan zuverlässig. Beides zusammen ergibt ein vollständigeres Bild als jedes für sich.
Stand: 20.10.2026. Quellen gelesen am 20.10.2026.