tabindex est un attribut global responsable de deux choses:
- il définit l'ordre des éléments "focalisables" et
- it rend les éléments "focusables" .
Dans mon esprit, la deuxième chose est encore plus importante que la première. Très peu d’éléments peuvent être mis au point 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>, etc.), et la manière de rendre votre interface réactive non seulement aux événements de souris, mais également à ceux de clavier. (par exemple 'onkeypress') consiste à rendre ces éléments focalisables. Enfin, si vous ne souhaitez pas définir l'ordre, mais simplement rendre votre élément centrable, utilisez tabindex="0" sur tous ces éléments:
<div tabindex="0"></div>
De plus, si vous ne voulez pas que la mise au point soit possible via la touche de tabulation, utilisez 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 invité à parcourir 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 tabindex est utilisé pour définir une séquence que les utilisateurs suivent lorsqu'ils utilisent la touche de tabulation pour parcourir une page. Par défaut, l'ordre de tabulation naturel correspond à l'ordre de la source dans le balisage.
L'attribut content tabindex permet aux auteurs de contrôler si un élément est censé être focalisable, s'il est censé être accessible via une navigation par focus séquentiel et ce qui doit être l'ordre relatif de l'élément aux fins de la navigation par focus séquentiel. Le nom "index de tabulation" provient de l'utilisation courante de la touche "tabulation" pour naviguer dans les éléments activables. Le terme "tabulation" fait référence à la progression dans les éléments focalisables qui peuvent être atteints en utilisant la navigation par focus séquentielle.
Recommandation du W3C: HTML5
Section 7.4.1 Navigation du focus séquentiel et attribut tabindex
tabindex commence à 0 ou à un nombre entier positif et s’incrémente vers le haut. Il est courant de voir la valeur 0 évitée, car dans les anciennes versions de Mozilla et d'IE, le tabindex commençait à 1, passait à 2 et seulement après 2 il passait à 0, puis à 3. La valeur entière maximale pour tabindex est 32767. Si les éléments ont le même nom tabindex, alors 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 ciblé.
Si un élément se voit attribuer un tabindex of -1, il sera supprimé et l'élément ne pourra jamais être mis au point, mais l'élément peut être mis au point par programme à l'aide de element.focus().
Si vous spécifiez l'attribut tabindex sans valeur ou avec une valeur vide, il sera ignoré.
Si l'attribut disabled est défini sur un élément qui a un tabindex, l'élément sera ignoré.
Si un tabindex est défini n'importe où dans la page, peu importe où il se trouve par rapport au reste du code (il peut se trouver dans le pied de page, dans la zone de contenu, où qu'il soit), s'il existe un tabindex défini, l'ordre de tabulation commence à l'élément auquel est explicitement attribuée la valeur tabindex la plus basse supérieure à 0. Il passera ensuite en revue les éléments définis et après avoir mis en évidence les éléments tabindex explicites, 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 , entrée , - objet , sélectionner et textarea . Mais la spécification HTML5, avec l’accessibilité en tête, permet d’attribuer à tous les éléments 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>
car indépendamment du fait qu'ils soient tous affecté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 le tabIndex s'il s'agit d'un comportement par défaut. div par défaut ne sera pas focusable, les balises anchor le seront.
Contrôle de l’ordre de tabulation (en appuyant sur la touche tab touche 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, lorsque vous appuierez pour la première fois sur l'onglet, votre curseur se déplacera sur #foo, puis sur #awesome, puis sur #bar.
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
Si vous n'avez défini aucun index de tabulation, le focus clavier suivra les balises HTML de votre page dans l'ordre dans lequel elles ont été définies dans le document HTML.
Si vous tabulez plus de fois que vous n'avez spécifié de tabindex, le focus sera déplacé 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 des éléments 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 passe d'un champ à un autre dans un formulaire (dans un navigateur qui autorise la tabulation, ce n'est pas le cas de tous les navigateurs), l'ordre est celui 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 défilent ensuite dans l'ordre, du plus bas au plus haut TABINDEX.
Plus d'informations à ce sujet peuvent être trouvées ici w
une autre bonne illustration peut être trouvée ici
En mots simples, tabindex est utilisé pour se concentrer sur des éléments. Syntaxe: tabindex="numeric_value" This numeric_value est le poids de l'élément. La valeur la plus basse sera consultée en premier.
Le HTML tabindex atribute est chargé d'indiquer si un élément est accessible par la navigation au clavier . Lorsque l'utilisateur appuie sur la touche de tabulation , le focus est déplacé d'un élément à un autre. En utilisant l’attribut tabindex, le flux d’ordre de tabulation est décalé.
La tabulation des contrôles se produit généralement de manière séquentielle à mesure qu'ils apparaissent dans le code HTML.
À l'aide de 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 de tabindex