Quand (ne pas) utiliser l'attribut tabindex en HTML
Publié le
L'attribut tabindex est un outil puissant qui permet
de gérer l'ordre de navigation au clavier dans une page web. Il est essentiel pour
garantir que les utilisateurs naviguant avec le clavier puissent accéder aux éléments
interactifs de manière logique. Cependant, une utilisation abusive de cet attribut peut
compromettre l'accessibilité. Cet article explique comment et quand utiliser
tabindex, ainsi que les situations où il ne faut pas
l'employer.
Comprendre l'attribut tabindex
L'attribut tabindex contrôle l'ordre dans lequel les
éléments d'une page reçoivent le focus lorsqu'un utilisateur navigue avec la touche
Tab. Il peut être utilisé sur tout élément HTML qui est naturellement
focusable (comme les liens ou les boutons), mais aussi sur des éléments qui ne le sont
pas, comme les divs ou les spans.
Exemple :
Ajouter un tabindex à un div pour qu'il soit
focusable :
<div tabindex="0">Je peux recevoir le focus !</div>Quand utiliser tabindex
Utilisez tabindex lorsque vous souhaitez personnaliser
l'ordre de navigation au clavier pour améliorer l'expérience utilisateur, notamment dans
les situations suivantes :
- Pour rendre un élément non interactif focusable (par exemple, un div qui agit comme un bouton).
- Pour gérer l'ordre de focus dans un formulaire complexe où l'ordre naturel ne serait pas logique.
Quand ne pas utiliser tabindex
Il est crucial de ne pas abuser de tabindex dans les
cas suivants, car cela peut nuire à l'accessibilité :
1. Évitez de modifier l'ordre naturel de navigation
L'utilisation excessive de tabindex positif
(c'est-à-dire un nombre supérieur à 0) peut créer un ordre de navigation non intuitif et
déroutant. Il est souvent préférable de laisser le navigateur gérer l'ordre naturel des
éléments.
Mauvais exemple :
Changer l'ordre naturel de tabulation :
<input type="text" tabindex="3">
<input type="text" tabindex="1">
<input type="text" tabindex="2">
2. Ne pas ajouter tabindex aux éléments interactifs
par défaut
Les éléments comme les liens (<a>), les boutons
(<button>) et les champs de formulaire sont
naturellement focusables. Ajouter un tabindex à ces
éléments est redondant et peut créer des conflits dans l'ordre de navigation.
3. Évitez d'ajouter tabindex à des éléments non
interactifs sans raison valable
Ne pas rendre des éléments comme des <div> ou
des <span> focusables à moins qu'ils aient une
fonction claire (par exemple, si un <div> simule
un bouton ou un lien).
Utiliser tabindex="-1" pour les éléments hors séquence
L'attribut tabindex="-1" est utile pour les éléments
qui doivent pouvoir être focusés par des scripts (via
focus()) mais pas via la navigation au clavier. Cela
permet de rendre certains éléments focusables sans les inclure dans l'ordre de
tabulation.
Exemple :
Focuser un élément par programmation sans qu'il soit dans l'ordre de tabulation :
<div tabindex="-1">Focusé par script seulement</div>Conclusion
Bien que tabindex soit un outil puissant pour
contrôler l'ordre de navigation, il doit être utilisé avec précaution. Dans la plupart
des cas, il est préférable de respecter l'ordre naturel des éléments et de ne pas
altérer la navigation au clavier sauf si cela améliore clairement l'expérience
utilisateur. Utilisez des tabindex positifs avec
parcimonie et veillez à tester la navigation au clavier pour garantir une accessibilité
optimale.
