L'importance de l'ordre par défaut du DOM
L'utilisation d'éléments natifs est un excellent moyen de comprendre le comportement de la 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. Appuyer sur Tab permet de sélectionner chaque bouton l'un après l'autre. 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 la sélection sur 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 que des éléments existent dans un certain ordre dans le DOM, mais qu'ils 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 s'affichent dans un ordre différent à l'écran. Toutefois, comme leur ordre dans le DOM reste le même, l'ordre de tabulation ne change pas non plus. Lorsque l'utilisateur parcourt la page à l'aide de la touche de tabulation, 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 la sélection sur 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 entraîner un saut de l'ordre de tabulation, apparemment de manière aléatoire, ce qui peut dérouter les utilisateurs qui se servent du clavier. C'est pourquoi la checklist Web AIM indique dans la section 1.3.2 que l'ordre de lecture et de navigation, déterminé par l'ordre du code, doit être logique et intuitif.
En règle générale, essayez de parcourir vos pages à l'aide de la touche de tabulation de temps en temps pour vous assurer que vous n'avez pas accidentellement modifié l'ordre de tabulation. C'est une bonne habitude à prendre, et elle ne demande pas beaucoup d'efforts.
Contenu hors écran
Que faire si vous avez du contenu qui n'est pas affiché actuellement, mais qui doit tout de même se trouver dans le DOM, comme un menu de navigation latéral responsif ? Lorsque des éléments comme celui-ci sont sélectionnés alors qu'ils sont hors de l'écran, l'utilisateur peut avoir l'impression que la sélection disparaît et réapparaît lorsqu'il parcourt la page à l'aide de la touche de tabulation, ce qui n'est clairement pas souhaitable. Idéalement, nous devrions empêcher le panneau d'être sélectionné lorsqu'il est hors de l'écran, et ne l'autoriser que lorsque l'utilisateur peut interagir avec lui.
Vous devez parfois mener une petite enquête pour déterminer où se trouve le focus. Vous pouvez utiliser document.activeElement depuis la console pour déterminer quel élément est 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 l'afficher pour l'utilisateur.
En général, nous encourageons les développeurs à parcourir leurs sites à l'aide de la touche Tabulation avant chaque publication pour s'assurer que l'ordre de tabulation ne disparaît pas ou ne sort pas d'une séquence logique. Si c'est le cas, vous devez vous assurer 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.