Blog

Wie erkennt man fehlende Tastaturzugänglichkeit auf einer Website?

Herausgegeben von Decareto

4 Minuten lesen

Oktober 15, 2026

Fehlende Tastaturzugänglichkeit erkennt man, indem man eine Website ausschließlich mit der Tabulatortaste, den Pfeiltasten und der Eingabetaste navigiert und dabei prüft, ob alle interaktiven Elemente erreichbar, bedienbar und sichtbar fokussiert sind. Wer dabei auf Elemente stößt, die sich nicht ansteuern lassen, keinen sichtbaren Fokusrahmen zeigen oder die Navigation blockieren, hat eine Tastaturbarriere gefunden. Dieser Artikel beantwortet die wichtigsten Fragen rund um Tastaturzugänglichkeit, manuelle Tests und geeignete Werkzeuge.

Welche Elemente einer Website müssen per Tastatur bedienbar sein?

Alle interaktiven Elemente einer Website müssen per Tastatur erreichbar und bedienbar sein. Dazu zählen Links, Schaltflächen, Formulare, Dropdown-Menüs, Dialogfenster, Akkordeons, Schieberegler, Registerkarten und alle anderen Steuerelemente, mit denen Nutzerinnen und Nutzer eine Aktion auslösen oder Inhalte aufrufen können. Rein dekorative oder statische Inhalte müssen hingegen nicht fokussierbar sein.

Die Anforderung ergibt sich aus dem WCAG-Erfolgskriterium 2.1.1 (Tastatur, Konformitätsstufe A): Alle Funktionalitäten, die mit einer Maus ausgeführt werden können, müssen auch mit der Tastatur ausführbar sein. Das betrifft blinde Menschen, die keine Maus verwenden können, ebenso wie Menschen mit motorischen Einschränkungen, die auf Tastatur, Schaltersteuerung oder andere Eingabegeräte angewiesen sind.

Konkret bedeutet das für häufige Website-Elemente:

Navigation und Menüs: Alle Menüpunkte, auch aufklappbare Untermenüs, müssen per Tastatur geöffnet und geschlossen werden können.
Formulare: Jedes Eingabefeld, jede Checkbox, jeder Radio-Button und jede Schaltfläche muss fokussierbar und bedienbar sein.
Modale Dialoge und Overlays: Der Fokus muss beim Öffnen in das Dialogfenster wandern und beim Schließen wieder an die ursprüngliche Stelle zurückkehren.
Karussells und Slider: Steuerelemente zum Vor- und Zurückblättern müssen per Tastatur bedienbar sein.
Consent-Banner: Alle Optionen im Cookie-Banner müssen ohne Maus auswählbar sein.

Wie testet man Tastaturzugänglichkeit manuell auf einer Website?

Den manuellen Test der Tastaturzugänglichkeit führen Sie durch, indem Sie die Maus beiseitelegen und die Website ausschließlich mit der Tastatur bedienen. Die wichtigsten Tasten dabei sind Tab (nächstes Element), Shift+Tab (vorheriges Element), Enter (Aktion auslösen oder Link folgen), Leertaste (Checkboxen, Schaltflächen) und die Pfeiltasten (Navigation in Menüs, Slidern, Radio-Gruppen).

Gehen Sie beim Test systematisch vor:

Startpunkt prüfen: Laden Sie die Seite und drücken Sie einmal Tab. Springt der Fokus auf ein sinnvolles erstes Element?
Alle interaktiven Elemente durchlaufen: Drücken Sie wiederholt Tab und beobachten Sie, ob jedes klickbare Element angesteuert wird und ob ein sichtbarer Fokusindikator erscheint.
Aktionen auslösen: Betätigen Sie Links, Schaltflächen und Formularelemente mit Enter oder Leertaste und prüfen Sie, ob die erwartete Aktion eintritt.
Modale Dialoge testen: Öffnen Sie Overlays und prüfen Sie, ob der Fokus hineingeleitet wird, ob alle Bedienelemente erreichbar sind und ob Escape das Fenster schließt.
Reihenfolge kontrollieren: Entspricht die Tab-Reihenfolge der visuellen Anordnung der Seite? Unerwartete Sprünge deuten auf Probleme im HTML-Quellcode hin.
Abschließend prüfen: Gibt es Stellen, an denen der Fokus verschwindet oder die Navigation steckenbleibt?

Wichtig: Der manuelle Test ist beim Barrierefreiheit testen nicht ersetzbar. Automatisierte Werkzeuge können typischerweise nur 30 bis 50 Prozent aller Barrierefreiheitsprobleme erkennen. Tastaturzugänglichkeit gehört zu den Bereichen, die häufig nur durch manuelles Testen zuverlässig aufgedeckt werden können.

Woran erkennt man einen fehlenden oder unsichtbaren Fokusindikator?

