Bedeutung der Standard-DOM-Reihenfolge
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 im DOM drei Schaltflächenelemente, eines nach dem anderen. Durch Drücken von Tab werden die einzelnen Schaltflächen der Reihe nach hervorgehoben. Klicken Sie unten auf den Codeblock, um den Startpunkt der Fokusnavigation zu verschieben, und drücken Sie dann Tab, um den Fokus zwischen den Schaltflächen zu bewegen.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Es ist jedoch wichtig zu beachten, dass Elemente mithilfe von CSS in einer Reihenfolge im DOM vorhanden sein können, aber in einer anderen Reihenfolge auf dem Bildschirm angezeigt werden. Wenn Sie beispielsweise eine CSS-Eigenschaft wie float verwenden, um eine Schaltfläche nach rechts zu verschieben, werden die Schaltflächen auf dem Bildschirm in einer anderen Reihenfolge angezeigt. Aber weil die Reihenfolge im DOM gleich bleibt,
bleibt auch die TAB-Reihenfolge. Wenn der Nutzer auf der Seite mit der Maus scrollt, 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 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 watschelnd erscheint und Nutzer, die die Tastatur verwenden, verwirrend erscheint. Aus diesem Grund besagt die Web AIM-Checkliste in Abschnitt 1.3.2, dass die durch die Codereihenfolge festgelegte Lese- und Navigationsreihenfolge logisch und intuitiv sein sollte.
In der Regel sollten Sie hin und wieder mit der Tabulatortaste durch die Seiten navigieren, um sicherzustellen, dass Sie nicht versehentlich die TAB-Reihenfolge verwechselt 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 enthalten sein müssen, z. B. eine responsive seitliche Navigationsleiste? Wenn solche Elemente fokussiert sind, wenn sie sich außerhalb des Bildschirms befinden, kann es so aussehen, als ob der Fokus verschwindet und wieder erscheint, während sich der Nutzer auf der Seite öffnet. Dies ist offensichtlich unerwünscht. Idealerweise sollte das Panel den Fokus nicht auf den Fokus rücken, wenn es sich außerhalb des Bildschirms befindet, und dass es nur sichtbar ist, wenn der Nutzer damit interagieren kann.
Manchmal müssen Sie ein wenig detektivisch
herausfinden, wo der Fokus liegt. Sie können document.activeElement in der Console verwenden, um herauszufinden, welches Element gerade im Fokus ist.
Wenn Sie wissen, welches Element außerhalb des sichtbaren Bereichs im Fokus ist, können Sie es auf display: none oder visibility: hidden 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 mit der Tabulatortaste durch ihre Websites zu navigieren, um zu sehen, dass die TAB-Reihenfolge nicht verschwindet oder aus einer logischen Reihenfolge springt. Ist dies der Fall, müssen Sie nicht sichtbare Inhalte mit display: none oder visibility: hidden korrekt ausblenden oder die physischen Positionen der Elemente im DOM neu anordnen, sodass sie in einer logischen Reihenfolge angeordnet sind.