Die Bedeutung der DOM-Standardreihenfolge
Die Arbeit mit nativen Elementen ist eine gute Möglichkeit, mehr über das Fokusverhalten da sie automatisch auf Grundlage ihrer Daten in die -Position im DOM.
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 dann Tab drücken, um den Fokus zu verschieben
Schaltflächen anpassen.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Es ist jedoch wichtig zu beachten, dass es bei der Verwendung von CSS möglich ist,
in einer Reihenfolge im DOM, aber in einer anderen Reihenfolge auf dem Bildschirm erscheinen. Für
Wenn Sie beispielsweise eine CSS-Eigenschaft wie float verwenden, um eine Schaltfläche nach rechts zu verschieben,
Die Schaltflächen werden auf dem Bildschirm
in einer anderen Reihenfolge angezeigt. Aber da ihre Reihenfolge
Das DOM und die Tab-Reihenfolge bleiben unverändert. Wenn Nutzende durch die
werden die Schaltflächen in einer nicht intuitiven Reihenfolge fokussiert. Klicken Sie auf das
Codeblock unten, um den Startpunkt der Fokusnavigation zu verschieben, und drücken Sie dann Tab, um
den Fokus durch die Schaltflächen 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 TAB-Reihenfolge zufällig herumspringt und verwirrend erscheint. Nutzenden, die auf die Tastatur angewiesen sind. Aus diesem Grund steht in der Web AIM-Checkliste in Abschnitt 1.3.2 die Lese- und Navigationsreihenfolge, die von der Codereihenfolge bestimmt wird, logisch und intuitiv ist.
Wechseln Sie in der Regel hin und wieder mit der Tabulatortaste durch Ihre Seiten, um sicherzustellen, die Tab-Reihenfolge nicht versehentlich durcheinandergebracht 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, im DOM, wie z. B. eine responsive seitliche Navigationsleiste? Wenn Sie solche Elemente haben, fokussiert werden, wenn sie sich außerhalb des Bildschirms befinden, kann es so wirken, als ob der Fokus verschwindet und wieder erscheint, wenn die Nutzenden sich durch die Seite bewegen. einen unerwünschten Effekt haben. Idealerweise sollte das Gremium daran gehindert werden, wenn sie sich außerhalb des Bildschirms befindet, und fokussiert nur dann, wenn der Nutzer mit der Anzeige interagieren kann damit verbunden.
Manchmal muss man erst ein bisschen detektiv vorgehen, um herauszufinden,
nicht mehr verfügbar. Sie können document.activeElement in der Konsole verwenden, um herauszufinden,
Element aktuell fokussiert ist.
Sobald Sie wissen, welches Element außerhalb des Bildschirms fokussiert wird, können Sie
display: none oder visibility: hidden und dann auf display:
block oder visibility: visible zurücksetzen, bevor sie dem Nutzer angezeigt wird.
Im Allgemeinen empfehlen wir Entwicklern, vor jeder einzelnen
damit die TAB-Reihenfolge nicht verschwindet oder aus einer logischen
Sequenz hinzufügen. Ist dies der Fall, blenden Sie
nicht sichtbare Inhalte mit display: none oder visibility: hidden
Elemente neu anordnen physische Positionen im DOM, sodass sie in einer logischen
Reihenfolge.