Tu t’es vu quand tu tabules ?

Lorsque l’on parle de navigation au clavier dans une page Web, on pense immédiatement à la touche Tabulation. L’appui sur cette touche permet en effet de passer d’un élément focusable à l’autre.

Élément focu quoi ?? Focusable. Qui peut prendre le focus. Dans une page Web, c’est tout ce qui est un lien ou un élément de formulaire (champ, bouton, case à cocher, etc.).

Essaie pour voir : appuie sur la touche Tabulation (Tab pour les intimes) jusqu’à atteindre le lien que tu veux dans cette page. Et pour revenir en arrière, maintiens enfoncée la touche Majuscule et tabule de plus belle. Chouette, hein ? Tu pourrais même y prendre goût…

Tabuler, un sacerdoce

Sauf que sur de trop nombreux sites, tabuler peut vite devenir un calvaire : des menus avec des centaines de liens, sans aucun moyen de les contourner. Et c’est pire encore si le liseré qui normalement entoure l’élément focusé a été supprimé par un graphiste/intégrateur/développeur/client-qu’a-un-beau-frère-dans-le-ouèbe qui trouvait ça moche. Mais le pire du pire reste le piège au clavier : tu as beau tabuler comme un malade, pas moyen d’atteindre telle zone de page, parce que quelqu’un a bidouillé le code de manière à ce que le focus ne passe jamais par les éléments qu’elle contient.

Oh, ce n’est jamais intentionnel, juste maladroit et mal gaulé. N’empêche, l’utilisateur du clavier, que tu es, est bloqué, et probablement bien énervé. Alors imagine lorsque le clavier est ton seul moyen de naviguer…

On pourrait attendre patiemment que tous les sites appliquent enfin les règles 7.3, 12.13 et 12.14 du RGAA, mais autant parier sur la victoire d’un pingouin au prochain prix Nobel de médecine. Fort heureusement, une fonctionnalité méconnue des navigateurs permet de contourner le problème dans la plupart des cas.

Le chapitre où je te sauve de la tendinite de l’annulaire gauche

CTRL+F, tu connais forcément. Fonction magique, qui permet de trouver toutes les occurrences d’une chaîne de caractères dans la page. La présentation diffère d’un navigateur à l’autre, mais le principe est le même : la zone de dialogue permet de naviguer dans les résultats avec des boutons type Précédent/Suivant. Généralement, un bouton de fermeture permet de, bah, fermer la zone de dialogue, ce que fait tout aussi bien la touche Échap.

Et c’est là que c’est cool : si le résultat sélectionné est dans un lien, ou un bouton, le navigateur prend le focus dessus. Finies les crampes du doigt à tabuler 200 fois par page ! Finies les zones inatteignables ! Vive la navigation rapide !

Particularité intéressante : ça marche aussi pour des éléments hors écran (comme le sont parfois les liens d’évitement ou les contenus de slideshows). La recherche du terme ne fera pas apparaître le texte caché, en revanche la prise de focus (fermeture du dialogue de recherche) permettra d’afficher ce texte.

Attention cependant : si la méthode de masquage retire le contenu du flux (typiquement : display:none ou visibility:hidden), fort logiquement le contenu n’est pas trouvable par cette méthode.

On peut aussi utiliser cette astuce sous Firefox pour les étiquettes de champs de formulaires. Sur ce navigateur, la tabulation suivante positionnera le curseur sur l’élément focusable suivant, et donc le champ situé juste après le texte.

Enfin, cela marche également pour les éléments dans des <iframe>.

Sauvé? Euh, ça dépend

Si tu souhaites appliquer cette méthode, il faudra faire le bon choix de navigateur, car ils n’ont pas tous le même comportement :

• Firefox est de loin le plus pratique : l’interface est claire, et surtout, l’appui sur Tab permet de se positionner sur l’élément focusable juste après le texte surligné ; ce qui rend l’astuce efficace même sur les textes non focusables.
• Chrome propose un petit plus : dans l’ascenseur vertical, l’emplacement des textes trouvés est marqué par un trait coloré. Deux points négatifs cependant: l’occurrence courante est en orange, versus jaune pour les autres (ami dalto, tu l’as dans l’os). Et la première tabulation ramène le focus sur le premier élément de la page, du coup ce n’est efficace que si l’élément trouvé est effectivement focusable.
• Internet Explorer 11 fait le job ; mais même si le texte recherché est dans un élément focusable, on n’a pas l’impression d’avoir pris le focus, il manque l’indication visuelle. Il faut appuyer sur Entrée pour se rendre compte que ça fonctionne. En revanche, bon point : le comportement est le même que sur Firefox : le curseur repart de la position courante.
• Opera déçoit : outre un comportement similaire à Chrome pour la première tabulation, il ne semble pas possible de passer d’une occurrence à l’autre au clavier, ce qui en limite beaucoup l’intérêt pour cet usage.
• Safari est en dessous de tout : ça ne marche tout simplement pas, le fait de fermer la boite de dialogue ne permet pas de rester sur l’élément trouvé. Pire encore : par défaut, la touche Tabulation ne marche pas non plus ! Il faut se rendre dans les réglages de Préférences (onglet « Avancées », alias « tout ce qu’on n’a pas réussi à mettre ailleurs ») pour indiquer que l’on veut pouvoir tabuler sur tous les éléments. Détail cocasse : je n’ai pas trouvé le moyen d’atteindre cet onglet seulement au clavier, puisqu’il ne suit pas le comportement standard, qui est d’être sélectionnable via les flèches de direction.

Voilà, on a à peu près fait le tour

Alors, ton impression? Personnellement, je suis très friand de cette astuce, car même si je peux utiliser une souris, je me sens parfois ralenti lorsque je dois lâcher le clavier pour aller taquiner le mulot. Et c’est également très pratique pour aller chercher rapidement, sans forcément savoir où ils se trouvent, des trucs comme « contact », « cherche » ou « plan » – car ces taquins de webdesigners débordent d’imagination lorsqu’il s’agit de les planquer dans la page.

Alors, sois smart, sois swag : ne tabule plus, controlèffe !