Barrierefreiheit im Webdesign: Erfahre mehr über die Navigation mit Tastatur und wie Du Deine Website via Tabulatortaste navigierbar machst.
Nicht jeder Mensch steuert eine Website mit der Maus. Viele sind darauf angewiesen, ausschließlich die Tastatur zu nutzen – sei es wegen Einschränkungen in der Feinmotorik oder aufgrund einer Sehbehinderung.
Für sie ist die Tabulatortaste (↹, meist links neben dem Buchstaben Q) das wichtigste Werkzeug, um sich durch eine Website zu bewegen. Mit ihr springen Nutzer:innen von einem interaktiven Element zum nächsten, zum Beispiel zu Buttons, Formularfeldern oder Menüpunkten.
Aber auch Menschen ohne diese Beeinträchtigungen nutzen gerne mal die Tastatur zum Navigieren. Etwa, weil der kabellosen Maus der Saft ausgegangen ist oder das Laptoptrackpad Probleme macht; sie beim mobilen Arbeiten im Zug oder Flugzeug keinen Platz für eine Maus haben oder sie mit der Tastatur schlichtweg schneller zwischen den Felder eines Formulars hin- und herspringen wollen.
Inhalt
Navigation via Tastatur ist Voraussetzung
Damit Deine Website wirklich barrierefrei ist, muss sie sich vollständig mit der Tastatur bedienen lassen. Und das lässt sich ganz einfach testen: Rufe Deine Seite auf und navigiere ausschließlich mit der Tabulatortaste. Gelangst Du zu allen wichtigen Bereichen? Funktioniert alles, ohne die Maus zu benutzen? Wenn nicht, gibt es Handlungsbedarf.
So machst Du Deine Website mit der Tastatur bedienbar
Damit die Navigation wirklich nutzerfreundlich ist, solltest Du auf diese Punkte achten:
- Fokus Indikator: Das aktuell ausgewählte Element sollte immer klar sichtbar markiert sein. In der Regel sorgt der Browser dafür, doch zusätzliche Hervorhebungen im Design können die Orientierung verbessern.
Mit einfachem CSS kannst Du den Fokus zum Beispiel so gestalten:
So bleibt der Fokus deutlich sichtbar und fügt sich gleichzeitig harmonisch in Dein Design ein.:focus {
outline: 3px solid var(--primary-color);
outline-offset: 4px;'
border-radius: 4px;
} - Logische Tabreihenfolge: Die Reihenfolge, in der Nutzer:innen per Tabulator von Element zu Element springen, folgt der Struktur des HTML-Codes.
Das heißt: Der Browser geht von oben nach unten durch den Quellcode. Dies sollte dem natürlichen Lesefluss entsprechen – von oben nach unten, von links nach rechts. Wildes Hin- und Herspringen verwirrt und macht die Seite unbenutzbar.
Achte also darauf, dass Deine Inhalte auch im Mobile Layout in der gleichen logischen Reihenfolge angeordnet sind, wie sie visuell erscheinen.
Nur in Ausnahmefällen solltest Du den sogenanntentabindexmanuell setzen – das kann sonst schnell zu unvorhersehbarem Verhalten führen. Denn wildes Hin- und Herspringen verwirrt und macht die Seite unbenutzbar. - Skip Links: Links wie „Zum Hauptinhalt springen“ helfen, sich nicht bei jedem Seitenwechsel durch dieselben Navigationsbereiche klicken zu müssen.
Diese kannst Du, wenn Dein Theme es nicht von sich aus einbindet, im Headerbereich Deiner Website einbauen und mit CSS unsichtbar machen, bis sie den Fokus erhalten. So sehen sie nur diejenigen, die sie wirklich nutzen. - Tastenkombinationen nutzen: Viele Tastenkombinationen sind browserseitig festgelegt und funktionieren automatisch: Enter aktiviert Links und Buttons, die Leertaste funktioniert bei Buttons und Checkboxen, Pfeiltasten eignen sich für Menüs und Listen, Esc schließt Overlays (Pop-ups) oder Dialoge. Halte Dich an diese Konventionen – Nutzer:innen erwarten das so.
Am wichtigsten: Teste Deine Website regelmäßig, indem Du konsequent ohne Maus navigierst. Nur so findest Du heraus, ob Deine Seite für alle zugänglich ist.
Was Du vom Browser aus nicht steuern kannst – und was doch
Du kannst die Browsereinstellungen der Besucher:innen natürlich nicht beeinflussen. Aber Du kannst auf Deiner Seite die technischen und strukturellen Voraussetzungen schaffen, damit alles zuverlässig funktioniert – unabhängig vom Browser.
Achte darauf, dass:
- Dein HTML semantisch korrekt ist (z. B.
<button>für Buttons, nicht<div>), - Du keine Fokusrahmen entfernst (z. B. mit
outline: none;), - und Du regelmäßig mit der Tastatur und – wenn möglich – mit einem Screenreader testest.
So stellst Du sicher, dass Deine Website auch ohne Maus zugänglich und verständlich bleibt.
Fazit zur Navigation mit Tastatur
Barrierefreiheit bedeutet nicht nur, gesetzliche Anforderungen zu erfüllen, sondern Menschen wirklich mitzudenken. Wenn Du auf klare Strukturen, sichtbare Fokuszustände und eine logische Tabreihenfolge achtest, bist Du schon einen großen Schritt weiter.
Am besten: Teste Deine Website regelmäßig, indem Du konsequent ohne Maus navigierst. Nur so findest Du heraus, ob Deine Seite für alle zugänglich ist.
Weitere Beiträge rund um Accessibility & Barrierefreiheit auf Deiner Website
Lies auch die weiteren Artikel meiner Serie rund um Barrierefreiheit, um noch mehr praktische Tipps für ein zugängliches Webdesign zu erhalten.
2 Antworten
Hi Britta,
wie richte ich denn die Tabreihenfolge ein, wenn die bspw. nicht in der richtigen Reihenfolge ist? Welche zusätzlichen Markierungen empfiehlst du für bessere Barrierefreiheit? Wie stelle ich das ein, dass bei Tastenkombination xy das auch passiert, was du beschreibst?
Du schreibst ja, dass es vom Browser abhängig ist. Ich kann ja nicht die Browsereinstellungen der Betrachtenden einstellen, auf was muss ich dann achten/ bzw. kann ich von meiner Seite aus tun?
Arbeite auch mit Elementor.
Danke schon mal im Voraus 🙂 So viele Fragen…
Hallo Steffi,
das sind großartige Fragen, vielen Dank dafür 😊
Ich versuche sie mal Schritt für Schritt zu beantworten:
Tabreihenfolge
Das ist die Reihenfolge, in der die Elemente per Tabulator angesteuert werden. Diese ergibt sich grundsätzlich aus dem HTML-Aufbau Deiner Seite.
Das heißt:
Die Tabreihenfolge (also in welcher Reihenfolge man mit der Tabulatortaste durch die Seite springt) folgt genau dieser Quellcodestruktur – nicht zwingend der optischen Anordnung auf dem Bildschirm.
Aber: Elementor ändert dabei nicht automatisch die Lesereihenfolge im HTML.
Das heißt, wenn Du zum Beispiel eine zweite Spalte optisch links anordnest (per „Reihenfolge umkehren“ oder „Reverse Columns“ in den Einstellungen), dann sieht sie zwar links aus, steht aber im HTML-Code trotzdem an zweiter Stelle – und wird somit erst danach mit der Tab-Taste oder vom Screenreader angesprochen.
Zusätzliche Markierungen: Fokus Indikator
Standardmäßig zeigen Browser einen Fokusrahmen an (meist blau oder gestrichelt).
Für ein konsistentes Design kannst Du ihn aber bewusst mit CSS gestalten, um ihn sichtbar zu lassen, aber an Dein Design anzupassen.
Tastenkombinationen
Viele Tastenkombinationen funktionieren automatisch, weil sie vom Browser oder Betriebssystem vorgegeben sind:
Das sind quasi die verbreiteten Best Practices. Wichtig ist, dass Du nicht gegen diese bestehenden Konventionen arbeitest – also für Deine Website „ungewöhnliche“ Tastenbelegungen erzwingst (durch extra Einstellungen oder Code).
Andere Browser
Richtig, Du kannst die Browsereinstellungen der Nutzer:innen nicht ändern.
Aber Du kannst dafür sorgen, dass:
So stellst Du sicher, dass alle modernen Browser Deine Seite barrierefrei darstellen.
Ich werde den Artikel oben mit den Infos ergänzen und habe schon eine Idee für einen neuen Blogartikel, wie man bestimmte Dinge explizit mit Elementor umsetzt 😉
Liebe Grüße,
Britta