L'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 sélection, car ils sont automatiquement insérés dans l'ordre de tabulation en fonction de leur position 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, puis appuyez sur Tab pour déplacer le curseur entre les boutons.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Toutefois, il est important de noter qu'en utilisant CSS, il est possible que les éléments existent dans un ordre dans le DOM, mais apparaissent dans un ordre différent à l'écran. Par exemple, si vous utilisez une propriété CSS telle que float pour déplacer un bouton vers la droite, les boutons apparaissent dans un ordre différent à l'écran. Toutefois, leur ordre de tabulation dans le DOM reste le même, tout comme leur ordre de tabulation. Lorsque l'utilisateur parcourt la page, les boutons sont sélectionnés dans un ordre non intuitif. Essayez de cliquer sur le bloc de code ci-dessous pour déplacer le point de départ de la navigation, 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 code CSS. L'ordre de tabulation peut varier, apparemment de manière aléatoire, et prêter à confusion pour les utilisateurs qui utilisent le clavier. Pour cette raison, la checklist de l'AIM Web indique dans la section 1.3.2 que l'ordre de lecture et de navigation, tel que déterminé par l'ordre des codes, doit être logique et intuitif.
En règle générale, essayez de parcourir vos pages de temps en temps pour vous assurer de ne pas modifier accidentellement l'ordre de tabulation. C'est une bonne habitude à adopter, et celle qui ne demande pas beaucoup d'effort.
Contenu hors écran
Que se passe-t-il si vous disposez d'un contenu qui n'est pas affiché, mais doit encore se trouver dans le DOM, comme une navigation latérale responsive ? Lorsque des éléments comme celui-ci sont sélectionnés lorsqu'ils sont hors écran, il peut sembler que le focus disparaît et réapparaît lorsque l'utilisateur appuie sur la page, ce qui est clairement un effet indésirable. Idéalement, nous devrions empêcher le panneau d'être sélectionné lorsqu'il est en dehors de l'écran, et ne le permettre de l'être que lorsque l'utilisateur peut interagir avec lui.
Parfois, vous devez effectuer un peu de recherches pour déterminer où vous êtes concentré. Vous pouvez utiliser document.activeElement dans la console pour identifier l'élément actuellement sélectionné.
Une fois que vous savez quel élément hors écran est sélectionné, vous pouvez le définir sur display: none ou visibility: hidden, puis le redéfinir sur display:
block ou visibility: visible avant de le montrer à l'utilisateur.
En général, nous encourageons les développeurs à parcourir leurs sites avant chaque publication pour vérifier que l'ordre de tabulation ne disparaît pas et ne sort pas d'une séquence logique. Si c'est le cas, assurez-vous de masquer correctement le contenu hors écran avec display: none ou visibility: hidden, ou de réorganiser les positions physiques des éléments dans le DOM afin qu'ils soient dans un ordre logique.