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 gute Strategie für die Tastaturnavigation in Ihrer App sorgt für eine bessere Nutzererfahrung.
Fokus und TAB-Reihenfolge
Zu einem bestimmten Zeitpunkt bezieht sich Fokus darauf, welches Element in Ihrer Anwendung, z. B. ein Feld, ein Kästchen, eine Schaltfläche oder ein Link, derzeit Eingaben von der Tastatur empfängt. Das fokussierte Element empfängt nicht nur Tastaturereignisse, sondern auch Inhalte, die aus der Zwischenablage eingefügt wurden.
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 ist oft durch einen Fokusring gekennzeichnet und die Fokusringe in den verschiedenen Browsern werden unterschiedlich gestaltet. Die Reihenfolge, in der der Fokus vorwärts und rückwärts durch interaktive Elemente verläuft, wird als Tab-Reihenfolge bezeichnet.
Interaktive HTML-Elemente wie Textfelder, Schaltflächen und Auswahllisten sind implizit fokussierbar: Sie werden basierend auf ihrer Position im DOM automatisch in die Tab-Reihenfolge eingefügt. Diese interaktiven Elemente verfügen auch über eine integrierte Tastaturereignisverarbeitung. 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 wichtig, um Ihren Nutzern eine reibungslose Tastaturnavigation zu bieten. Bei der Bewertung und Anpassung der Tab-Reihenfolge sollten Sie Folgendes beachten:
- Elemente im DOM in logischer Reihenfolge anordnen
- Stellen Sie die Sichtbarkeit von Inhalten, die nicht im Fokus sind, korrekt ein
Elemente im DOM in logischer Reihenfolge anordnen
Wenn Sie prüfen möchten, ob die TAB-Reihenfolge Ihrer Anwendung logisch ist, wechseln Sie mit der Tabulatortaste durch Ihre Seite. Im Allgemeinen sollte der Fokus der Lesereihenfolge folgen, d. h. von links nach rechts, von oben nach unten auf der Seite.
Wenn die Fokusreihenfolge falsch erscheint, sollten Sie die Elemente im DOM neu anordnen, um die Tab-Reihenfolge natürlicher zu gestalten. Wenn Sie möchten, dass etwas früher auf dem Bildschirm angezeigt wird, verschieben Sie es im DOM weiter nach vorn.
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>
Seien Sie vorsichtig, wenn Sie die visuelle Position von Elementen mithilfe von CSS ändern, um eine unlogische TAB-Reihenfolge zu vermeiden. Um die obige unlogische TAB-Reihenfolge zu korrigieren, verschieben Sie die unverankerte Schaltfläche „Kiwi“ im DOM nach der Schaltfläche „Coconut“ (Kokosnuss) und entfernen Sie den Inline-Style.
Sichtbarkeit von nicht sichtbaren Inhalten richtig einstellen
Manchmal müssen sich nicht sichtbare interaktive Elemente im DOM befinden, sollten aber nicht in der TAB-Reihenfolge vorliegen. 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 fokussieren, wenn sie geschlossen ist.
Um zu verhindern, 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 einfügen möchten, z. B. wenn die seitliche Navigationsleiste geöffnet ist, ersetzen Sie die obigen 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, um die Anwendung zugänglich und nutzbar zu machen. Es empfiehlt sich, die Tab-Reihenfolge vor jeder Veröffentlichung mit der Tabulatortaste zu überprüfen.