Blog Alsacréations

De quoi s'agit-il ?

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 et constitue donc une alternative de navigation à l'aide du clavier.

L'attribut "tabindex" permet de modifier ce parcours "naturel".

Implémentation

Tabindex s'applique aux éléments A, AREA, BUTTON, INPUT, OBJECT, SELECT et TEXTAREA, de la manière suivante :

<a href="lien.html" tabindex="n">

"n" étant un numéro définissant l'ordre du lien dans la série de liens et de contrôles de la page.

Résultat

La "tabulation" commence par l'élément portant le tabindex le plus petit, puis elle suit l'ordre croissant des tabindex.

Lorsque tous les éléments ayant un attribut "tabindex" sont épuisés, la tabulation continue son parcours en revenant au premier lien dénué de tabindex, c'est à dire au début de l'ordre des éléments HTML.

Remarque importante concernant la numérotation

La numérotation n'a pas à être une suite continue : on peut passer directement de tabindex=1 à tabindex=100.

Cette possibilité permet, en cas de rajout de liens dans la page, d'éviter de reprendre toute la numérotation après coup.

Nous voilà donc fixés sur cette fonctionnalité et son usage.

Mais, quel est l'intérêt de modifier le parcours naturel de l'ordre de tabulation ?

Le recours à des tabindex est très souvent signe que la structure pose problème ou nécessite l'implémentation de liens de navigation interne.

L'ajout sur une page existante est relativement simple, en tous cas beaucoup plus facile que de reprendre la conception de a jusqu'à z et reste une alternative pour améliorer, dans certains cas, l'accessibilité d'un site existant.

Mais la question est toujours délicate à résoudre.

Pour l'exemple 

Imaginons un formulaire au milieu d'une page pour lequel l'ordre naturel de tabulation n'est pas satisfaisant.

En forcant un ordre à l'aide des tabindex uniquement pour le formulaire, nous obtiendrons le résultat suivant : La tabulation va désormais commencer par le formulaire, puis reprendre au premier lien ou contrôle dénué de tabindex et ce, en sautant le formulaire lorsqu'elle arrivera à nouveau sur celui-ci.

Autrement dit, tout l'ordre de tabulation de la page s'en trouvera bouleversé, à moins de prendre en compte les tabindex pour la totalité des liens et contrôles, ce qui peut s'avérer très fastidieux.

Il sera préférable, en fin de compte, de corriger la structure du formulaire fautif dont l'ordre de tabulation "naturel" n'est pas cohérent : plutôt que de soigner le symptôme, mieux vaut traiter directement la cause structurelle.

Il y a, en effet, beaucoup plus de désavantages que d'avantages à l'utilisation des tabindex.

Parmi les plus gros problèmes, on peut citer :

1. La maintenance où une seule erreur, un seul oubli lors d'une mise à jour risque de rendre la navigation tabulaire totalement incohérente. Le maintien de la cohérence sera d'autant plus fastidieux si plusieurs personnes participent à l'intégration des contenus (cas d'un CMS par exemple).
2. Les contenus dynamiques où la gestion d'une structure de tabindex dynamique est plus qu'aléatoire, même en utilisant des classes de nombres. La solution de ne pas les utiliser pour du contenu dynamique créé de facto un terrible dilemme : le contenu dynamique accessible à la tabulation sera systématiquement rejeté en dernier !!

Par ailleurs, une structure de tabindex tend à désynchroniser le flux de la navigation, cela ne pose généralement pas de gros problèmes en affichage graphique où l'on dispose de répères visuels, en revanche avec un lecteur d'écran, cela créé de la confusion et complique la compréhension de la structure hiérarchique du flux dont la maîtrise est capitale pour un non-voyant.

Généralement, les tabindex sont superflus, en tout cas il n'y à aucune nécessité à les utiliser si l'ordre de tabulation naturel est satisfaisant.

Dans le cas inverse, mieux vaut réfléchir sur la structure et/ou implémenter des liens d'évitement ou une table des matières.

Remarque subsidiaire

En l'absence de tabindex, certains validateurs génèrent un avertissement pour s'assurer que l'omission est bien voulue.

En tout état de cause, c'est le contraire qui devrait se produire : un avertissement pour s'assurer qu'une structuration plus rigoureuse du document n'aurait pas permis de se passer des tabindex.

Conclusion

• concrètement: puisqu'un certain ordre de tabulation optimal existe nécessairement dans un interface Web, tous les points de vue (accessibilité, ergomie, interopérabilité, notion de structure HTML, robustesse, etc.) invite à obtenir cet ordre uniquement via l'ordre linéaire du code.
• sur le fond : tabindex est une confusion entre la notion de structure HTML (décrire l'organisation logique du document) et un préjugé totalement arbitraire de la manière dont l'utilisateur devrait interagir avec celui-ci. En fait, cet attribut ne devrait sans doute pas exister en (X)HTML 1.0 strict et au-delà, car il ne relève pas stricto sensu de la structure.

Pour anecdote dans le contexte du fil de cette discussion

... Et moi qui me prends la tête avec les tabindex, croyant bien faire, alors que les menus s'affichent à l'écran dans le bon ordre Et si on créait le club des PTNNTI (Prises de Têtes Non Nécessaires pour Tabindex Inutiles) ...

Et j'ajoute avec une honte que j'ose à peine avouer que j'ai en plus testé les ajouts de tabindex impliquant la reprise de tous les autres puisque j'avais bien scrupuleusement suivi l'ordre numérique 1 à 1 et même pas imaginé de passer de 10 à 100 ...

Moralité de l'histoire

Comme nous l'a si souvent soufflé Laurent : Don't think how, but why !

D'après une idée originale du Collectif Alsacreations.

Avec, dans les rôles principaux : Laurent Denis et Jean-Pierre Vilain.

Adaptation et mise en scène : Véronique Cuomo.