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.

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

Spécification État Commentaires
HTML Living Standard
La définition de 'tabindex' dans cette spécification.
Standard évolutif Aucune modification depuis la dernière dérivation, HTML 5.1
HTML 5.1
La définition de 'tabindex' dans cette spécification.
Recommendation Dérivée de HTML Living Standard, aucune modification depuis HTML5
HTML5
La définition de 'tabindex' dans cette spécification.
Recommendation Dérivée de HTML Living Standard. À partir de HTML 4.01 Specification, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.
HTML 4.01 Specification
La définition de 'tabindex' dans cette spécification.
Recommendation Attribut uniquement supporté sur <a>, <area>, <button>, <object>, <select>, et <textarea>.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, ggrossetie, Le_suisse, Goofy
Dernière mise à jour par : SphinxKnight,