Viele verschiedene Nutzer verlassen sich bei der Navigation in Anwendungen auf die Tastatur – 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 auf das Element in Ihrer Anwendung, das gerade Eingaben von einer Tastatur empfängt, z. B. ein Feld, ein Kästchen, eine Schaltfläche oder ein Link. 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 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 Ihre Website problemlos mit der Tastatur bedienen können. Bei der Bewertung und Anpassung der Tab-Reihenfolge sind zwei Hauptaspekte zu berücksichtigen:
- Elemente im DOM in logischer Reihenfolge anordnen
- Sichtbarkeit von Inhalten, die nicht im Blickfeld sind und keinen Fokus erhalten 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 Sie die visuelle Anordnung auf Ihrer Website ändern möchten, verschieben Sie das Element im DOM nach vorn, anstatt es mit CSS nach vorn zu formatieren.
Beispiel:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
Seien Sie vorsichtig, wenn Sie die visuelle Position von Elementen mit CSS ändern, um eine unlogische Tabulatorreihenfolge zu vermeiden. Um die unlogische Tab-Reihenfolge zu korrigieren, haben wir die schwebende Schaltfläche „Kiwi“ nach „Coconut“ verschoben und den Inline-Stil entfernt.
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, sie sollten aber nicht in der Tab-Reihenfolge enthalten sein. Wenn Sie beispielsweise eine responsive Navigation haben, die durch Klicken auf eine Schaltfläche in einer Seitenleiste geöffnet wird, sollte der Nutzer nicht auf die Navigation 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: nonevisibility: hidden
Wenn Sie das Element wieder in die Tabulatorreihenfolge einfügen möchten, z. B. wenn die Navigation geöffnet ist, ersetzen Sie diese CSS-Eigenschaften durch:
display: blockvisibility: 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. Es empfiehlt sich, die Tab-Reihenfolge vor jeder Veröffentlichung zu prüfen.