Einen fehlenden oder unsichtbaren Fokusindikator erkennt man daran, dass beim Navigieren mit der Tabulatortaste kein sichtbarer Rahmen, keine Hervorhebung und kein anderes visuelles Signal auf dem aktuell fokussierten Element erscheint. Wer beim Tabben durch eine Seite nicht sehen kann, welches Element gerade aktiv ist, hat es mit einem Verstoß gegen das WCAG-Erfolgskriterium 2.4.7 (Sichtbarer Fokus) zu tun.

Häufig entsteht dieses Problem, weil Entwicklerinnen und Entwickler den Standard-Fokusrahmen des Browsers per CSS mit outline: none oder outline: 0 unterdrücken, um das visuelle Design zu glätten. Das Ergebnis ist eine Seite, die für Mausnutzende optisch ansprechend wirkt, für Tastaturnutzende aber kaum bedienbar ist.

Achten Sie beim Test auf folgende Anzeichen:

Der Fokus scheint zu springen, ohne dass ein Element hervorgehoben wird.
Ein Element ist zwar fokussiert (erkennbar daran, dass Enter eine Aktion auslöst), aber visuell nicht von seinem Umfeld unterscheidbar.
Der Fokusindikator ist vorhanden, aber so schwach kontrastiert, dass er kaum wahrnehmbar ist.

WCAG 2.2 hat mit dem Erfolgskriterium 2.4.11 (Fokus nicht verdeckt, Minimum) und 2.4.12 (Fokus nicht verdeckt, Erweitert) die Anforderungen an Fokusindikatoren weiter präzisiert. Ein konformer Fokusindikator muss eine Mindestgröße und einen ausreichenden Kontrast aufweisen.

Was ist eine Tastaturfalle und wie erkennt man sie?

Eine Tastaturfalle ist eine Situation, in der der Tastaturfokus in einem Element oder Bereich einer Website gefangen bleibt und nicht mehr mit der Tabulatortaste oder anderen Standardtasten verlassen werden kann. Das WCAG-Erfolgskriterium 2.1.2 (Keine Tastaturfalle, Konformitätsstufe A) verbietet solche Fallen ausdrücklich.

Typische Szenarien, in denen Tastaturfallen auftreten:

Modale Dialoge ohne korrekte Fokusverwaltung: Der Dialog öffnet sich, aber der Fokus verbleibt hinter dem Overlay. Nutzerinnen und Nutzer tabben durch unsichtbare Elemente, ohne den Dialog bedienen oder schließen zu können.
Eingebettete Inhalte: Iframes oder eingebettete Karten (z. B. Google Maps) können den Fokus einfangen, sodass keine Möglichkeit besteht, sie per Tab zu verlassen.
Benutzerdefinierte Widgets: Selbst entwickelte Steuerelemente, die keine korrekte Tastaturinteraktion implementieren, können den Fokus blockieren.

Eine Tastaturfalle erkennen Sie, indem Sie während des manuellen Tests versuchen, jeden Bereich der Seite wieder zu verlassen. Können Sie ein Element nicht mit Tab, Shift+Tab oder Escape verlassen, liegt eine Tastaturfalle vor. Notieren Sie die betroffene Stelle und den verwendeten Browser, da das Verhalten browserabhängig variieren kann.

Welche Tools helfen beim Erkennen von Tastaturbarrieren?

Beim Erkennen von Tastaturbarrieren helfen sowohl automatisierte Scan-Werkzeuge als auch Browser-Erweiterungen und Screenreader. Kein einzelnes Werkzeug deckt alle Tastaturprobleme ab. Am wirkungsvollsten ist eine Kombination aus automatisiertem Scan und manuellem Test.

Automatisierte Scan-Werkzeuge

Automatisierte Werkzeuge wie Barrierefreiheitssoftware auf Basis der Open-Source-Bibliothek axe-core prüfen den HTML-Quellcode auf Konformität mit den WCAG-Regeln. Sie erkennen typischerweise Probleme wie fehlende ARIA-Attribute, falsch strukturierte Fokus-Reihenfolgen im Quellcode oder fehlende Tastaturunterstützung bei bestimmten Elementtypen. Der Vorteil: Hunderte Seiten lassen sich in kurzer Zeit scannen. Der Nachteil: Ob ein Element tatsächlich per Tastatur erreichbar ist, lässt sich oft nur durch manuelle Interaktion zuverlässig feststellen.

Browser-Erweiterungen und manuelle Hilfsmittel

Ergänzend empfehlen sich folgende Werkzeuge:

