Viele verschiedene Nutzer nutzen 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 arbeiten. Eine gute Strategie für die Tastaturnavigation in Ihrer Anwendung sorgt für eine bessere Nutzererfahrung.
Fokus und Tab-Reihenfolge
Der Fokus bezieht sich in einem bestimmten Moment darauf, welches Element in Ihrer Anwendung (z. B. ein Feld, ein Kästchen, eine Schaltfläche oder ein Link) derzeit Eingaben von der Tastatur erhält. Das Element mit dem Fokus empfängt nicht nur Tastaturereignisse, sondern auch Inhalte, die aus der Zwischenablage eingefügt werden.
Wenn Sie den Fokus auf einer Seite verschieben möchten, verwenden Sie TAB
, um vorwärts und SHIFT + TAB
, um rückwärts zu gehen. Das aktuell fokussierte Element wird oft durch einen Fokusring angezeigt. Die verschiedenen Browser gestalten ihre Fokusringe unterschiedlich. Die Reihenfolge, in der der Fokus vor- und zurück durch interaktive Elemente springt, wird als Tabulatorreihenfolge bezeichnet.
Interaktive HTML-Elemente wie Textfelder, Schaltflächen und Auswahllisten sind implizit fokussierbar: Sie werden basierend auf ihrer Position im DOM automatisch in die Tabulatorreihenfolge eingefügt. Diese interaktiven Elemente haben auch eine integrierte Tastaturereignisbehandlung. Elemente wie Absätze und Divs können nicht implizit fokussiert werden, da Nutzer normalerweise nicht mit ihnen interagieren müssen.
Die Implementierung einer logischen Tab-Reihenfolge ist ein wichtiger Schritt, um Nutzern eine reibungslose Tastaturnavigation zu ermöglichen. Bei der Bewertung und Anpassung der Tab-Reihenfolge sollten Sie zwei Hauptaspekte berücksichtigen:
- Elemente im DOM in einer logischen Reihenfolge anordnen
- Sichtbarkeit von Inhalten außerhalb des Bildschirms richtig festlegen, die nicht in den Fokus rücken sollen
Elemente im DOM in einer logischen Reihenfolge anordnen
Wenn Sie prüfen möchten, ob die Tab-Reihenfolge Ihrer Anwendung logisch ist, wechseln Sie mit der Tabulatortaste durch die Seite. Im Allgemeinen sollte der Fokus der Lesereihenfolge 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 ein Element visuell weiter oben auf dem Bildschirm erscheinen soll, verschieben Sie es im DOM nach oben.
Probieren Sie die beiden Schaltflächengruppen unten aus, um die logische und die unlogische Tabulatorreihenfolge zu sehen:
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>
Achten Sie darauf, die visuelle Position von Elementen mit CSS nicht zu ändern, um eine unlogische Tabulatorreihenfolge 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 „Kokosnuss“ kommt, und entfernen Sie den Inline-Stil.
Sichtbarkeit von Inhalten außerhalb des Bildschirms richtig festlegen
Manchmal müssen interaktive Elemente außerhalb des Bildschirms im DOM enthalten sein, aber nicht in der Tab-Reihenfolge. Wenn Sie beispielsweise eine responsive Seitenleiste haben, die sich öffnet, wenn Sie auf eine Schaltfläche klicken, sollte der Nutzer die Seitenleiste nicht 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 Tab-Reihenfolge aufnehmen möchten, z. B. wenn die Seitenleiste geöffnet ist, ersetzen Sie die oben genannten CSS-Eigenschaften durch Folgendes:
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, um Ihre Anwendung barrierefrei und nutzerfreundlich zu gestalten. Um die Tab-Reihenfolge zu prüfen, sollten Sie vor jeder Veröffentlichung durch Ihre Anwendung tabben.