Was ist Tastaturnavigation?
UnterTastaturnavigation versteht man die Möglichkeit, auf einer Website oder in einer Webanwendung nur mit der Tastatur zu navigieren und zu interagieren, ohne eine Maus zu benötigen. Diese Funktionalität ist für Benutzer, die nur die Tastatur benutzen, von entscheidender Bedeutung, z. B. für Menschen mit motorischen Behinderungen, Sehbehinderungen oder Menschen, die unterstützende Technologien verwenden.
Häufig verwendete Tastaturtasten:
- Tabulator - Vorwärtsbewegung durch interaktive Elemente
- Umschalttaste + Tabulator - Rückwärtsbewegung
- Enter - Schaltflächen oder Links aktivieren
- Pfeiltasten - Scrollen oder Bewegen in Menüs
- Leertaste - Umschalten von Kontrollkästchen oder Schaltflächen
Beispiel: Ein Benutzer drückt die Tabulatortaste, um vom Suchfeld zum Navigationsmenü zu wechseln, und drückt dann die Eingabetaste, um ein Dropdown-Menü zu aktivieren.
Warum die Tastaturnavigation für die Barrierefreiheit im Web wichtig ist
Die Barrierefreiheit von Tastaturen ist eine Kernanforderung der WCAG (Web Content Accessibility Guidelines) und wird durch Gesetze wie:
- ADA (Amerikanisches Gesetz für Menschen mit Behinderungen) in den U.S.A.
- BFSG (Barrierefreiheitsstärkungsgesetz) in Deutschland
- EN 301 549 in der EU
Nach den WCAG 2.1 muss jeder Nutzer in der Lage sein, alle Funktionalitäten nur mit einer Tastatur zu bedienen. Dazu gehören Navigation, Formulareingaben, Dropdowns, Modals, Schieberegler und Menüs.
Ohne Tastaturunterstützung ist Ihre Website nicht barrierefrei und möglicherweise nicht rechtskonform.
Wie man die Tastaturnavigation unterstützt (TYPO3, WordPress & mehr)
Wenn Sie mit TYPO3, WordPress oder einem anderen CMS arbeiten, erfahren Sie hier, wie Sie Ihre Website tastaturfreundlich gestalten können:
- ✅Verwenden Sie semantisches HTML - Elemente wie <button>, <a>, <input> sind natürlich für die Tastatur zugänglich.
- ✅Behalten Sie eine logische Tabulatorreihenfolge bei - Strukturieren Sie Ihr Layout so, dass die Tabulatoren einem natürlichen, intuitiven Fluss folgen.
- ✅Verwenden Sie :focus-Stile - Zeigen Sie immer einen sichtbaren Indikator (wie einen Umriss), wenn ein Element fokussiert ist.
- ✅Vermeiden Sie tabindex="-1", es sei denn, es ist notwendig. - Damit werden Elemente aus der Tabulatorreihenfolge entfernt.
- ✅TYPO3-Tipp: Verwenden Sie barrierefreie Vorlagen und die Accesstive Extension, um die Navigation zu überprüfen.
- ✅WordPress-Tipp: Wählen Sie "barrierefreie" Themes und testen Sie die Navigation nur mit einer Tastatur.
Testen Sie immer ohne Maus, um eine vollständige Interaktion zu gewährleisten, von der Navigation bis zur Eingabe von Formularen.
Häufige Fehler und Missverständnisse
Hier sind die häufigsten Fehler, die es zu vermeiden gilt:
❌ “Wenn es mit der Maus funktioniert, ist es in Ordnung.”
✔️ Nein. Maus benutzer und reine Tastatur benutzer erleben Websites unterschiedlich. Barrierefreiheit erfordert beides.
❌ “Tastaturbenutzer sind eine kleine Gruppe.”
✔️ Stimmt nicht. Viele Benutzer sind aufgrund von Verletzungen, Behinderungen oder Vorlieben vorübergehend oder dauerhaft auf die Tastatur angewiesen.
❌ “Tabbing ist nur für Formulare.”
✔️ Falsch. Alle interaktiven Inhalte, einschließlich Menüs, Modals und Schieberegler, müssen über die Tastatur zugänglich sein.
Verwandte Einträge erforschen: Web Barrierefreiheit , Fokus management, Screen Reader, ARIA, WCAG
Das Wichtigste zum Mitnehmen
Wenn Ihre Website nicht mit einer Tastatur bedient werden kann, ist sie nicht zugänglich. Die Tastaturnavigation ist für die digitale Integration und die Einhaltung der Barrierefreiheit vorschriften unerlässlich. Indem Sie Ihre Website mit Blick auf Tastatur Benutzer gestalten, schaffen Sie ein besseres Erlebnis für alle.
Ist Ihre Website wirklich tastatur freundlich?
Führen Sie eine vollständige Prüfung der Tastatur Barrierefreiheit mit dem T3AA Accessibility Analyzer durch, oder sehen Sie sich unsere Tastaturnavigations-Checkliste für Entwickler und Designer an.Barrierefreiheit beginnt mit einer Registerkarte. Übersehen Sie ihn nicht.