ACCESSIBILITE.WEB.FREE.FR : site de formation pour débutants !

Liens Connexes


Tabindex

Accesskey

Et Tabindex, c'est quoi au juste ?

Tabindex : C’est quoi au juste ?

La touche "tabulation" permet, dans la grande partie des navigateurs, de parcourir les liens et contrôles de formulaires dans l'ordre où ils apparaissent dans le code HTML. L'attribut "tabindex" va permettre de modifier ce parcours "naturel".

D’accord, mais comment ça marche exactement ?

  • l’attribut tabindex s'applique aux élément A, AREA, BUTTON, INPUT, OBJECT, SELECT et TEXTAREA.
  • la "tabulation" commencera alors par l'élément portant le tabindex le plus petit.
  • elle suivra l'ordre croissant des tabindex, qui n'a pas à être une suite continue : on peut passer directement de tabindex=1 à tabindex=100. Cela est très utile, car des tabindex continus m'obligeraient à reprendre toute la numérotation si j'ajoute après coup un lien quelque part dans ma liste...
  • Quand la "tabulation" a épuisé tous les éléments ayant un attribut "tabindex", elle continue son parcours en revenant au début de l'ordre des éléments HTML, au premier lien dénué de tabindex.

Problème:

Est-ce que je peux le faire pour un seul élément de ma page ?

Si je mets des tabindex à un élément de ma page html comme par exemple uniquement à un formulaire, alors je bouleverse en fait tout l'ordre de tabulation dans ma page, puisque celle-ci va désormais commencer par le formulaire, puis reprendre au premier lien ou contrôle dénué de tabindex (Quand elle arrivera à nouveau au formulaire, elle "sautera" celui-ci).

Solution:

Il faut donc prendre en compte les tabindex pour la totalité de mes liens et contrôles.

Attention:

Un seul tabindex oublié peut complètement bouleverser l’ordre de navigation. Il faudra donc être très prudent

Exemple:

<p><a href="lien1.htm" title="mon premier lien" tabindex="1" >lien 1 </a></p>
<p><a href="lien2.htm" title="mon deuxième lien" tabindex="2">lien 2 </a></p>
<p><a href="lien1.htm" title="mon troisème lien" tabindex="3">lien 3 </a></p>

Tabindex: superflu ou pas ?

  • Il faut privilégier la bonne structure de notre code. Si l’ordre des éléments dans le code est bon l’utilisation de tabindex n’est pas nécessaire car les tabulations suivront l’ordre de tabulation naturel.
  • Si ce n’est pas le cas, il est préférable de revoir la structure des éléments dans le code plutôt que de corriger ce problème grâce aux tabindex. On pourra également penser à implémenter des liens d'évitement.
  • Le cas échéant, si la structure est incohérente, utilisez des tabindex mais ce n’est pas la solution que recommande la majorité des forums et des sites traitant du sujet.

En résumé, il ne fait absolument pas compter sur les tabindex pour corriger en surface un problème d'accessibilité lié à la structure du document.