Attribut HTML universel : tabindex

Exemple interactif

<p>
  Cliquez n'importe où dans ce panneau, puis essayez de naviguer dans les
  éléments à l'aide de la touche <kbd>Tab</kbd>.
</p>

<label>Premier dans l'ordre de tabulation&nbsp;:<input type="text" /></label>

<div tabindex="0">Peut avoir la sélection grâce à tabindex.</div>

<div>Pas de sélection&nbsp;: pas de tabindex.</div>

<label>Troisième dans l'ordre de tabulation&nbsp;:<input type="text" /></label>

p {
  font-style: italic;
  font-weight: bold;
}

div,
label {
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

div:focus {
  font-weight: bold;
}

Il accepte un entier comme valeur, avec des résultats différents selon la valeur de l'entier :

• Une valeur négative (la valeur négative exacte n'a pas d'importance, généralement tabindex="-1") signifie que l'élément n'est pas accessible par navigation séquentielle au clavier.

  Note : tabindex="-1" peut être utile pour les éléments qui ne doivent pas être accessibles directement avec la touche Tab, mais qui doivent recevoir la sélection au clavier. Des exemples incluent une fenêtre modale hors écran qui doit être sélectionnée lorsqu'elle devient visible, ou un message d'erreur de soumission de formulaire qui doit être immédiatement sélectionné lors de la soumission d'un formulaire erroné.

• tabindex="0" signifie que l'élément doit être accessible dans la navigation séquentielle au clavier, après toute valeur positive de tabindex. L'ordre de navigation de sélection de ces éléments est défini par leur ordre dans le code source du document.

• Une valeur positive signifie que l'élément doit être accessible dans la navigation séquentielle au clavier, avec son ordre défini par la valeur du nombre. Ainsi, tabindex="4" est sélectionné avant tabindex="5" et tabindex="0", mais après tabindex="3". Si plusieurs éléments partagent la même valeur positive de tabindex, leur ordre relatif entre eux suit leur position dans le code source du document. La valeur maximale pour tabindex est 32767.

• Si l'attribut tabindex est inclus sans valeur définie, le fait que l'élément soit sélectionnable est déterminé par l'agent utilisateur.

  Attention : Il est recommandé d'utiliser uniquement les valeurs 0 et -1 pour tabindex. Évitez d'utiliser des valeurs de tabindex supérieures à 0 et des propriétés CSS qui peuvent changer l'ordre des éléments HTML sélectionnables (Ordre des éléments flexibles). Cela rend difficile la navigation et l'utilisation du contenu de la page pour les personnes qui dépendent du clavier ou des technologies d'assistance. Il vaut mieux écrire le document avec les éléments dans une séquence logique.

Certains éléments HTML sélectionnables ont une valeur par défaut de tabindex à 0 définie en interne par l'agent utilisateur. Ces éléments sont un <a> ou <area> avec l'attribut href, <button>, <frame> Obsolète , <iframe>, <input>, <object>, <select>, <textarea>, et l'élément SVG <a>, ou un élément <summary> qui fournit un résumé pour un élément <details>. Les développeur·euse·s ne doivent pas ajouter l'attribut tabindex à ces éléments sauf si cela modifie le comportement par défaut (par exemple, inclure une valeur négative retirera l'élément de l'ordre de navigation de sélection).

Problèmes d'accessibilité

Il faut éviter d'utiliser l'attribut tabindex avec du contenu non-interactif si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément <div> plutôt qu'un élément <button>).

Les composants rendus interactifs par cette méthode ne feront pas partie de l'arbre d'accessibilité et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via ARIA).

• Utiliser l'attribut tabindex | Vispero ^(angl.)

Spécifications

Compatibilité des navigateurs

Voir aussi

• Tous les attributs universels
• La propriété HTMLElement.tabIndex qui reflète cet attribut
• Problèmes d'accessibilité avec tabindex : voir Ne pas utiliser tabindex supérieur à 0 ^(angl.) par Adrian Roselli
• L'entrée de glossaire Ordre de lecture