Utilisation de l'attribut tabindex

Traduction de l'article Using the tabindex attribute, avec la permission de l'auteur, Léonie Watson du Paciello Group.

L'attribut HTML tabindex est utilisé pour gérer le focus du clavier. Utilisé à bon escient, il peut gérer de manière efficace le focus à l'intérieur d'un widget sur une page web. Utilisé imprudemment, il peut rendre inutilisable le contenu pour les utilisateurs du clavier.

L'attribut tabindex indique que l'élément peut recevoir le focus, et détermine comment le focus est géré. La valeur de l'attribut doit être un nombre entier. L'interaction au clavier sera différente si ce nombre est positif, négatif ou 0.

Pour comprendre pourquoi l'attribut tabindex a tellement d’impact sur la facilité d’utilisation, il est nécessaire de comprendre un peu comment fonctionne l'interaction au clavier. Un utilisateur qui navigue au clavier se déplace en général dans le contenu de la page en utilisant la touche TAB, parcourant les éléments capables de recevoir le focus dans un ordre séquentiel.

Certains éléments HTML interactifs comme des liens et les éléments de formulaire reçoivent le focus naturellement. Lorsqu'ils sont inclus dans une page web, leur ordre séquentiel est déterminé par leur position dans le code source HTML.

<label for="username">Username:</label>
<input type="text" id="username">
<label for="password">Password:</label>
<input type="password" id="password">
<input type="submit" value="Log in">

La première frappe de la touche TAB placera le focus sur le champ "username" ensuite sur le champ "password" et enfin sur le bouton de login. Les trois éléments prennent le focus par défaut, et ils sont parcourus dans l'ordre de leur apparition dans le code source. En d'autres termes, il n‘est pas nécessaire de définir explicitement l'attribut tabindex parce que tout est géré naturellement par le navigateur.

tabindex=0

Lorsque la valeur de tabindex est 0, l'élément est inséré dans l'ordre de tabulation en fonction de son emplacement dans le code source. Si l'élément peut recevoir le focus par défaut il n'est pas nécessaire d'utiliser tabindex du tout, mais si vous désirez qu'un élément comme <span> ou <div> puisse recevoir le focus, alors tabindex=0 permet de l'inclure dans l'ordre de tabulation.

Il est important de mentionner qu'il est plus facile d'utiliser un élément HTML qui peut recevoir le focus naturellement autant que possible. Par exemple, lorsque vous choisissez d'utiliser une balise <button> ou <input type = "checkbox">, le focus et l'interaction avec le clavier sont gérés automatiquement par le navigateur. Lorsque vous choisissez d'utiliser d'autres éléments pour créer des widgets personnalisés, vous devrez manuellement gérer le focus et le support de l'interaction avec le clavier.

tabindex=-1

Lorsque tabindex est négatif (par exemple -1), l'élément peut recevoir le focus par programmation mais il ne figure pas dans l'ordre de tabulation. En d'autres mots, il ne peut pas être atteint par quelqu'un utilisant la touche TAB pour naviguer à travers le contenu, mais il peut recevoir le focus via un script .

Voici un exemple : déplacer le focus à une liste d’erreurs retournées par un formulaire. Cette liste est généralement située au début du formulaire. Vous souhaitez donc attirer l'attention des utilisateurs de lecteurs d'écran et de logiciels d’agrandissement sur ces erreurs, et positionner tous les utilisateurs qui naviguent au clavier au début du formulaire pour qu'ils puissent commencer à corriger les erreurs. Mais vous ne souhaitez pas que cette liste d'erreurs soit inclue dans l'ordre de tabulation de la page.

<div id="errorSummary" tabindex="-1">
<h2>Your information contains three errors</h2>
   <ul>
   ...
   </ul>
</div>

tabindex=1+

C’est lorsque la valeur de tabindex est un entier positif que les choses deviennent problématiques. L’attribut tabindex impose alors un ordre de tabulation du contenu qui ne ressemble en rien à l'ordre de tabulation attendu.

<label for="username">Username:</label>
<input type="text" id="username" tabindex="3">
<label for="password">Password:</label>
<input type="password" id="password" tabindex="1">
<input type="submit" value="Log in" tabindex="2">

Dans cet exemple, la présentation visuelle du formulaire sera correcte: les champs "username" et "password" sont suivis du bouton d'envoi. Par contre l'ordre de tabulation ne sera pas logique du tout. Le focus se déplacera d'abord sur le champ "password", puis sur le bouton "login", et enfin sur le champ "username".

C'est encore pire lorsque vous vous rendez compte que le champ "password" devient le premier élément à recevoir le focus sur la page contenant le formulaire. Peu importe combien d'éléments capables de recevoir le focus se trouvent avant le champ "password" dans le code source, tabindex=1 signifie que cet élément sera le premier élément à recevoir le focus sur la page.

Un autre danger lorsque l'on utilise de valeurs positives pour tabindex, c'est d'oublier de donner un attribut tabindex à un élément. Cet élément est alors soustrait à l'ordre de tabulation établi par tabindex et n'apparait qu'après tous les éléments avec tabindex dans l'ordre de tabulation.

En résumé

L'attribut tabindex est polyvalent et a la capacité d'améliorer la facilité d’utilisation ou de la détruire pour les utilisateurs qui naviguent exclusivement au clavier. Si vous pensez utiliser l'attribut tabindex, conservez ces remarques à l'esprit:

• Utilisez tabindex=0 pour inclure un élément dans l'ordre de tabulation naturelle du contenu, mais rappelez-vous qu'un élément qui peut recevoir le focus par défaut est une option plus sûre qu'un contrôle personnalisé.
• Utilisez tabindex=-1 pour donner le focus à un élément par programmation, tout en l'excluant de l'ordre de tabulation du contenu.
• Évitez d'utiliser tabindex=1+.

Lectures complémentaires

• Définition HTML de contenu interactif : un contenu spécifiquement destiné pour l’interaction avec l'utilisateur.
• Définition HTML de tabindex.
• ARIA – providing keyboard focus.