L'importance de l'ordre DOM par défaut
Travailler avec des éléments natifs est un excellent moyen d'en savoir plus sur le comportement de mise au point, car ils sont automatiquement insérés dans l'ordre des onglets 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 met en surbrillance 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 de sélection, puis appuyez sur Tab pour déplacer la sélection entre 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 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, leur ordre d'onglets également. Lorsque l'utilisateur fait défiler la page à l'aide de la touche 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 de la sélection, puis appuyez sur Tab pour déplacer le focus sur les boutons.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Faites attention lorsque vous modifiez la position visuelle des éléments à l'écran à l'aide du CSS. Cela peut entraîner un saut de l'ordre des onglets, apparemment de manière aléatoire, ce qui peut prêter à confusion pour les utilisateurs qui s'appuient sur le clavier. C'est pourquoi la checklist Web AIM indique dans 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 intuitif.
En règle générale, essayez de faire défiler vos pages à l'aide de la touche Tabulation de temps en temps pour vous assurer que vous n'avez pas accidentellement perturbé l'ordre des onglets. C'est une bonne habitude à adopter, qui ne demande pas beaucoup d'effort.
Contenu hors écran
Que faire si vous avez un contenu qui n'est pas actuellement affiché, mais qui doit toujours être dans le DOM, comme une barre latérale responsive ? Lorsque des éléments comme celui-ci reçoivent la sélection lorsqu'ils sont hors écran, il peut sembler que la sélection disparaît et réapparaît lorsque l'utilisateur fait défiler la page. Il s'agit clairement d'un effet indésirable. Idéalement, nous devrions empêcher le panneau d'être sélectionné lorsqu'il est hors écran et ne lui permettre d'être sélectionné que lorsque l'utilisateur peut interagir avec lui.
Parfois, vous devez mener une petite enquête pour déterminer où se trouve l'attention. Vous pouvez utiliser document.activeElement dans 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 rétablir sur display:
block ou visibility: visible avant de l'afficher à l'utilisateur.
En général, nous encourageons les développeurs à parcourir leurs sites à l'aide de la touche Tabulation avant chaque publication pour vérifier que l'ordre des onglets ne disparaît pas ni ne sort pas de la 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.