Kompatibilität:

WebSite X5 Evo und Pro ab v.2025.1

Die Navigation auf einer Website sollte für alle Benutzer einfach und intuitiv sein. Leider können nicht alle Benutzer eine Maus zur Navigation verwenden, und wenn eine Website keine Alternativen bietet, können einige Nutzer blockiert werden.


Für Menschen mit motorischen Einschränkungen oder Benutzer, die einen Screenreader verwenden, ist die Tastatur das einzige verfügbare Navigationswerkzeug. Wenn eine Website nicht für die Tastaturnavigation optimiert ist, können diese Benutzer möglicherweise nicht auf Inhalte zugreifen oder wesentliche Aktionen wie das Ausfüllen eines Formulars oder das Klicken auf eine Schaltfläche ausführen.


Gleichzeitig kann die Tastaturnavigation für alle Nutzer von Vorteil sein: Denken Sie an jemanden, dessen Maus nicht funktioniert, an Benutzer, die die Tastatur für schnellere Aktionen bevorzugen, oder an Personen, die auf einem Laptop mit einem ungenauen Touchpad surfen. Eine gut strukturierte Website ermöglicht eine reibungslose und intuitive Navigation und verbessert das Nutzererlebnis für alle.


In dieser Anleitung erklären wir, warum die Tastaturnavigation für die Barrierefreiheit im Web so wichtig ist, und konzentrieren uns auf:


Warum ist die Tastaturnavigation wichtig?

Die Tastaturnavigation ist eine der wichtigsten Funktionen für die Barrierefreiheit einer Website. Wie bereits erwähnt, können nicht alle Nutzer eine Maus oder ein Touchpad verwenden, und für einige ist die Tastatur das einzige verfügbare Werkzeug, um sich durch Inhalte zu bewegen und mit Webseiten zu interagieren.


Zu den Menschen, die am meisten auf die Tastaturnavigation angewiesen sind, gehören:

  • Nutzer mit motorischen Einschränkungen → Personen mit Mobilitätseinschränkungen, wie beispielsweise Menschen mit Lähmungen oder Zittern, können möglicherweise keine Maus präzise verwenden. Die Tastatur wird daher zu ihrem Hauptwerkzeug für den Zugriff auf das Internet.
  • Blinde oder sehbehinderte Nutzer → Personen, die Screenreader verwenden, interagieren hauptsächlich über die Tastatur mit Websites und navigieren durch Inhalte mithilfe spezieller Befehle der unterstützenden Software.
  • Nutzer mit vorübergehenden Einschränkungen oder in besonderen Situationen → Jemand mit einem gebrochenen Arm, einem defekten Touchpad oder der Arbeit an einem externen Monitor ohne Maus könnte auf die Tastatur angewiesen sein.


Eine Website, die keine Tastaturnavigation unterstützt, läuft Gefahr, eine bedeutende Anzahl von Nutzern auszuschließen, den Zugang zu Inhalten einzuschränken und die Qualität des Online-Erlebnisses zu verringern.


Wie funktioniert die Tastaturnavigation?

Wie man sich leicht vorstellen kann, ermöglicht die Tastaturnavigation das Bewegen durch den Inhalt einer Website, ohne eine Maus zu verwenden – stattdessen kommen ausschließlich Tastaturbefehle zum Einsatz.


Das wichtigste Navigationswerkzeug ist die TAB-Taste: Durch Drücken der Taste kann der Nutzer zwischen interaktiven Elementen auf der Seite wechseln, wie z. B. Links, Schaltflächen, Eingabefelder und Menüs. Die Reihenfolge, in der diese Elemente durchlaufen werden, wird durch die Struktur des HTML-Codes bestimmt und folgt idealerweise einem logischen und mit dem visuellen Layout der Seite übereinstimmenden Fluss.


Neben der TAB-Taste sind weitere wichtige Tasten für die Navigation:

  • Shift + TAB → Wechselt zum vorherigen Element.
  • Enter → Aktiviert Links und Schaltflächen.
  • Leertaste → Wählt Kontrollkästchen aus und aktiviert einige interaktive Elemente.
  • Pfeil nach oben / Pfeil nach unten → Navigiert durch Dropdown-Menüs oder Mehrfachauswahl-Elemente.
  • Esc → Schließt modale Fenster, Dropdown-Menüs oder Pop-ups.


Wenn ein Nutzer mit der Tastatur navigiert, erhält jedes auswählbare Element einen Fokus, eine visuelle Markierung, die anzeigt, welches Element aktuell ausgewählt ist. Eine gut gestaltete Website stellt sicher, dass der Fokus stets sichtbar und deutlich erkennbar ist, sodass der Nutzer genau nachvollziehen kann, wo er sich auf der Seite befindet.


Wichtige WCAG-Richtlinien für die Tastaturnavigation

Die Web Content Accessibility Guidelines (WCAG) definieren verschiedene Kriterien, um sicherzustellen, dass eine Website vollständig zugänglich für Nutzer ist, die ausschließlich mit der Tastatur navigieren. Nachfolgend die wichtigsten Richtlinien:

  • Kriterium 2.1.1 – Tastaturzugänglichkeit (Level A)

