L'ordre de tabulation dans les formulaires
Dans la directive "La totalité du site est utilisable au moyen du clavier", il est question de l'ordre de tabulation et de l'attribut tabindex. Nous remarquons que cet attribut HTML est souvent utilisé erronément. Cet article a pour but de clarifier certaines choses.
Qu'est ce que l'ordre de tabulation et comment est-il défini?
L'ordre de tabulation est l'ordre dans lequel le focus va se déplacer d'un élément à l'autre à l'écran lorsque vous laissez de côté la souris et que vous utilisez la touche TAB pour naviguer dans la page. Les personnes ayant un handicap moteur naviguent souvent de cette manière dans la page parce qu'elles ne peuvent pas utiliser la souris. Les personnes aveugles
peuvent également naviguer de cette manière mais préfèrent souvent utiliser des raccourcis qui permettent de naviguer plus rapidement dans la page.
L'attribut tabindex permet de déterminer dans quel ordre les éléments d'une page seront parcourus.
Les seuls éléments HTML qui peuvent avoir un attribut tabindex sont A et AREA pour les hyperlinens, BUTTON, INPUT, SELECT et TEXTAREA pour les formulaires et OBJECT pour les objets multimédia.
Lorsque l'attribut tabindex n'est pas utilisé, l'ordre de tabulation suivra l'ordre du code source. Celui-ci correspond en général à l'ordre logique de lecture, et l'attribut tabindex est
donc souvent superflu.
Pourquoi peut-il être dangereux d'utiliser l'attribut tabindex?
Lorsque l'attribut tabindex est utilisé, il faut le définir pour tous les éléments. Si ce n'est pas le cas, l'ordre de lecture sera le suivant: d'abord tous les éléments qui ont un attribut tabindex, puis tous les autres éléments dans l'ordre du code source. Si vous oubliez de donner un attribut tabindex à quelques champs de formulaire cela pourrait donc résulter dans un ordre de lecture particulièrement illogique. Si par exemple on oublie l'attribut tabindex du bouton d'envoi d'un formulaire, le visiteur pourra remplir le formulaire puis sera par exemple envoyé vers un lien en début de page au lieu de pouvoir envoyer le formulaire.
Un exemple
Prenons www.google.be comme exemple.
1. Tabindex n'est pas utilisé
Si l'attribut tabindex n'est pas utilisé, un utilisateur doit appuyer 6 fois sur la touche tab pour arriver au champ de saisie pour faire sa recherche. Le focus se déplace d'abord sur les
liens : images, groupes de discussion, nouvelles, etc. Ensuite il atteint le champ de saisie puis le bouton d'envoi.
2. Le champ de saisie a un attribut tabindex="1"
Le vsiiteur arrive d'abord sur le champ de saisie puis sur le bouton d'envoi. NEnsuite il parcourera les liens.
3. Tous les champs de formulaires ont un attribut tabindex
Il y a d'autres champs de forumaile sur cette page, en plus du champ de saisie et du bouton d'envoi. Quelqu'un qui utilise un lecteur d'écran ou un fort agrandissement n'aurait peut-être
pas remarqué dans les deux exemples précédents qu'il y a également une possibilité de choisir au moyen de boutons radio entre rechercher dans le web, les pages belges ou les pages
francophones.
La solution serait de donner un tabindex ="1" au champ de saisie, "2" aux trois boutons radio et "3" au bouton d'envoi.
Un visiteur du site qui navigue avec le clavier arrivera d'abord dans le champ de saisie, puis pourra choisir dans quel type de pages faire sa recherche et ensuite démarrer la recherche.
Cela nous semble l'ordre le plus logique. Même si les boutons radio se trouvent plus loin dans le code source on peut les intercaler au bon endroit dans le formulaire au moyen du
tabindex.
En résumé
- La plupart des formulaires n'ont pas besoin de tabindex
- Tous les éléments qui ont un tabindex recevront le focus en premier, et ensuite les autres éléments du document. Cela peut résulter dans un ordre de tabulation illogique si certains
éléments n'ont pas reçu de tabindex. - Si vous utilisez le tabindex pour des éléments de formulaire veillez dons à n'oublier aucun élément du type A, AREA, BUTTON, INPUT, SELECT, TEXTAREA ou OBJECT