Importance d'une commande DOM

Importance de l'ordre DOM par défaut

Dave Gash

Meggin Kearney

Rob Dodson

L'utilisation d'éléments natifs est un excellent moyen d'en savoir plus sur le comportement de mise au point car elles sont automatiquement insérées dans l'ordre de tabulation dans le DOM.

Par exemple, vous pouvez avoir trois éléments de bouton, l'un après l'autre dans le DOM Appuyez sur Tab pour sélectionner chaque bouton dans l'ordre. Essayez de cliquer sur le bloc de code ci-dessous pour déplacer le point de départ de la navigation du focus, puis appuyez sur Tab pour déplacer le focus à travers les boutons.

<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>

Je devrais Restez concentré Enfin !

Toutefois, il est important de noter qu'avec CSS, il est possible d'avoir existent dans un ordre dans le DOM, mais apparaissent à l'écran dans un ordre différent. Pour Par exemple, si vous utilisez une propriété CSS comme float pour déplacer un bouton vers la droite, les boutons apparaissent dans un ordre différent à l’écran. Mais, comme leur ordre dans le DOM reste le même, tout comme leur ordre de tabulation. Lorsque l'utilisateur ouvre la page les boutons sont sélectionnés dans un ordre non intuitif. Cliquez sur le bouton le bloc de code ci-dessous pour déplacer le point de départ de la navigation du focus, puis appuyez sur Tab pour déplacer le curseur entre les boutons.

<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>

Je devrais Restez concentré Pour finir !

Soyez prudent lorsque vous modifiez la position visuelle des éléments à l'écran à l'aide de CSS. Cela peut faire varier l'ordre de tabulation, apparemment aléatoire, déroutant les utilisateurs qui comptent sur le clavier. C'est pourquoi la checklist AIM indique de la section 1.3.2 que l'ordre de lecture et de navigation, tel que déterminé par l'ordre du code, doit être logique et intuitive.

En règle générale, essayez de parcourir vos pages de temps en temps pour vous assurer n’avez pas accidentellement faussé l’ordre de tabulation. C’est une bonne habitude à adopter, et qui ne demande pas beaucoup d'effort.

Contenu hors écran

Que faire si vous disposez d'un contenu qui n'est pas affiché dans le DOM, comme une navigation latérale responsive ? Lorsque vous avez des éléments comme celui-ci qui lorsqu'ils ne sont pas à l'écran, il peut sembler que la mise au point est disparaissent et réapparaissent à mesure que l'utilisateur navigue sur la page, un effet indésirable. Dans l'idéal, nous devrions empêcher le comité de se concentrer lorsqu'il n'est pas à l'écran, et ne le permet de rester actif que lorsque l'utilisateur peut interagir avec lui.

Parfois, vous devez faire un peu de travail de détective pour comprendre où se concentrer disparu. Vous pouvez utiliser document.activeElement depuis la console pour déterminer quelle est actuellement sélectionné.

Une fois que vous savez quel élément en dehors de l'écran est sélectionné, vous pouvez le définir sur display: none ou visibility: hidden, puis redéfinissez-le sur display: block ou visibility: visible avant de le montrer à l'utilisateur.

En général, nous encourageons les développeurs à parcourir leurs sites publier pour vérifier que l'ordre de tabulation ne disparaît pas ou ne sort pas d'une logique séquence. Si c'est le cas, vous devez vous assurer que vous masquez correctement contenu hors écran avec display: none ou visibility: hidden, ou que vous réorganiser les éléments leurs positions physiques dans le DOM pour qu'elles respectent commande.