[Accessibilité web] La navigation au clavier sur un site web   

Accueil > Articles > La navigation au clavier sur un site web

La navigation au clavier sur un site web

La navigation sur un site web nous semble facile et évidente dès lors que l'on possède une souris d'ordinateur. Toutefois, pour un grand nombre d'internautes oubliés qui ne peuvent utiliser que leur clavier, cette navigation est compliquée. Cet article présente la difficulté de naviguer sur certains sites web sans souris et les bonnes pratiques qui permettent de faciliter l'efficience de navigation pour ces utilisateurs.

Tabulation sur un site web

A votre avis, comment navigue les internautes s'ils n'ont pas de souris ? Ils utilisent la touche tabulation de leur clavier. Cela permet de se déplacer d'élément en élément. Un élément étant soit un lien ou une zone de formulaire (champ texte, liste déroulante, case à cocher …). Cette méthode est un peu contraignante puisqu'il faut parfois utiliser une bonne dizaine de fois la touche tabulation avant d'atteindre le lien souhaité ou la zone voulue (dans le cas d'un formulaire).

Symbole handicap

Dans une publication de 2006 intitulée « On the efficiency of keyboard navigation in Web sites » (traduction : l'efficience de navigation au clavier sur les sites web), l'auteur a récolté des données stupéfiantes. Il a comparé la navigation sur de célèbres sites web avec ou sans l'utilisation de la souris. Sur des sites de journaux en ligne, avec la souris, la plupart du contenu était accessible à partir de 1,89 clics. En revanche, la même navigation effectuée exclusivement avec le clavier nécessité près de 114 appuis sur la touche tabulation. Cette démesure se caractérise par un temps moyen de 4,63 secondes pour une utilisation à la souris comparé à une moyenne de 48,59 secondes sans souris.

Autre exemple démesuré mis en évidence dans cette étude, l'accès au formulaire de recherche sur un célèbre site d'un journal était accessible en cliquant 166 fois sur la touche tabulation du clavier. Ce chiffre impressionnant n'est pourtant pas perçu par la majorité des utilisateurs qui peuvent accéder au contenu en 1 clic de souris très facile.

De telles différences sont inconcevables pour tous ceux qui envisage une bonne égalité envers tous les internautes, indépendamment de leurs différences d'utilisation des interfaces homme-machine.

La bonne nouvelle, c'est qu'il existe des astuces et bonnes pratiques pour réduire le temps d'accès à un contenu lors d'une navigation au clavier, il suffit juste d'améliorer la prise de conscience envers les designers et intégrateurs web.

Accesskey, la fausse bonne idée

Les Accesskey représente l'une des premières techniques suggérées pour faciliter la navigation au clavier. Un accesskey n'est autre qu'un petit bout de code placé sur un lien pour lui attribuer un raccourci clavier. Pour les adeptes du code HTML, la source de n'importe quelle page web, cela se présente simplement sous la forme d'un attribut HTML sur la balise d'un lien. Ainsi, le lien vers la page d'accueil pouvait avoir un accesskey pour y accéder facilement. Il peut en être de même sur la page « plan du site ».

Code HTML utilisant l'attribut accesskey
Exemple de code HTML utilisant l'attribut accesskey

Cette idée qui semble être une bonne implémentation est en réalité une grossière erreur :

  • La plupart des navigateurs implémente des fonctionnalités à partir d'un raccourci clavier compliqué : ALT + MAJ + Chiffre. Or, si l'utilisateur n'a pas de souris c'est surement parce qu'il a un handicap moteur, alors appuyer sur 3 touches à la fois est une véritable ironie d'un mauvais goût.
  • Le raccourci est limité à un numéro compris entre 0 à 9 sur certains navigateurs. Difficile d'imaginer accéder à l'intégralité d'un site avec seulement 10 combinaison possible.
  • Impossible de savoir ce qui se cache derrière un raccourci clavier avant de l'utiliser. D'ailleurs, impossible de savoir si le site à implémenté des accesskey.
  • Les utilisateurs susceptibles d'utiliser les accesskey possèdent souvent des logiciels d'aide à la navigation complémentaires. Or ceux-ci utilisent parfois les mêmes raccourcis clavier qu'un accesskey, ce qui empêche leur utilisation convenablement.

Autant de mauvaises raisons qui font que ce dispositif n'a pas fonctionné et qu'il est heureusement plus trop utilisé. Les concepteurs de sites web doivent dès lors se rabattre sur des solutions alternatives.

Tout le contenu accessible en haut de page

Ce qui demeure le plus important pour ces utilisateurs c'est de placer les éléments les plus importants en haut de page. Le haut des pages web doit donc comporter au moins 3 éléments essentiels :

  • Des liens d'évitements en haut de page. Ces liens peuvent aider à passer en 1 clic au contenu, au menu, au pied de page, au formulaire de recherche ou même à une page d'aide spécifique. Ces petits liens restent très pratiques et peuvent même être facilement cachés aux internautes qui n'utilisent pas la navigation au clavier.
  • Un moteur de recherche accessible facilement avec la touche tabulation. Cet outil permet une navigation alternative en accédant directement à la page que l'on recherche sans avoir à passer par des pages intermédiaires.
  • Un menu accessible sans difficulté. C'est grâce à ce menu que l'ont peut accéder à toutes les pages d'un site, il ne faut donc pas le négliger et éviter les innovations farfelues tel que des menus dans le pied de page ou des menus non accessible avec une navigation au clavier.

De tels conseils peuvent sembler très classiques et peu original pour certains designers, mais au moins tout le monde est content et personne n'est laissé de côté.

Un retour de la règle des 3 clics ?

Avez-vous déjà entendu parlé de la fameuse règle des 3-clics. Cette règle inventée au cours des années 2000 stipule que toutes les pages d'un site doivent être accessibles en 3 clics de souris sinon l'internaute est lassé et quitte le site. Seul problème, la règle n'est basée sur aucune vérité scientifique, pire les tests démontrent même que cette règle est totalement fausse. Cette pseudo loi de conception est rapidement démentie par les ergonomes professionnels et n'est plus du tout enseigné de nos jours.

Toutefois, il y a bien une chose qui était intéressante avec cette loi, c'est un accès rapide au contenu pour les internautes qui n'utilisent pas la souris. Souvenez-vous de l'étude scientifique présente au début de cet article. Les tests avaient démontré que sur un site mal conçu il fallait appuyer plus d'une centaine de fois sur la touche « tabulation » du clavier pour accéder à un contenu qui est accessible en 3 clics pour ceux qui peuvent utiliser une souris. Un tel exemple démontre bien que cette fameuse règle des 3 clics peut avoir son utilité dans certains cas.

Un bon ordre de navigation grâce à tabindex

Une nouveauté très intéressante commence à voir le jour pour les concepteurs de site web. Jusqu'à présent l'ordre des liens dans le code source permettait de définir l'ordre avec lequel la navigation au clavier passait d'un élément à un autre. C'est pour cela que bien souvent, lors de l'utilisation de la touche tabulation, ce sont les liens en haut à gauche qui sont d'abord sélectionné et qu'il faut utiliser un bon nombre de fois la touche tabulation avant d'accéder aux liens présents dans le pied de page.

Ceci peut maintenant être modifié facilement. L'attribut HTML « tabindex » permet de modifier l'ordre « naturel » pour passer d'un élément à un autre.

Code HTML utilisant l'attribut tabindex
Exemple de code HTML utilisant l'attribut tabindex

Utilisé à bon escient, ce petit attribut permet donc d'avoir accès en priorité aux éléments importants lors d'une navigation au clavier. Il suffit simplement de placer cet attribut sur un lien ou un élément d'un formulaire en définissant un numéro qui correspondra à l'ordre de passage. L'élément en HTML qui aura un tabindex de 1 sera donc appelé en premier lors de l'utilisation de la touche tabulation, et ce, quel que soit sa position sur la page.

Dès lors, même si le formulaire de recherche est présent en bas de page, il est possible d'y accéder en priorité avec un tabindex de 1 ou 2. Il n'y a donc plus d'excuses pour définir une bonne navigation au clavier.

Il ne faut pas hésiter à ce mettre dans la peau des utilisateurs ayant une déficience moteur pour se rendre compte de l'état de votre site web lorsqu'on y navigue exclusivement avec un clavier. Imaginez plusieurs types de handicap, car les déficiences moteurs peuvent prendre plusieurs formes. Vous pouvez même aller jusqu'à vous attacher un bras dans le dos pour vous mettre dans la situation d'un internaute qui ne possède qu'un bras. Cela représente une minorité selon-vous ? Ah bon, vous n'avez jamais connu quelqu'un avec un bras dans le plâtre ?


Article rédigé par le 15/08/2013 à 16h31 dans la catégorie "Accessibilité" du site InfoWebMaster.fr.