Viele verschiedene Nutzer verwenden die Tastatur für die Navigation in Anwendungen – von Nutzern mit vorübergehenden und dauerhaften motorischen Einschränkungen bis hin zu Nutzern, die Tastenkombinationen verwenden, um effizienter und produktiver zu sein. Mit einer guten Tastaturnavigationsstrategie für Ihre App können alle Beteiligten profitieren.
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) derzeit Eingabe von der Tastatur empfängt. Das fokussierte Element erhält nicht nur Tastaturereignisse, sondern auch Inhalte, die aus der Zwischenablage eingefügt wurden.
Um den Fokus auf eine Seite zu verschieben, verwenden Sie TAB, um vorwärts zu navigieren, und SHIFT + TAB, um zurückzugehen. Das aktuell fokussierte Element wird oft durch einen Fokusring gekennzeichnet, dessen Design in verschiedenen Browsern unterschiedlich gestaltet ist. Die Reihenfolge, in der der Fokus durch interaktive Elemente vor- und zurückverfolgt, wird als Tab-Reihenfolge bezeichnet.
Interaktive HTML-Elemente wie Textfelder, Schaltflächen und Auswahllisten sind implizit fokussierbar: Sie werden automatisch anhand ihrer Position im DOM in die Tabreihenfolge eingefügt. Diese interaktiven Elemente verfügen auch über eine integrierte Tastaturereignisverarbeitung. Elemente wie Absätze und Divs sind nicht implizit fokussierbar, da Nutzer normalerweise nicht mit ihnen interagieren müssen.
Die Implementierung einer logischen TAB-Reihenfolge ist ein wichtiger Bestandteil einer reibungslosen Navigation über die Tastatur. Es gibt zwei Hauptideen, die Sie beim Bewerten und Anpassen Ihrer TAB-Reihenfolge im Hinterkopf behalten sollten:
- Elemente im DOM in einer logischen Reihenfolge anordnen
- Stellen Sie die Sichtbarkeit von nicht sichtbaren Inhalten, die nicht im Fokus stehen,
Elemente im DOM in einer logischen Reihenfolge anordnen
Wenn Sie prüfen möchten, ob die TAB-Reihenfolge in der Anwendung logisch ist, können Sie mit der Tabulatortaste durch Ihre Seite navigieren. Im Allgemeinen sollte der Fokus der Lesereihenfolge folgen, also von links nach rechts und vom oberen zum unteren Ende der Seite.
Wenn die Fokusreihenfolge falsch erscheint, sollten Sie die Elemente im DOM neu anordnen, um die TAB-Reihenfolge natürlicher zu gestalten. Wenn etwas früher auf dem Bildschirm angezeigt werden soll, verschieben Sie es im DOM nach oben.
Versuchen Sie, mit der Tabulatortaste durch die beiden folgenden Schaltflächensätze zu wechseln, um eine logische statt einer unlogischen TAB-Reihenfolge zu sehen:
Logische TAB-Reihenfolge
Unkonventionelle TAB-Reihenfolge
Der Code für diese beiden Beispiele wird nachfolgend verglichen:
Logische TAB-Reihenfolge
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Unkonventionelle 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 oben unlogische TAB-Reihenfolge zu korrigieren, verschieben Sie die unverankerte Schaltfläche „Kiwi“ auf die Schaltfläche „Kokosnuss“ im DOM und entfernen Sie den Inline-Stil.
Sichtbarkeit von nicht sichtbaren Inhalten richtig einstellen
Manchmal müssen sich nicht sichtbare interaktive Elemente im DOM befinden, sollten aber nicht in Ihrer TAB-Reihenfolge sein. Wenn Sie beispielsweise eine responsive seitliche Navigationsleiste haben, die geöffnet wird, wenn Sie auf eine Schaltfläche klicken, sollten Nutzer nicht in der Lage sein, sich auf die seitliche Navigationsleiste zu konzentrieren, wenn diese 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. beim Öffnen der seitlichen Navigationsleiste, ersetzen Sie die obigen CSS-Eigenschaften durch:
display: blockvisibility: visible
Weitere Informationen
Für Nutzer, die ihren Computer fast vollständig 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 zu prüfen und vor jeder Veröffentlichung mit der Tabulatortaste in Ihrer Anwendung zu navigieren.