Juste un petit point sur les tabindex; ça sera rapide, je n'ai pas la verve d'Eric ou de Vincent ;-)
En fait, je me demandais la différence entre des valeurs 0 et -1 pour un tabindex. Un collègue bien connu m'a assuré que la valeur 0 était illégale.
Or, étant donné qu'il n'a tort que très rarement, surtout dans ce domaine, je me vois ravi de l'exposer publiquement à votre ire. En effet, la valeur 0 n'est pas illégale ! Ce qui ne répond pas, pour l'instant, à ma question, je l'avoue.
J'ai donc trouvé une explication bien complète, et j'ai même été fouiller dans les spec HTML 4 et HTML 5, et voici ce qu'il en ressort :
- un tabindex à la valeur -1 signifie que l'élément où il s'applique ne pourra pas obtenir le focus avec la touche TAB (comme on dit chez nous: il ne sera pas tabulable)
- un tabindex à la valeur 0 signifie que l'élément sera tabulable, mais il se trouvera après tous ceux ayant déjà un tabindex. Cela signifie qu'en HTML4, tout se passe comme si le tabindex n'était pas spécifié; en revanche, en HTML5, cela permet de rendre un élément tabulable, alors qu'il ne l'est normalement pas.
Attention, en HTML4, l'attribut tabindex n'est valable que sur certains éléments. En HTML5, il est valable partout. Ce comportement est déjà implémenté dans plusieurs navigateurs (dont Firefox, et IE6), je laisse le soin à mes excellents visiteurs de compléter en commentaire (en utilisant le test fourni sur la page du Fluid Project).
Oui, je sais, j'ai mis accessibilité dans le titre, attisant par là votre curiosité malsaine. J'y viens, j'y viens.
En fait, sur les interfaces dynamiques, on peut avoir des choses du style : des div qui apparaissent et disparaissent (par exemple une boîte de dialogue), des images avec juste des évènements dessus, etc. Oui, c'est mal, mais ça arrive. Pour améliorer l'accessibilité, on va rendre certains éléments tabulables en utilisant un attribut tabindex.
Pour une boîte de dialogue, on va même lui donner le focus... en effet, autrement, un utilisateur de lecteur d'écran ne la verra pas, car elle sera ajoutée tout à la fin du DOM, ce qui est super pratique pour quelqu'un qui navigue au clavier.
Des remarques ?
5 réactions
1 De Stéphane - 25/12/2008, 21:54
Ah voilà, c'est ça. Boh, illégal, inutilisable, hein.
C'est kif-kif à vingt minutes des vacances :)
2 De Juju - 25/12/2008, 21:56
pkoi inutilisable ? :)
ça permet de pouvoir l'ajouter dans le cycle de tabulation, c'est déjà pas mal !
3 De clark - 27/12/2008, 17:02
jolie mauvaise foi stéphane :)
Ceci dit, je préfère réserver mon ire pour juju la prochaine fois qu'il n'aura pas raison. Désolé
4 De Stéphane Deschamps - 05/01/2009, 17:25
Me revoilà :)
C'est inutilisable parce que, comme tu le dis, ça le met dans la pile comme étant le dernier élément tabulable. Alors qu'on va pas se faire suer, qu'il suffit de mettre -1 et les vaches seront bien gardées.
Donc en fait on s'aime tous :)
5 De goetsu - 29/05/2009, 14:12
-1 c'est à utiliser via javascript pour permettre la mise du focus sur un élément qui ne peux normalement pas le recevoir (très pratique en qu'à d'utilisation d'ARIA par exemple)
le 0 ça rend focusable un élément qui ne l'est pas normalement mais sans modifier son ordre par rapport au flux exemple je met dans une page 4 lien puis un div avec un tabindex 0 il devient focusable en 5ème position