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

À quoi sert l' tabindexattribut en HTML?

tabindexest un attribut global responsable de deux choses:

1. il définit l'ordre des éléments "focalisables" et
2. il rend les éléments «focalisables» .

Dans mon esprit, la deuxième chose est encore plus importante que la première. Il y a très peu d'éléments qui peuvent être focalisés par défaut (par exemple <a> et les contrôles de formulaire). Les développeurs ajoutent très souvent des gestionnaires d'événements JavaScript (comme 'onclick') sur des éléments non focalisables (<div>, <span> et ainsi de suite), et la façon de rendre votre interface sensible non seulement aux événements de souris mais aussi aux événements de clavier (par exemple «onkeypress») consiste à rendre ces éléments focalisables. Enfin, si vous ne voulez pas définir l'ordre, mais faites simplement que votre élément puisse être focalisé tabindex="0"sur tous ces éléments:

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

De plus, si vous ne voulez pas qu'il soit focalisable via la touche de tabulation, utilisez-le tabindex="-1". Par exemple, le lien ci-dessous ne sera pas ciblé lors de l'utilisation des touches de tabulation pour parcourir.

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

Lorsque l'utilisateur appuie sur le bouton de tabulation, l'utilisateur est dirigé vers 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"  />

le tabindexest utilisé pour définir une séquence que les utilisateurs suivent lorsqu'ils utilisent la touche Tab pour naviguer dans une page. Par défaut, l'ordre de tabulation naturel correspondra à l'ordre source dans le balisage.

L'attribut de contenu tabindex permet aux auteurs de contrôler si un élément est censé pouvoir être mis au point, s'il est censé être accessible à l'aide de la navigation par focus séquentiel et quel doit être l'ordre relatif de l'élément aux fins de la navigation par focus séquentiel. Le nom "index tab" provient de l'utilisation courante de la touche "tab" pour naviguer à travers les éléments focalisables. Le terme "tabulation" se réfère à la progression vers l'avant à travers les éléments pouvant être mis au point qui peuvent être atteints en utilisant la navigation par mise au point séquentielle.
Recommandation du W3C: HTML5
Section 7.4.1 Navigation par focus séquentiel et attribut tabindex

Le tabindexcommence à 0 ou tout nombre entier positif et augmente progressivement. Il est courant de voir la valeur 0 évitée car dans les anciennes versions de Mozilla et IE, le tabindex commencerait à 1, passerait à 2, et seulement après 2 irait à 0 puis 3. La valeur entière maximale pour tabindexest 32767. Si les éléments ont le même, tabindexle tabindex correspondra à l'ordre source dans le balisage. Une valeur négative supprimera l'élément de l'index de tabulation afin qu'il ne soit jamais focalisé.

Si un élément se voit attribuer un tabindexde -1celui-ci supprimera l'élément et il ne sera jamais focalisable mais le focus peut être donné à l'élément par programmation element.focus().

Si vous spécifiez l' tabindexattribut sans valeur ou avec une valeur vide, il sera ignoré.

Si l' disabledattribut est défini sur un élément qui a un tabindex, l'élément sera ignoré.

Si un tabindexest défini n'importe où dans la page, peu importe où il se trouve par rapport au reste du code (il pourrait être dans le pied de page, la zone de contenu, où que ce soit) s'il existe un défini, tabindexl'ordre de tabulation commencera à l'élément auquel la tabindexvaleur la plus basse est explicitement affectée au- dessus de 0. Il parcourra ensuite les éléments définis et ce n'est qu'après que les tabindexéléments explicites auront été tabulés, qu'il reviendra au début du document et suivra l'ordre de tabulation naturel.

Dans la spécification HTML4, seuls les éléments suivants prennent en charge l'attribut tabindex: ancre, zone, bouton, contribution, objet, sélectionner, et zone de texte. Mais la spécification HTML5, avec l'accessibilité à l'esprit, permet à tous les éléments d'être attribuéstabindex .

-

Par exemple

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

est le même que

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

car indépendamment du fait qu'ils sont tous assignés tabindex="1", ils suivront toujours le même ordre, le premier est le premier et le dernier est le dernier. C'est aussi pareil ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

car vous n'avez pas besoin de définir explicitement tabIndex s'il s'agit d'un comportement par défaut. Un divpar défaut ne sera pas focalisable, les anchorbalises le seront.

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

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

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

Dans l'exemple suivant, la première fois que vous appuyez sur tab, 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 aucun index d'onglet, 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 tabulez plus de fois que ce que vous avez spécifié pour les tabindex, le focus se déplace comme s'il n'y avait pas de tabindex, c'est-à-dire dans l'ordre d'apparition des balises HTML

Il peut être utilisé pour modifier la séquence de navigation par défaut du focus de l'élément de 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.

Normalement, lorsque l'utilisateur tabule de champ en champ dans un formulaire (dans un navigateur qui autorise la tabulation, tous les navigateurs ne le font pas), l'ordre est l'ordre dans lequel les champs apparaissent dans le code HTML.

Cependant, vous souhaitez parfois que l'ordre de tabulation se déroule un peu différemment. Dans ce cas, vous pouvez numéroter les champs à l'aide de TABINDEX. Les onglets circulent ensuite dans l'ordre du TABINDEX le plus bas au plus élevé.

Plus d'informations à ce sujet peuvent être trouvées ici w3

une autre bonne illustration peut être trouvée ici

En termes simples, tabindexest utilisé pour se concentrer sur les éléments. Syntaxe: tabindex="numeric_value" il numeric_values'agit du poids de l'élément. La valeur inférieure sera accessible en premier.

L' attribut HTML tabindex est chargé d'indiquer si un élément est accessible par la navigation au clavier . Lorsque l'utilisateur appuie sur la touche Tab, le focus est déplacé d'un élément à un autre. En utilisant l'attribut tabindex, le flux de l'ordre de tabulation est décalé.

La tabulation des contrôles se produit généralement de manière séquentielle, comme ils apparaissent sur le code HTML.

En utilisant tabindex, la tabulation ira du contrôle avec le tabindex le plus bas au contrôle avec le tabindex le plus élevé dans l'ordre séquentiel tabindex