Réponses:
tabindex
est un attribut global responsable de deux choses:
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>
-1
ne 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.
-1
la 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.
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 tabindex
commence à 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 tabindex
est 32767
. Si les éléments ont le même, tabindex
le 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 tabindex
de -1
celui-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' tabindex
attribut sans valeur ou avec une valeur vide, il sera ignoré.
Si l' disabled
attribut 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 pourrait être dans le pied de page, la zone de contenu, où que ce soit) s'il existe un défini, tabindex
l'ordre de tabulation commencera à l'élément auquel la tabindex
valeur 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
.
-
<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 div
par défaut ne sera pas focalisable, les anchor
balises le seront.
tabindex
à 1 au lieu de 0 ?
tabindex
début à 0", puis en disant plus tard "l'ordre de tabulation commencera à l'élément auquel la tabindex
valeur la plus basse est explicitement attribuée au- dessus de 0" .
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
:focus
)
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
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, tabindex
est utilisé pour se concentrer sur les éléments. Syntaxe: tabindex="numeric_value"
il numeric_value
s'agit du poids de l'élément. La valeur inférieure sera accessible en premier.
<div tabindex>
marche aussi. Y a-t-il une raison de ne pas l'utiliser?