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

tabindex est un attribut global responsable de deux choses l'une:

1. il définit l'ordre de "focusable" éléments et
2. il rend éléments "focusable".

Dans mon esprit, la deuxième chose est d'autant plus important que le premier. Il y a très peu d'éléments, qui sont peut recevoir le focus par défaut (par exemple, <a> et les contrôles de formulaire). Les développeurs très souvent ajouter un peu de JavaScript gestionnaires d'événements (comme 'onclick') sur pas focusable éléments (<div>, <span>, et ainsi de suite), et la façon de faire de votre interface d'être sensible non seulement aux événements de souris, mais aussi à des événements de clavier (par exemple 'onkeypress") est de faire de tels éléments peut recevoir le focus. Enfin, si vous ne souhaitez pas définir à l'ordre, mais seulement de rendre votre élément peut recevoir le focus utilisation tabindex="0" sur tous ces éléments:

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

Aussi, si vous ne voulez pas qu'il soit peut recevoir le focus via la touche tab puis utilisez tabindex="-1". Par exemple, le lien ci-dessous ne sera pas concentré tout en utilisant les touches de tabulation pour parcourir.

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

La tabindex est utilisé pour définir une séquence que les utilisateurs lorsqu'ils utilisent la touche de Tabulation pour passer d'une page. Par défaut, le naturel de l'ordre de tabulation correspondra à l'ordre de la source dans le balisage.

Le tabindex contenu de l'attribut permet aux auteurs de contrôler si un élément est censé être focusable, qu'il est censé être accessible à l'aide séquentielle navigation de focus, et ce qui est à l'ordre relatif de l'élément pour l'application séquentielle de navigation de focus. Le nom de l'onglet "index" vient de l'utilisation de la touche "tab" pour naviguer à travers les focusable éléments. Le terme "tabulation" se réfère à aller de l'avant dans la focusable éléments qui peuvent être atteints à l'aide séquentielle navigation de focus.

Recommandation du W3C: HTML5

La Section 7.4.1 Séquentielle accent de la navigation et de l'attribut tabindex

La tabindex commence à 0 ou un nombre entier positif et s'incrémente à la hausse. Il est courant de voir la valeur 0 à éviter parce que dans les anciennes versions de Mozilla et IE, le tabindex serait de commencer à 1, passer à 2, et seulement après 2 serait-il aller à 0 puis 3. L'entier maximum de la valeur pour tabindex est 32767. Si les éléments ont la même tabindex puis le tabindex correspondra à l'ordre de la source dans le balisage. Une valeur négative va supprimer l'élément à partir de l'onglet index de sorte qu'il ne sera jamais porté.

Si un élément est affecté à une tabindex de -1 il va supprimer l'élément et il ne sera jamais peut recevoir le focus, mais l'accent peut être donnée à l'élément par programmation à l'aide element.focus().

Si vous spécifiez le tabindex attribut sans valeur ou une valeur vide, elle sera ignorée.

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

---

Si un tabindex est définie n'importe où dans la page, peu importe où il est en relation avec le reste du code (il pourrait être dans le pied de page, le contenu de la zone, où jamais) si il y a un définies tabindex puis sur l'onglet commande débutera à l'élément qui est explicitement attribuée le plus bas tabindex valeur au-dessus de 0. Il va ensuite parcourir les éléments définis et seulement après l'explicite tabindex éléments ont été à onglets à travers, il sera de retour au début du document et de suivre le naturel de l'ordre de tabulation.

---

En HTML4, spec seulement les éléments suivants à l'appui de l'attribut tabindex: ancre, région, bouton, input, objet, select, et textarea. Mais la spec HTML5, dans un souci d'accessibilité, permet à tous les éléments pour être affecté tabindex.

--

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>

en raison du fait qu'ils sont tous assignés tabindex="1", ils seront toujours suivre le même ordre, le premier est première, et la dernière est la dernière. C'est aussi le même..

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

parce que vous n'avez pas besoin de définir de façon explicite les tabIndex si c'est le comportement par défaut. Un div par défaut ne sera pas peut recevoir le focus, la anchor les balises.

les valeurs que vous définissez déterminer l'ordre que le focus clavier se déplacer entre les éléments du site.

Dans l'exemple suivant, la première fois que vous appuyez sur la touche tab, le curseur se déplacer à #foo, puis le #génial, alors #bar

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

Si vous n'avez pas défini l'onglet index n'importe où, le focus clavier suivez les balises HTML de la page dans l'ordre dans lequel elles sont définies dans le document HTML.

Si vous onglet plus de fois que vous avez spécifié tabindexes pour, l'accent se déplace comme si il n'y avait pas tabindexes, c'est à dire dans l'ordre d'apparition des balises HTML

Normalement, lorsque l'utilisateur onglets d'un champ à un formulaire dans un navigateur qui permet de tabulation, tous les navigateurs ne) de l'ordre est l'ordre les champs apparaissent dans le code HTML.

Cependant, parfois, vous voulez que l'ordre de tabulation à l'écoulement un peu différemment. Dans ce cas, vous pouvez numéroter les champs à l'aide de la propriété TABINDEX. Les onglets puis couler dans l'ordre du plus bas TABINDEX à la plus élevée.

Plus d'infos sur ce qui peut être trouvé ici w3

une autre bonne illustration peut être trouvée ici

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