Tabindex (attribut HTML)

Description

Le Tabindex 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 tabbing naturel correspondra à l'ordre source dans le balisage. Dans certaines circonstances, il peut être nécessaire de remplacer l'ordre de tabbing par défaut, mais il est fortement recommandé de créer une page dans un flux logique et de laisser le navigateur le surmonter dans l'ordre par défaut - une approche qui annule le besoin de l'attribut Tabindex. Un Tabindex peut commencer à 0 et incrément de n'importe quelle valeur. En tant que tel, la séquence 1, 2, 3, 4, 5 serait bien, tout comme 10, 20, 30, 40, 50. Si vous avez besoin d'introduire un Tabindex, il est conseillé d'utiliser une séquence qui contient des intervalles (comme le Deuxième exemple fourni), car cela vous donnera la possibilité d'injecter d'autres contrôles plus tard si besoin est (par exemple, 10, 15, 20) sans avoir à réindexer toutes les valeurs Tabindex sur la page. Si une valeur Tabindex donnée est appliquée à plus d'un élément (par exemple tous les liens dans une section étant donné un Tabindex de «1» et des liens de barre latérale étant donné un tabindex de «2»), l'ordre de tabbing des éléments affectés sera conformément à l'ordre de balisage source. Beaucoup de gens choisiront d'utiliser cette approche plutôt qu'une séquence avec un intervalle défini, tel que 5, 10, 15, car il permet d'ajouter des liens ou des formulaires supplémentaires sans le mal de tête de ré-nombre. Si un tabindex de «-1» est utilisé, l'élément à laquelle il est appliqué ne sera plus focalisable par le clavier. Si un Tabindex est défini n'importe où sur une page - même s'il s'agit du centième lien ou du cinquantième contrôle de formulaire - l'ordre de l'onglet commencera à l'élément avec la valeur Tabindex la plus basse et passe par les incréments. Ce n'est qu'alors que l'ordre des onglets prendra les éléments restants pour lesquels aucun tabindex n'a été défini. En tant que tel, un grand soin doit être pris pour s'assurer que l'ajout d'un Tabindex ne nuit pas à la convivialité de la page dans son ensemble. Si l'attribut désactivé est défini sur un élément qui a un tabindex, ce tabindex sera ignoré.

Exemple

Le tabindex est défini sur "3" pour le lien ci-dessous:

<p>You can try our <a href="cakes.html" <em>tabindex="3"</em>>lovely
     range of cakes</a>.</p>

valeur

Cet attribut peut prendre n'importe quelle valeur numérique.

Des questions fréquemment posées sur l'attribut Tabindex HTML

Quel est le but de l'attribut tabindex dans html?

L'attribut tabindex dans HTML est utilisé pour spécifier l'ordre dans quels éléments recevra une mise au point lorsqu'un utilisateur navigue à travers une page Web à l'aide du clavier. Cet attribut est particulièrement utile pour améliorer l'accessibilité d'une page Web, car il permet aux utilisateurs qui comptent sur la navigation au clavier pour interagir avec la page dans un ordre logique et intuitif.

Comment fonctionne l'attribut tabindex?

L'attribut tabindex fonctionne en attribuant une valeur numérique à chaque élément focalisable sur une page Web. Les éléments avec une valeur Tabindex de 0 sont inclus dans l'ordre de navigation par défaut, tandis que les éléments avec une valeur Tabindex positive sont navigués dans l'ordre de leurs valeurs. Les éléments avec une valeur tabindex négative sont exclus de l'ordre de navigation par défaut.

est le plus souvent utilisé sur les éléments interactifs tels que les liens, les entrées de formulaire et les boutons. L'utilisation de l'attribut Tabindex sur des éléments non interactifs peut conduire à une expérience de navigation déroutante pour les utilisateurs, il est donc généralement recommandé d'éviter de le faire.

Que se passe-t-il si je ne spécifie pas de valeur Tabindex pour un élément?

Si vous ne spécifiez pas de valeur tabindex pour un élément, le navigateur déterminera l'ordre de navigation en fonction de la position de l'élément dans le document HTML. Les éléments qui viennent plus tôt dans le document recevront une mise au point avant les éléments qui viennent plus tard.

Puis-je utiliser des valeurs négatives pour l'attribut tabindex?

Oui, vous pouvez utiliser des valeurs négatives pour l'attribut tabindex. Un élément avec une valeur tabindex de -1 peut toujours recevoir une mise au point par programme (par exemple, via JavaScript), mais elle sera exclue de l'ordre de navigation par défaut. ?

Vous pouvez utiliser l'attribut tabindex pour améliorer l'accessibilité en vous assurant que tous les éléments interactifs de votre page Web peuvent être atteints et opérés à l'aide du clavier. Ceci est particulièrement important pour les utilisateurs qui comptent sur les technologies d'assistance, car ces technologies s'appuient souvent sur la navigation par clavier.

Quelles sont les erreurs courantes à éviter lors de l'utilisation de l'attribut Tabindex?

Des erreurs courantes pour Évitez lors de l'utilisation de l'attribut tabindex inclue en utilisant des valeurs positives inutilement, en utilisant l'attribut sur des éléments non interactifs et en ne spécifiant pas une valeur Tabindex pour les éléments interactifs. Ces erreurs peuvent conduire à une expérience de navigation déroutante ou inaccessible pour les utilisateurs.

Comment l'attribut tabindex interagit-il avec d'autres attributs HTML?

L'attribut Tabindex peut interagir avec d'autres attributs HTML dans un certain nombre de façons. Par exemple, si un élément a une valeur tabindex et est également désactivé (en utilisant l'attribut désactivé), l'élément sera exclu de l'ordre de navigation du clavier.

Puis-je utiliser l'attribut tabindex avec JavaScript?

Oui, vous pouvez utiliser l'attribut tabindex avec JavaScript. Par exemple, vous pouvez utiliser JavaScript pour modifier dynamiquement la valeur tabindex d'un élément, ou pour vous concentrer par programme sur un élément avec une valeur Tabindex spécifique.

Comment puis-je tester l'efficacité de mon implémentation Tabindex?

Vous pouvez tester l'efficacité de votre implémentation Tabindex en naviguant dans votre page Web en utilisant uniquement le clavier. Si vous pouvez atteindre et utiliser tous les éléments interactifs dans un ordre logique, votre implémentation Tabindex est probablement efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!