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
<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
- La propriété
HTMLElement.tabIndex
qui reflète cet attribut. - Les différents attributs universels
- Ce billet en anglais sur l'accessibilité et
tabindex
écrit par Adrian Roselli Document.hasFocus()