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 Tab-Reihenfolge eingefügt werden.
Beispiel: Sie haben drei Schaltflächenelemente, die im DOM nacheinander angeordnet sind. Wenn du auf „Tab“ drückst, wird jede Schaltfläche nacheinander 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 bewegen.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Es ist jedoch wichtig zu beachten, dass es mit CSS möglich ist, dass Elemente im DOM in einer bestimmten Reihenfolge vorhanden sind, aber auf dem Bildschirm in einer anderen Reihenfolge angezeigt werden. Wenn du beispielsweise eine CSS-Property wie float verwendest, 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, gilt dies auch für die Tab-Reihenfolge. Wenn der Nutzer mit der Tabulatortaste durch die Seite navigiert, werden die Schaltflächen in einer nicht intuitiven Reihenfolge fokussiert. Klicken Sie auf den Codeblock unten, um den Startpunkt der Fokusnavigation zu verschieben. Drücken Sie dann Tab, um den Fokus durch die Buttons 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 mithilfe von CSS ändern. Dies kann dazu führen, dass die Tabulatorreihenfolge scheinbar zufällig springt, was Nutzer, die auf die Tastatur angewiesen sind, verwirrt. Aus diesem Grund wird in der WebAIM-Checkliste in Abschnitt 1.3.2 angegeben, dass die Lese- und Navigationsreihenfolge, die durch die Codereihenfolge bestimmt wird, logisch und intuitiv sein sollte.
Als Faustregel gilt: Gehen Sie Ihre Seiten von Zeit zu Zeit mit der Tabulatortaste durch, um sicherzustellen, dass Sie die Tabulatorreihenfolge nicht versehentlich durcheinandergebracht haben. Es ist eine gute Gewohnheit, die nicht viel Aufwand erfordert.
Nicht sichtbare Inhalte
Was ist, wenn Sie Inhalte haben, die derzeit nicht angezeigt werden, aber dennoch im DOM vorhanden sein müssen, z. B. eine responsive Seitennavigation? Wenn Elemente wie diese den Fokus erhalten, wenn sie sich außerhalb des Bildschirms befinden, kann es so aussehen, als würde der Fokus verschwinden und wieder auftauchen, wenn der Nutzer mit der Tabulatortaste durch die Seite navigiert. Das ist natürlich nicht wünschenswert. Idealerweise sollten wir verhindern, dass das Steuerfeld den Fokus erhält, wenn es sich außerhalb des Bildschirms befindet, und den Fokus nur dann zulassen, 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 Konsole können Sie herausfinden, welches Element gerade fokussiert 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 wieder auf display:
block oder visibility: visible, bevor Sie es dem Nutzer anzeigen.
Generell empfehlen wir Entwicklern, vor jeder Veröffentlichung die Tab-Reihenfolge auf ihren Websites zu prüfen, um sicherzustellen, dass sie nicht verschwindet oder aus einer logischen Abfolge herausspringt. Wenn dies der Fall ist, sollten Sie dafür sorgen, dass Offscreen-Inhalte mit display: none oder visibility: hidden ausgeblendet werden oder dass Sie die physischen Positionen der Elemente im DOM so anordnen, dass sie in einer logischen Reihenfolge sind.