Fehlende Tastaturzug\u00e4nglichkeit erkennt man, indem man eine Website ausschlie\u00dflich mit der Tabulatortaste, den Pfeiltasten und der Eingabetaste navigiert und dabei pr\u00fcft, ob alle interaktiven Elemente erreichbar, bedienbar und sichtbar fokussiert sind. Wer dabei auf Elemente st\u00f6\u00dft, 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\u00e4nglichkeit, manuelle Tests und geeignete Werkzeuge.<\/p>\n
Alle interaktiven Elemente einer Website m\u00fcssen per Tastatur erreichbar und bedienbar sein. Dazu z\u00e4hlen Links, Schaltfl\u00e4chen, Formulare, Dropdown-Men\u00fcs, Dialogfenster, Akkordeons, Schieberegler, Registerkarten und alle anderen Steuerelemente, mit denen Nutzerinnen und Nutzer eine Aktion ausl\u00f6sen oder Inhalte aufrufen k\u00f6nnen. Rein dekorative oder statische Inhalte m\u00fcssen hingegen nicht fokussierbar sein.<\/p>\n
Die Anforderung ergibt sich aus dem WCAG-Erfolgskriterium 2.1.1 (Tastatur, Konformit\u00e4tsstufe A): Alle Funktionalit\u00e4ten, die mit einer Maus ausgef\u00fchrt werden k\u00f6nnen, m\u00fcssen auch mit der Tastatur ausf\u00fchrbar sein. Das betrifft blinde Menschen, die keine Maus verwenden k\u00f6nnen, ebenso wie Menschen mit motorischen Einschr\u00e4nkungen, die auf Tastatur, Schaltersteuerung oder andere Eingabeger\u00e4te angewiesen sind.<\/p>\n
Konkret bedeutet das f\u00fcr h\u00e4ufige Website-Elemente:<\/p>\n
Den manuellen Test der Tastaturzug\u00e4nglichkeit f\u00fchren Sie durch, indem Sie die Maus beiseitelegen und die Website ausschlie\u00dflich mit der Tastatur bedienen. Die wichtigsten Tasten dabei sind Tab<\/strong> (n\u00e4chstes Element), Shift+Tab<\/strong> (vorheriges Element), Enter<\/strong> (Aktion ausl\u00f6sen oder Link folgen), Leertaste<\/strong> (Checkboxen, Schaltfl\u00e4chen) und die Pfeiltasten<\/strong> (Navigation in Men\u00fcs, Slidern, Radio-Gruppen).<\/p>\n Gehen Sie beim Test systematisch vor:<\/p>\n Wichtig: Der manuelle Test ist beim Barrierefreiheit testen<\/a> nicht ersetzbar. Automatisierte Werkzeuge k\u00f6nnen typischerweise nur 30 bis 50 Prozent aller Barrierefreiheitsprobleme erkennen. Tastaturzug\u00e4nglichkeit geh\u00f6rt zu den Bereichen, die h\u00e4ufig nur durch manuelles Testen zuverl\u00e4ssig aufgedeckt werden k\u00f6nnen.<\/p>\n 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\u00df gegen das WCAG-Erfolgskriterium 2.4.7 (Sichtbarer Fokus) zu tun.<\/p>\n H\u00e4ufig entsteht dieses Problem, weil Entwicklerinnen und Entwickler den Standard-Fokusrahmen des Browsers per CSS mit Achten Sie beim Test auf folgende Anzeichen:<\/p>\n 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\u00e4zisiert. Ein konformer Fokusindikator muss eine Mindestgr\u00f6\u00dfe und einen ausreichenden Kontrast aufweisen.<\/p>\n 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\u00e4tsstufe A) verbietet solche Fallen ausdr\u00fccklich.<\/p>\n Typische Szenarien, in denen Tastaturfallen auftreten:<\/p>\n Eine Tastaturfalle erkennen Sie, indem Sie w\u00e4hrend des manuellen Tests versuchen, jeden Bereich der Seite wieder zu verlassen. K\u00f6nnen 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\u00e4ngig variieren kann.<\/p>\n 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.<\/p>\n Automatisierte Werkzeuge wie Barrierefreiheitssoftware<\/a> auf Basis der Open-Source-Bibliothek axe-core pr\u00fcfen den HTML-Quellcode auf Konformit\u00e4t mit den WCAG-Regeln. Sie erkennen typischerweise Probleme wie fehlende ARIA-Attribute, falsch strukturierte Fokus-Reihenfolgen im Quellcode oder fehlende Tastaturunterst\u00fctzung bei bestimmten Elementtypen. Der Vorteil: Hunderte Seiten lassen sich in kurzer Zeit scannen. Der Nachteil: Ob ein Element tats\u00e4chlich per Tastatur erreichbar ist, l\u00e4sst sich oft nur durch manuelle Interaktion zuverl\u00e4ssig feststellen.<\/p>\n Erg\u00e4nzend empfehlen sich folgende Werkzeuge:<\/p>\n Die h\u00e4ufigsten Ursachen f\u00fcr fehlende Tastaturzug\u00e4nglichkeit sind CSS-Regeln, die den Fokusindikator unterdr\u00fccken, die Verwendung nicht semantischer HTML-Elemente f\u00fcr interaktive Steuerelemente sowie fehlende oder fehlerhafte ARIA-Implementierungen. Diese Fehler entstehen in der Regel nicht aus Absicht, sondern aus mangelndem Bewusstsein f\u00fcr die Anforderungen barrierefreier Webentwicklung.<\/p>\n Im Einzelnen sind folgende Ursachen besonders verbreitet:<\/p>\n Das Beheben dieser Ursachen erfordert keine grundlegende Neugestaltung einer Website. In vielen F\u00e4llen reichen gezielte Korrekturen in HTML und CSS aus, um die Tastaturzug\u00e4nglichkeit deutlich zu verbessern.<\/p>\n\n
Woran erkennt man einen fehlenden oder unsichtbaren Fokusindikator?<\/h2>\n
outline: none<\/code> oder outline: 0<\/code> unterdr\u00fccken, um das visuelle Design zu gl\u00e4tten. Das Ergebnis ist eine Seite, die f\u00fcr Mausnutzende optisch ansprechend wirkt, f\u00fcr Tastaturnutzende aber kaum bedienbar ist.<\/p>\n\n
Was ist eine Tastaturfalle und wie erkennt man sie?<\/h2>\n
\n
Welche Tools helfen beim Erkennen von Tastaturbarrieren?<\/h2>\n
Automatisierte Scan-Werkzeuge<\/h3>\n
Browser-Erweiterungen und manuelle Hilfsmittel<\/h3>\n
\n
Was sind die h\u00e4ufigsten Ursachen f\u00fcr fehlende Tastaturzug\u00e4nglichkeit?<\/h2>\n
\n
outline: none<\/code> im CSS entfernt den Fokusrahmen global, ohne einen gleichwertigen Ersatz zu definieren.<\/li>\n<div><\/code> oder <span><\/code> statt eines <button><\/code> als Schaltfl\u00e4che verwendet wird, ist das Element standardm\u00e4\u00dfig nicht per Tastatur fokussierbar und reagiert nicht auf Enter oder Leertaste.<\/li>\ntabindex<\/code>-Verwaltung:<\/strong> Benutzerdefinierte Widgets erhalten kein tabindex=\"0\"<\/code>, um in die Tab-Reihenfolge aufgenommen zu werden, oder erhalten tabindex=\"-1\"<\/code> ohne eine alternative Tastatursteuerung.<\/li>\nkeydown<\/code>, keyup<\/code>), sodass die Funktion per Maus, nicht aber per Tastatur ausl\u00f6sbar ist.<\/li>\nWie decareto beim Erkennen von Tastaturbarrieren unterst\u00fctzt<\/h2>\n