Eine Website muss vollständig mit der Tastatur bedienbar sein, ohne dass Maus-abhängige Interaktionen erforderlich sind, wie z. B. Ziehen oder Aktionen, die ausschließlich mit dem Zeiger ausgeführt werden. Alle interaktiven Elemente – Links, Schaltflächen, Formulare und Menüs – müssen mit den Standard-Tastaturbefehlen wie TAB, Enter und Leertaste bedienbar sein.

  • Kriterium 2.1.2 – Keine Tastaturfallen (Level A)

Nutzer müssen sich frei innerhalb einer Webseite bewegen können, ohne in einer bestimmten Sektion „gefangen“ zu bleiben. Dieses Problem tritt auf, wenn eine Website verhindert, dass der Fokus über ein modales Fenster oder ein interaktives Widget hinaus verschoben wird, wodurch eine Fortsetzung der Navigation unmöglich wird. Um dies zu vermeiden, muss es jederzeit möglich sein, jede Sektion der Seite durch Drücken der TAB- oder ESC-Taste zu verlassen.

  • Kriterium 2.4.3 – Fokusreihenfolge (Level A)

Die Reihenfolge der Navigation mit der TAB-Taste muss einer logischen Sequenz folgen, die der visuellen Struktur der Seite entspricht. Wenn ein Formular beispielsweise die Felder „Vorname“, „Nachname“ und „E-Mail“ enthält, sollte die Tastaturnavigation diese Reihenfolge beibehalten, ohne Elemente zu überspringen oder den Benutzer zu verwirren.

  • Kriterium 2.4.7 – Sichtbarer Fokus (Level AA)

Jedes aktive Element muss eine klare visuelle Markierung haben, die zeigt, wo sich der Nutzer auf der Seite befindet. Der Fokus kann durch einen sichtbaren Rahmen, einen Schatten oder eine Farbänderung hervorgehoben werden, um eine intuitive Navigation zu ermöglichen. Falls eine Website keine deutliche Fokusanzeige bietet, könnten sich Benutzer orientierungslos fühlen und nicht weiter navigieren können.


Es ist offensichtlich, dass die Einhaltung dieser Kriterien die Benutzererfahrung verbessert und sicherstellt, dass die Navigation für alle Menschen zugänglich ist – unabhängig von motorischen Fähigkeiten oder dem verwendeten Gerät.


Tools zur Überprüfung der Tastaturnavigation

Wenn die Tastaturnavigation nicht korrekt implementiert ist, können Nutzer, die keine Maus verwenden können oder möchten, auf Probleme stoßen. Um dies zu vermeiden, ist es entscheidend, die Tastaturnavigation zu testen und sicherzustellen, dass alle interaktiven Elemente zugänglich sind.


Es gibt verschiedene Tools und Methoden zur Überprüfung, aber eine der einfachsten und direktesten Methoden ist der manuelle Test. Dazu reicht es, die Maus zu deaktivieren und die Website ausschließlich mit der Tastatur zu navigieren. Insbesondere sollten folgende Tests durchgeführt werden:

  • Drücken Sie die TAB-Taste, um zu überprüfen, ob alle interaktiven Elemente erreichbar sind.
  • Nutzen Sie Shift + TAB, um rückwärts zu navigieren und sicherzustellen, dass die Reihenfolge logisch ist.
  • Drücken Sie Enter oder die Leertaste auf Links und Schaltflächen, um sicherzustellen, dass sie korrekt aktiviert werden.
  • Stellen Sie sicher, dass der Fokus immer sichtbar ist und nicht zwischen den Seitenelementen verloren geht.
  • Öffnen und schließen Sie modale Fenster oder Menüs, um zu prüfen, ob der Fokus an den Ausgangspunkt zurückkehrt.


Zusätzlich zum manuellen Testen können Sie automatisierte Tools nutzen, um mögliche Probleme mit der Tastaturnavigation zu identifizieren. Zu den verfügbaren Tools gehören:

  • WAVE (Web Accessibility Evaluation Tool) → Analysiert die Website und meldet Barrierefreiheitsprobleme, einschließlich solcher, die mit der Tastaturnavigation zusammenhängen.
  • Axe DevTools → Eine Browser-Erweiterung, die Fokusfehler erkennt und Lösungen vorschlägt.
  • Chrome DevTools – Accessibility Pane → Bietet eine detaillierte Analyse der interaktiven Elemente und ihrer Fokushandhabung.

WebSite X5 und die Tastaturnavigation

Eine zugängliche Tastaturnavigation erfordert Aufmerksamkeit für verschiedene technische Aspekte und die Erstellung von semantisch korrektem Code.


WebSite X5 generiert sauberen und semantischen HTML-Code, optimiert die Tastaturnavigation, ohne dass manuelle Anpassungen erforderlich sind. Konkret bedeutet das:

  • Die Tabulator-Reihenfolge ist korrekt definiert, um einen logischen Ablauf zwischen interaktiven Elementen zu gewährleisten.
  • Der Fokus ist immer sichtbar und folgt einem klaren Pfad innerhalb der Seite.
  • Dynamische Elemente, wie Menüs oder Pop-ups, sind so konfiguriert, dass der Fokus korrekt verschoben und an die ursprüngliche Position zurückgeführt wird.
  • Die Standardeinstellungen entsprechen den WCAG-Richtlinien, sodass die Website auch für Screenreader-Nutzer und Personen, die ausschließlich mit der Tastatur navigieren, zugänglich ist.


#Tipp - Weitere Informationen finden Sie unter Barrierefreiheitskriterien in WebSite X5