tabindex

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

L'attribut universel tabindex est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche Tab). Si plusieurs éléments partagent la même valeur d'attribut tabindex, leur ordre sera calculé en fonction de leur position dans le document.

Exemple interactif

Cet attribut peut prendre l'une des valeurs suivantes :

  • Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ;

    Note : Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec la méthode focus().

  • 0 : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ;

    Attention : Le positionnement CSS n'aura pas d'impact sur le taborder. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.

  • Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant.

    Attention : Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.

Si on utilise l'attribut tabindex sur un élément <div>, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si tabindex est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser cet exemple JSFiddle.

Note : La valeur maximale pour tabindex est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.

Exemples

HTML

html
<button tabindex="1">Un bouton</button>
<textarea>Saisir un texte</textarea>
<button tabindex="0">Un autre bouton</button>
<button tabindex="1">Et un troisième</button>

Résultat

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).

Spécifications

Specification
HTML Standard
# attr-tabindex

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi