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

229

À quoi sert l' tabindexattribut en HTML?

dormir
la source

Réponses:

301

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>
Konstantin Smolyanin
la source
2
J'ai découvert que ça <div tabindex>marche aussi. Y a-t-il une raison de ne pas l'utiliser?
danijar
5
L'utilisation de tabindex de -1 est pratique pour des choses comme sauter les liens. Vous pouvez créer un lien vers un élément juste au-dessus du contenu auquel vous essayez de lier l'utilisateur sans que l'élément lié à l'élément lui-même soit accessible.
Brett
4
Il convient de noter - et la réponse devrait probablement être corrigée - que la valeur -1ne convient pas lorsque vous "ne voulez pas qu'elle soit mise au point", mais plutôt lorsque vous souhaitez empêcher la mise au point en raison de la navigation au clavier. L'élément peut toujours être focalisé, mais pas avec le clavier.
amn
2
@danijar yes: c'est une violation des spécifications. Selon html.spec.whatwg.org/multipage/… , "L'attribut tabindex, s'il est spécifié, doit avoir une valeur qui est un entier valide" .
Mark Amery
C'est -1la fin de ma recherche d'une solution pour les articles qui avaient une position absolue et qui se comportent de façon amusante lorsqu'ils sont focalisés par l'onglet! HOorraaayyyyy.
John Mutuma
54

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"  />
Robert
la source
-> Et si le tabindex est -1? Qu'est-ce que ça veut dire?
7
@AlyssaGono vous semblez ne pas avoir lu la réponse avec 85 votes positifs ... tabindex de -1 signifie que vous ne pouvez pas atteindre cet élément en appuyant sur le bouton de tabulation
John Ruddell
24

le est 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: , , , , , , et . 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.

davidcondrey
la source
Quelles versions d'IE et de Mozilla commencent tabindexà 1 au lieu de 0 ?
arminrosu
-1; cette réponse est un peu confuse. Vous mentionnez que les "anciennes versions" d'IE et de Firefox commencent par tabulation à tabindex 1 au lieu de tabindex 0 ... mais c'est ce que font tous les navigateurs, comme l'exige la spécification! Vous vous contredisez également en disant d'abord "le tabindexdébut à 0", puis en disant plus tard "l'ordre de tabulation commencera à l'élément auquel la tabindexvaleur la plus basse est explicitement attribuée au- dessus de 0" .
Mark Amery
18

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

À M
la source
6
De plus, avoir tabindex rend un élément sélectionnable par un clic de souris. (Ajoute des contours en pointillés, peut être stylisé en utilisant :focus)
user123444555621
@ Pumbaa80 Vous pouvez de toute façon sélectionner n'importe quel élément d'entrée, et il en va de même pour l'utilisation du CSS ": focus". L'attribut tabindex est facultatif.
Drew
6
Cela vaut uniquement pour les éléments d'entrée. Mon commentaire s'applique à tout type d'élément. Voir jsfiddle.net/XsYCj pour un exemple.
user123444555621
8

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

Eldamir
la source
3

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.

cherouvim
la source
3

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

Mulki
la source
2

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.

Aman Dhanda
la source
"La valeur inférieure sera accessible en premier." - pas tout à fait vrai; Les valeurs 0 et négatives ont des significations spéciales.
Mark Amery
1

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é.

Nesha Zoric
la source
0

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

Kamal
la source