Qu'est-ce que l'attribut HTML tabindex ?

Question

Quel est le tabindex à quoi sert cet attribut en HTML ?

Answer 1

tabindex est un attribut global responsable de deux choses :

1. il établit l'ordre des éléments "focalisables" et
2. il rend les éléments "focalisables". .

À mon avis, la deuxième chose est encore plus importante que la première. Il y a très peu d'éléments qui sont focalisables par défaut (par exemple, les <a> et les contrôles de formulaire). Les développeurs ajoutent très souvent certains gestionnaires d'événements JavaScript (comme 'onclick') sur les éléments non focalisables (<div>, <span> et ainsi de suite), et le moyen de rendre votre interface réactive non seulement aux événements de la souris mais aussi aux événements du clavier (par exemple 'onkeypress') est de rendre ces éléments focalisables. Enfin, si vous ne souhaitez pas définir l'ordre mais simplement rendre votre élément focalisable, utilisez la commande tabindex="0" sur tous ces éléments :

<div tabindex="0"></div>

De plus, si vous ne voulez pas qu'il soit possible de le mettre en évidence à l'aide de la touche de tabulation, utilisez l'option tabindex="-1" . Par exemple, le lien ci-dessous ne sera pas mis en évidence si vous utilisez les touches de tabulation pour naviguer.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Answer 2

Lorsque l'utilisateur appuie sur le bouton de tabulation, il parcourt le formulaire dans l'ordre 1, 2 et 3, comme indiqué dans l'exemple ci-dessous.

Par exemple :

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

Answer 3

Contrôle de l'ordre de tabulation (en appuyant sur la touche tab pour déplacer le focus) dans la page.

Référence : http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

Answer 4

Les valeurs que vous définissez déterminent l'ordre dans lequel le focus du clavier se déplacera entre les éléments du site Web.

Dans l'exemple suivant, la première fois que vous appuyez sur la touche tabulation, votre curseur se déplacera vers #foo, puis #awesome, puis #bar.

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

Si vous n'avez défini d'index de tabulation nulle part, le focus du clavier suivra les balises HTML de votre page dans l'ordre dans lequel elles sont définies dans le document HTML.

Si vous utilisez la tabulation plus de fois que vous n'avez spécifié d'index de tabulation, le focus se déplacera comme s'il n'y avait pas d'index de tabulation, c'est-à-dire dans l'ordre d'apparition des balises HTML.

Answer 5

Il peut être utilisé pour modifier la séquence de navigation par défaut des éléments du formulaire.

Donc si vous avez :

text input A

text input B

submit button C

en utilisant la touche de tabulation, vous naviguez dans A->B->C. Tabindex vous permet de modifier ce flux.