Die Bedeutung der Standard-DOM-Reihenfolge
Die Arbeit mit nativen Elementen ist eine gute Möglichkeit, das Fokusverhalten kennenzulernen, da sie basierend auf ihrer Position im DOM automatisch in die Tabulatorreihenfolge eingefügt werden.
Angenommen, Sie haben drei Schaltflächenelemente, die im DOM nacheinander stehen. Wenn Sie auf Tab drücken, wird nacheinander jede Taste hervorgehoben. 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>
Mit CSS ist es jedoch möglich, dass Elemente im DOM in einer bestimmten Reihenfolge vorhanden sind, auf dem Bildschirm aber in einer anderen Reihenfolge angezeigt werden. Wenn Sie beispielsweise eine CSS-Eigenschaft 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 der Nutzer durch die Seite wechselt, erhalten die Schaltflächen in einer nicht intuitiven Reihenfolge den Fokus. Klicken Sie auf den Codeblock unten, um den Startpunkt der Fokusnavigation zu verschieben, und drücken Sie dann die Taste Tab, um den Fokus durch die Schaltflächen zu bewegen.
<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 mit 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 wird in der Checkliste für Web AIM in Abschnitt 1.3.2 darauf hingewiesen, dass die Lese- und Navigationsreihenfolge, die durch die Codereihenfolge bestimmt wird, logisch und intuitiv sein sollte.
Gehen Sie in der Regel hin und wieder mit der Tabulatortaste durch die Seiten, um sicherzustellen, dass Sie die Tabulatorreihenfolge nicht versehentlich durcheinandergebracht haben. Das ist eine gute Angewohnheit, die nicht viel Mühe erfordert.
Nicht sichtbare Inhalte
Was ist, wenn Inhalte derzeit nicht angezeigt werden, aber im DOM vorhanden sein müssen, z. B. eine responsive Seitenleiste? Wenn solche Elemente den Fokus erhalten, während sie nicht auf dem Bildschirm sind, kann es so aussehen, als würde der Fokus verschwinden und wieder erscheinen, während der Nutzer sich durch die Seite bewegt. Das ist natürlich ein unerwünschter Effekt. Idealerweise sollte verhindert werden, dass der Bereich den Fokus erhält, wenn er nicht auf dem Bildschirm ist. Er sollte nur dann den Fokus erhalten, wenn der Nutzer mit ihm 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 ist, können Sie es auf display: none oder visibility: hidden setzen und dann wieder auf display:
block oder visibility: visible zurücksetzen, bevor Sie es dem Nutzer anzeigen.
Wir empfehlen Entwicklern generell, vor jeder Veröffentlichung die Tabs ihrer Website durchzugehen, 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.