Tastaturzugriff – Grundlagen

Rob Dodson

Viele verschiedene Nutzer verlassen sich auf die Tastatur, um in Anwendungen zu navigieren – von Nutzern mit vorübergehenden und dauerhaften motorischen Beeinträchtigungen bis hin zu Nutzern, die Tastenkombinationen verwenden, um effizienter und produktiver zu sein. Eine gut durchdachte Strategie für die Navigation per Tastatur in Ihrer Anwendung erleichtert allen Nutzern die Eingabe.

Fokus und Tab-Reihenfolge

Der Fokus bezieht sich zu einem bestimmten Zeitpunkt darauf, welches Element in Ihrer Anwendung (z. B. ein Feld, ein Kästchen, eine Schaltfläche oder ein Link) gerade Eingaben über die Tastatur empfängt. Neben Tastaturereignissen erhält das fokussierte Element auch Inhalte, die aus der Zwischenablage eingefügt werden.

Verwenden Sie TAB, um den Fokus auf einer Seite „vorwärts“ zu bewegen, und SHIFT + TAB, um den Fokus „rückwärts“ zu bewegen. Das aktuell fokussierte Element wird oft durch einen Fokusring gekennzeichnet. Die Darstellung von Fokusringen variiert je nach Browser. Die Reihenfolge, in der der Fokus vorwärts und rückwärts durch interaktive Elemente bewegt wird, wird als Tab-Reihenfolge bezeichnet.

Interaktive HTML-Elemente wie Textfelder, Schaltflächen und Auswahllisten sind implizit fokussierbar: Sie werden automatisch in die Tab-Reihenfolge eingefügt, basierend auf ihrer Position im DOM. Diese interaktiven Elemente haben auch eine integrierte Verarbeitung von Tastaturereignissen. Elemente wie Absätze und Divs sind nicht implizit fokussierbar, da Nutzer in der Regel nicht mit ihnen interagieren müssen.

Eine logische TAB-Reihenfolge ist wichtig, damit Nutzer die Tastatur problemlos zur Navigation verwenden können. Beim Bewerten und Anpassen der Tab-Reihenfolge sind zwei Hauptaspekte zu berücksichtigen:

  1. Elemente im DOM in logischer Reihenfolge anordnen
  2. Sichtbarkeit von Inhalten, die nicht im Fokus stehen sollen, richtig festlegen

Elemente im DOM in logischer Reihenfolge anordnen

Um zu prüfen, ob die Tab-Reihenfolge Ihrer Anwendung logisch ist, können Sie die Seite mit der Tabulatortaste durchgehen. Im Allgemeinen sollte der Fokus der Leserichtung folgen, also von links nach rechts und von oben nach unten auf der Seite.

Wenn die Fokusreihenfolge falsch erscheint, sollten Sie die Elemente im DOM neu anordnen, um die Tabulatorreihenfolge natürlicher zu gestalten. Wenn etwas visuell früher auf dem Bildschirm angezeigt werden soll, verschieben Sie es im DOM nach vorn.

Probieren Sie aus, mit der Tabulatortaste durch die beiden Schaltflächengruppen unten zu navigieren, um eine logische und eine unlogische Tabulatorreihenfolge zu erleben:

Logische Tab-Reihenfolge

Unlogische Tab-Reihenfolge

Der Code für diese beiden Beispiele wird unten verglichen:

Logische Tab-Reihenfolge

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

Unlogische Tab-Reihenfolge

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

Seien Sie vorsichtig, wenn Sie die visuelle Position von Elementen mit CSS ändern, um eine unlogische Tab-Reihenfolge zu vermeiden. Um die unlogische Tabulatorreihenfolge oben zu korrigieren, verschieben Sie die schwebende Schaltfläche „Kiwi“ so, dass sie im DOM nach der Schaltfläche „Coconut“ steht, und entfernen Sie den Inline-Stil.

Sichtbarkeit von Inhalten außerhalb des Bildschirms richtig festlegen

Manchmal müssen interaktive Elemente, die nicht auf dem Bildschirm zu sehen sind, im DOM vorhanden sein, sollten aber nicht in der Tab-Reihenfolge enthalten sein. Wenn Sie beispielsweise eine responsive Seitenleiste haben, die durch Klicken auf eine Schaltfläche geöffnet wird, sollte der Nutzer nicht auf die Seitenleiste fokussieren können, wenn sie geschlossen ist.

Wenn Sie verhindern möchten, dass ein bestimmtes interaktives Element den Fokus erhält, sollten Sie dem Element eine der folgenden CSS-Eigenschaften zuweisen:

  • display: none
  • visibility: hidden

Wenn Sie das Element wieder in die Tabulatorreihenfolge einfügen möchten, z. B. wenn die Seitennavigation geöffnet wird, ersetzen Sie die oben genannten CSS-Eigenschaften durch:

  • display: block
  • visibility: visible

Nächste Schritte

Für Nutzer, die ihren Computer fast ausschließlich mit der Tastatur oder einem anderen Eingabegerät bedienen, ist eine logische Tab-Reihenfolge unerlässlich, damit Ihre Anwendung zugänglich und nutzbar ist. Um die Tab-Reihenfolge zu überprüfen, sollten Sie vor jeder Veröffentlichung die Tabulatortaste in Ihrer Anwendung drücken.