L'attribut tabindex

L'attribut tabindex détermine l'ordre d'obtention du focus lors de la navigation entre les éléments à l'aide de la touche Tab.

En appuyant sur cette touche, il est possible d'activer séquentiellement certains éléments de la page (les liens et les éléments des formulaires). Les éléments actifs recevront le focus.

Pour les champs de saisie de type input et textarea, le focus se manifestera par le clignotement du curseur dans le champ, permettant la saisie de texte. Pour les liens et autres éléments, cela se traduira par une mise en évidence d'une certaine manière (soulignement, contour en pointillés, etc., cela dépend du navigateur).

Si, au moment de recevoir le focus, l'élément n'était pas visible à l'écran (en raison du défilement), la page défilera jusqu'à cet élément.

Si les éléments n'ont pas d'attribut tabindex ou s'il a la valeur 0, alors la navigation entre eux avec la touche Tab se fera dans l'ordre d'apparition des éléments dans le code HTML.

Si la page contient des éléments auxquels est attribué tabindex, alors la navigation commencera par eux, en partant de la valeur d'attribut tabindex la plus petite (la plus petite peut être un) et ainsi de suite par valeurs croissantes de l'attribut. Lorsque ces éléments seront tous parcourus, la navigation continuera avec les éléments qui n'ont pas d'attribut tabindex ou qui l'ont avec la valeur 0.

La valeur de l'attribut est un nombre entier de 1 à l'infini. Si certains numéros sont manquants, rien de grave ne se produira (par exemple, s'il n'y a pas de numéro 2, le focus ira d'abord sur l'élément avec tabindex égal à 1, puis sur l'élément avec tabindex égal à 3).

Si, au moment d'appuyer sur la touche Tab, un élément a déjà le focus (le focus peut avoir été obtenu non seulement en appuyant sur Tab, mais aussi en cliquant sur l'élément avec la souris ou via l'attribut autofocus), alors l'appui suivant sur la touche Tab entraînera que le focus sera donné à l'élément suivant dans l'ordre après celui qui a actuellement le focus (par exemple, si l'élément actuellement focus a tabindex 3, alors le prochain à recevoir le focus sera l'élément avec tabindex 4).

Si un champ de saisie a l'attribut disabled, alors il sera ignoré lors de la navigation via la touche Tab, même si cet attribut tabindex lui est attribué.

L'attribut tabindex s'applique aux balises a, input, textarea, button, select, area.

Exemple

Attribuons l'attribut tabindex à des champs input. Appuyez successivement sur la touche Tab et vous verrez comment le focus passera du premier input au quatrième, puis suivra les liens du début de la page (puisqu'il n'y a plus d'éléments avec l'attribut tabindex défini) :

:

Voir aussi