Die Bedeutung der DOM-Standardreihenfolge
Die Arbeit mit nativen Elementen ist eine gute Möglichkeit, mehr über das Fokusverhalten zu erfahren, da sie basierend auf ihrer Position im DOM automatisch in die Tab-Reihenfolge eingefügt werden.
Angenommen, Sie haben drei Schaltflächenelemente, eines nach dem anderen im DOM. Wenn Sie Tab drücken, werden die einzelnen Schaltflächen der Reihe nach hervorgehoben. Klicken Sie auf den Codeblock unten, um den Startpunkt der Fokusnavigation zu verschieben, und drücken Sie Tab, um den Fokus durch die Schaltflächen zu verschieben.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Beachten Sie jedoch, dass es bei Verwendung von CSS möglich ist, dass Elemente in einer Reihenfolge im DOM vorhanden sind, aber in einer anderen Reihenfolge auf dem Bildschirm angezeigt werden. Wenn Sie beispielsweise ein CSS-Attribut wie float verwenden, um eine Schaltfläche nach rechts zu verschieben, werden die Schaltflächen auf dem Bildschirm in einer anderen Reihenfolge angezeigt. Da ihre Reihenfolge im DOM jedoch gleich bleibt, ändert sich auch die Tab-Reihenfolge. Wenn Nutzende durch die Seite navigieren, werden die Schaltflächen in einer nicht intuitiven Reihenfolge hervorgehoben. Klicken Sie auf den Codeblock unten, um den Startpunkt der Fokusnavigation zu verschieben, und drücken Sie Tab, um den Fokus durch die Schaltflächen zu verschieben.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Seien Sie vorsichtig, wenn Sie die visuelle Position von Elementen auf dem Bildschirm mithilfe von CSS ändern. Dies kann dazu führen, dass die Tab-Reihenfolge hin und her wechselt, was für Nutzer, die auf die Tastatur angewiesen sind, scheinbar zufällig ist. Aus diesem Grund steht in der Web AIM-Checkliste in Abschnitt 1.3.2, dass die Lese- und Navigationsreihenfolge, die durch die Codereihenfolge bestimmt wird, logisch und intuitiv sein sollte.
In der Regel sollten Sie mit der Tabulatortaste hin und wieder durch Ihre Seiten navigieren, um sicherzustellen, dass Sie nicht versehentlich die TAB-Reihenfolge verwechselt haben. Es ist eine gute Gewohnheit, die keinen großen Aufwand erfordert.
Nicht sichtbare Inhalte
Was ist, wenn Sie Inhalte haben, die derzeit nicht angezeigt werden, sich aber noch im DOM befinden müssen, z. B. eine responsive seitliche Navigationsleiste? Wenn Elemente wie diese im Fokus sind, wenn sie sich außerhalb des Bildschirms befinden, kann es so wirken, als ob der Fokus verschwindet und wieder erscheint, wenn der Nutzer durch die Seite navigiert. Dies ist eindeutig ein unerwünschter Effekt. Idealerweise sollten wir verhindern, dass das Panel in den Fokus rückt, wenn es sich außerhalb des Bildschirms befindet, und es nur dann fokussieren lassen, wenn der Nutzer damit interagieren kann.
Manchmal müssen Sie aber ein wenig detektiv vorgehen, um herauszufinden, wo der Fokus liegt. Sie können document.activeElement in der Console verwenden, um herauszufinden, welches Element derzeit im Fokus ist.
Sobald Sie wissen, welches Element außerhalb des Bildschirms fokussiert wird, können Sie es auf display: none oder visibility: hidden setzen und dann auf display:
block oder visibility: visible zurücksetzen, bevor es dem Nutzer angezeigt wird.
Im Allgemeinen empfehlen wir Entwicklern, vor jeder Veröffentlichung durch ihre Websites zu blättern, um zu sehen, dass die Tab-Reihenfolge nicht verschwindet oder aus einer logischen Reihenfolge springt. Ist dies der Fall, sollten Sie nicht sichtbare Inhalte mit display: none oder visibility: hidden ausblenden oder die physischen Positionen der Elemente im DOM so anordnen, dass sie in einer logischen Reihenfolge angeordnet sind.