Die Bedeutung der DOM-Standardreihenfolge
Die Arbeit mit nativen Elementen ist eine gute Möglichkeit, etwas ü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, die im DOM nacheinander angeordnet sind. Wenn Sie auf Tab drücken, wird nacheinander die jeweilige Schaltfläche fokussiert. Klicken Sie auf den Codeblock unten, um den Startpunkt der Fokusnavigation zu verschieben, und drücken Sie dann Tab, um den Fokus zwischen den 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 in einer anderen Reihenfolge auf dem Bildschirm angezeigt. Da ihre Reihenfolge im DOM jedoch gleich bleibt, bleibt auch die Tabulatorreihenfolge gleich. 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 dann 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 scheinbar zufällig springt und Nutzer, die die Tastatur verwenden, verwirrt. Aus diesem Grund steht in der Web AIM-Checkliste in Abschnitt 1.3.2, dass die Lese- und Navigationsreihenfolge gemäß der Codereihenfolge 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. Das ist eine gute Angewohnheit, die nicht viel Mühe 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 sollte verhindert werden, dass das Steuerfeld den Fokus erhält, wenn es nicht auf dem Bildschirm ist. Der Fokus sollte nur dann darauf liegen, wenn der Nutzer damit interagieren kann.
Manchmal müssen Sie ein wenig Detektivarbeit leisten, um herauszufinden, wo der Fokus verloren gegangen ist. Mit document.activeElement in der Console können Sie herausfinden, welches Element derzeit den Fokus hat.
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.
Wir empfehlen Entwicklern generell, vor jeder Veröffentlichung durch die Tabs ihrer Website zu gehen, um sicherzustellen, dass die Tab-Reihenfolge nicht verschwindet oder aus einer logischen Sequenz herausspringt. In diesem Fall sollten Sie dafür sorgen, dass Sie Inhalte, die nicht auf dem Bildschirm zu sehen sind, mit display: none oder visibility: hidden entsprechend ausblenden oder die physischen Positionen der Elemente im DOM so neu anordnen, dass sie in einer logischen Reihenfolge sind.