Tastaturzugriff – Grundlagen

Rob Dodson

Viele verschiedene Nutzer verlassen sich bei der Navigation in Anwendungen auf die Tastatur. mit vorübergehenden und dauerhaften motorischen Beeinträchtigungen. um effizienter und produktiver zu sein. Gute Tastaturnavigation App-Strategie die Nutzerfreundlichkeit für alle verbessern.

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), erhält derzeit Eingaben von der Tastatur. Das fokussierte Element empfängt nicht nur Tastaturereignisse, sondern auch Inhalte das aus der Zwischenablage eingefügt wird.

Wenn du den Fokus auf einer Seite verschieben möchtest, verwende TAB, um nach vorne zu gehen und SHIFT + TAB um „rückwärts“ zu navigieren. Das aktuell fokussierte Element wird oft durch ein Fokusring. Die Fokusringe werden in verschiedenen Browsern unterschiedlich gestaltet. Die Reihenfolge, in der der Fokus durch interaktive Elemente vorwärts und rückwärts verläuft wird als Tab-Reihenfolge bezeichnet.

Interaktive HTML-Elemente wie Textfelder, Schaltflächen und Auswahllisten Implizit fokussierbar: Sie werden automatisch in die TAB-Reihenfolge eingefügt. basierend auf ihrer Position im DOM: Diese interaktiven Elemente verfügen auch über eine integrierte Tastaturereignisverarbeitung. Elements wie Absätze und div-Elemente sind nicht implizit fokussierbar, da Nutzende nicht mit ihnen interagieren.

Die Implementierung einer logischen TAB-Reihenfolge ist ein wichtiger Bestandteil mit einer reibungslosen Tastaturnavigation. Es gibt zwei Hauptideen, die Sie bei der Bewertung und Anpassung Ihrer Tab-Reihenfolge beachten sollten:

  1. Elemente im DOM in logischer Reihenfolge anordnen
  2. Legen Sie die Sichtbarkeit von nicht sichtbaren Inhalten, die nicht empfangen werden sollen, korrekt fest. Fokus

Elemente im DOM in logischer Reihenfolge anordnen

Um zu überprüfen, ob die TAB-Reihenfolge Ihrer Anwendung logisch ist, gehen Sie mit der Tabulatortaste durch Ihr Seite. Im Allgemeinen sollte der Fokus der Lesereihenfolge folgen, d. h. von links nach rechts von oben nach unten.

Wenn die Fokusreihenfolge nicht stimmt, sollten Sie die Elemente im DOM für eine natürlichere TAB-Reihenfolge. Wenn Sie möchten, dass ein Produkt weiter oben auf dem Bildschirm, verschieben Sie es an eine frühere Stelle im DOM.

Versuchen Sie, mit der Tabulatortaste durch die beiden Schaltflächen unten zu navigieren, um einen logischen Tab zu sehen. im Vergleich zu einer unlogischen TAB-Reihenfolge:

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 zu vermeiden, zu einer unlogischen TAB-Reihenfolge. Um die oben angegebene unlogische TAB-Reihenfolge zu korrigieren, verschieben Sie den Schwebendes „Kiwi“ nach „Coconut“ (Kokosnuss) Schaltfläche im DOM und entfernen Sie den Inline-Style.

Sichtbarkeit von nicht sichtbaren Inhalten richtig einstellen

Manchmal müssen nicht sichtbare interaktive Elemente im DOM vorhanden sein, sollten aber nicht in der TAB-Reihenfolge. Wenn Sie beispielsweise eine responsive seitliche Navigationsleiste haben, Wenn Sie auf eine Schaltfläche klicken, sollte der Fokus des Nutzers nicht auf die seitliche Navigationsleiste wenn es geschlossen ist.

Um zu verhindern, dass ein bestimmtes interaktives Element den Fokus erhält, sollten Sie Geben Sie dem Element eine der folgenden CSS-Eigenschaften:

  • display: none
  • visibility: hidden

Um das Element wieder in die Tab-Reihenfolge einzufügen, z. B. wenn die seitliche Navigationsleiste ersetzen Sie die obigen CSS-Eigenschaften durch:

  • display: block
  • visibility: visible

Nächste Schritte

Bei Nutzern, die ihren Computer fast ausschließlich mit Tastatur oder ein anderes Eingabegerät verwenden, ist eine logische TAB-Reihenfolge wichtig, zugänglich und nutzbar zu machen. Wenn Sie die Tab-Reihenfolge prüfen möchten, durchblättern Sie Ihre App vor jeder Veröffentlichung.