axe DevTools (Browser-Erweiterung): Analysiert die aktuelle Seite direkt im Browser und hebt Barrierefreiheitsprobleme im DOM hervor.
WAVE (Web Accessibility Evaluation Tool): Zeigt Fehler und Warnungen direkt auf der Seite an, einschließlich Hinweisen zu fehlenden Fokusindikatoren.
Screenreader (NVDA, JAWS, VoiceOver): Ermöglichen es, die Seite so zu erleben, wie blinde Nutzende sie wahrnehmen, und decken Probleme auf, die kein automatisierter Test findet.
Browsereigene Entwicklertools: Mit der Tab-Taste im Inspektor lässt sich die Fokus-Reihenfolge im DOM nachvollziehen.

Was sind die häufigsten Ursachen für fehlende Tastaturzugänglichkeit?

Die häufigsten Ursachen für fehlende Tastaturzugänglichkeit sind CSS-Regeln, die den Fokusindikator unterdrücken, die Verwendung nicht semantischer HTML-Elemente für interaktive Steuerelemente sowie fehlende oder fehlerhafte ARIA-Implementierungen. Diese Fehler entstehen in der Regel nicht aus Absicht, sondern aus mangelndem Bewusstsein für die Anforderungen barrierefreier Webentwicklung.

Im Einzelnen sind folgende Ursachen besonders verbreitet:

Unterdrückter Fokusindikator: outline: none im CSS entfernt den Fokusrahmen global, ohne einen gleichwertigen Ersatz zu definieren.
Falsche HTML-Elemente: Wenn ein <div> oder <span> statt eines <button> als Schaltfläche verwendet wird, ist das Element standardmäßig nicht per Tastatur fokussierbar und reagiert nicht auf Enter oder Leertaste.
Fehlende tabindex-Verwaltung: Benutzerdefinierte Widgets erhalten kein tabindex="0", um in die Tab-Reihenfolge aufgenommen zu werden, oder erhalten tabindex="-1" ohne eine alternative Tastatursteuerung.
Modale ohne Fokus-Trap: Dialoge werden geöffnet, ohne den Fokus aktiv in den Dialog zu leiten und dort zu halten, bis er geschlossen wird.
JavaScript-basierte Interaktionen ohne Tastatur-Event-Handler: Klick-Events werden implementiert, aber keine entsprechenden Keyboard-Events (keydown, keyup), sodass die Funktion per Maus, nicht aber per Tastatur auslösbar ist.
Dynamisch eingefügter Inhalt: Nach AJAX-Anfragen eingefügte Inhalte oder Benachrichtigungen erhalten keinen Fokus und sind für Tastaturnutzende unsichtbar.

Das Beheben dieser Ursachen erfordert keine grundlegende Neugestaltung einer Website. In vielen Fällen reichen gezielte Korrekturen in HTML und CSS aus, um die Tastaturzugänglichkeit deutlich zu verbessern.

Wie decareto beim Erkennen von Tastaturbarrieren unterstützt

Wir bei decareto bieten eine automatisierte Accessibility-Software, die Websites auf Barrierefreiheitsprobleme gemäß WCAG, BITV und den Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) prüft. Für die Erkennung von Tastaturbarrieren unterstützt unsere Plattform auf folgende Weise:

Automatisierter Scan auf Basis von axe-core: Wir prüfen den HTML-Quellcode jeder Unterseite auf Verstöße, die Tastaturzugänglichkeit verhindern oder erschweren, etwa fehlende ARIA-Attribute, falsch strukturierte Fokus-Reihenfolgen oder nicht semantische Elemente.
Priorisierung nach Schweregrad: Gefundene Probleme werden nach Kritikalität eingestuft, damit Sie wissen, welche Tastaturbarrieren zuerst behoben werden sollten.
Manuelle Problemerfassung ergänzbar: Da Tastaturzugänglichkeit zu den Bereichen gehört, die automatisierte Tests nur teilweise abdecken, können manuell gefundene Probleme direkt im Report erfasst und einem WCAG-Kriterium zugeordnet werden.
Dauerhafte Überwachung: Hunderte Websites lassen sich kontinuierlich überwachen. Bei Änderungen erhalten Sie automatische Benachrichtigungen, sodass neu entstandene Tastaturbarrieren frühzeitig auffallen.
Teilbare Reports: Berichte können direkt mit Kunden oder Entwicklungsteams geteilt werden, inklusive Whitelabel-Option für Agenturen.

Bitte beachten Sie: Ein guter Scan-Score ist eine wichtige Grundlage, ersetzt aber keine vollständige manuelle Prüfung. Automatisierte Tests decken typischerweise einen Teil der möglichen Barrierefreiheitsprobleme ab. Für eine umfassende Bewertung empfiehlt sich die Kombination aus automatisiertem Scan und manuellem Test, gegebenenfalls durch spezialisierte Dienstleister.

Möchten Sie Ihre Website auf Tastaturbarrieren und weitere Barrierefreiheitsprobleme prüfen? Jetzt decareto testen und in wenigen Minuten einen ersten Überblick erhalten.

Dieser Text wurde mit Hilfe von KI erstellt und könnte Fehler beinhalten.