Importance de l'ordre DOM par défaut
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>
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>
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.