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 Tabreihenfolge
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, gehen Sie mit TAB nach vorn und mit SHIFT + TAB nach „zurück“. 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 div-Elemente sind nicht implizit fokussierbar, 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, gehen Sie mit der Tabulatortaste durch Ihre 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 optisch weiter oben auf dem Bildschirm erscheinen soll, verschieben Sie es im DOM nach oben.
Versuchen Sie, mit der Tabulatortaste durch die beiden Gruppen von Schaltflächen unten zu wechseln, um eine logische TAB-Reihenfolge anstelle einer unlogischen TAB-Reihenfolge 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 seitliche Navigationsleiste haben, die sich öffnet, wenn Sie auf eine Schaltfläche klicken, sollte der Nutzer nicht in der Lage sein, sich auf die seitliche Navigationsleiste zu konzentrieren, 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 Tab-Reihenfolge aufnehmen möchten, z. B. wenn die Seitenleiste geöffnet ist, ersetzen Sie die oben genannten CSS-Eigenschaften durch Folgendes:
display: blockvisibility: visible
Nächste Schritte
Für Nutzer, die ihren Computer fast ausschließlich über die Tastatur oder ein anderes 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.