Vous êtes ici : Accueil > Bloc-notes > Quelles sont les bonnes pratiques d'accessibilité pour les liens d'évitement ?
 
22/11/2012 [FAQ accessibilité Web]

Quelles sont les bonnes pratiques d'accessibilité pour les liens d'évitement ?

Quelles sont les meilleures mises en oeuvre actuelles pour les liens d'évitement (critère AccessiWeb 12.11) ? Réponse à cette question de ma FAQ/base de connaissance accessibilité Web personnelle tirée de la liste de discussion des experts du Groupe de Travail Accessiweb et de celle d'Accesstech.

Ma question était la suivante :

"Pouvez-vous, svp, me faire un retour sur les meilleures mises en oeuvre actuelles pour les liens d'évitement (critère AccessiWeb 12.11) ?

J'en étais resté aux liens "aller à la navigation", "aller au contenu", "aller à la recherche" en haut de page (en plus des liens de sommaire et "haut de page" dans le contenu). Mais j'ai l'impression que ce n'est plus trop à la mode (je ne vois plus les 3 premiers sur les sites récents)…"

Réponse de Raphaël :

"De notre côté, on les met toujours, mais par contre on les cache. A priori ces liens sont faits pour les utilisateurs de clavier.
L'idée est donc de les faire apparaître uniquement à ceux-ci.

Exemple : http://demo.ametys.org/fr/index.html et tu tabules : les liens invisibles initialement apparaissent sous le focus clavier."

Complément de Carsten :

"Idem de mon côté, ces liens recherche, menu et contenu sont toujours essentiels.
Dans le genre qui apparaît au focus clavier celui du Club Med Jobs est particulièrement réussi puisque l'ensemble des liens d'accès rapide apparaît au premier focus sur ce menu : http://www.clubmedjobs.fr/.

Comme le dit Romain, la navigation au clavier via les landmarks ARIA sur les derniers navigateurs n'est pas encore bien implémentée. Il faut par exemple un plugin sous Firefox pour gérer cette fonctionnalité : https://github.com/davidtodd/landmarks

Encore un lien, ici sur un comparatif de quelques intégrations de menu d'accès rapide avec liens visibles ou pas :
http://www.paciellogroup.com/blog/2012/08/examples-of-skip-links-on-some-bank-sites/"

Celui de Victor :

"À la question de savoir quels sont les meilleures mises en œuvre actuelles pour les liens d'évitement, il est difficile de répondre, d'autant plus que des considérations d'ordre « esthétique », ergonomique ou autre peuvent interférer.

Si jamais l'on a affaire à des graphistes, des décideurs, des chefs de projets ou d'autres profils allergiques à l'affichage permanent de liens d'évitement à l'écran, il y a toujours moyen de les masquer par défaut (en usant du positionnement absolu et la propriété left) et ne les afficher que lorsqu'ils reçoivent le focus, en jouant avec la propriété left et la pseudo-classe :focus (ne pas oublier la pseudo-classe :active en cas de gestion de la compatibilité avec Internet Explorer 7 et versions antérieures), sachant qu'il faudra, de toute façon, les afficher en permanence sur les supports tactiles, notamment les tablettes et mobiles (qu'on ciblera au moyen des media queries)."

Et, enfin, le complément de Sanvin :

"En ce qui concerne le fait de masquer ou pas les liens d'évitement, voilà ce dont je me suis aperçu en faisant des tests utilisateurs sur de nombreux profils et cela corroboré par mes lectures sur le web.

Les liens d'évitement sont utilisés par les utilisateurs du clavier seul (déficience motrice et utilisateurs de lecteur d'écran), et donc les cacher et les faire apparaitre au focus ne leur pose pas de souci. Mais aussi par les mal-voyants utilisateurs d'une loupe d'écran car cela leur évite de scroller dans toute la page pour trouver la nav, le contenu, le pied de page, le moteur de recherche... car ils ne voient pas l'ensemble de la structure de la page, pour eux les liens d'évitement doivent être absolument visibles et de taille suffisante.

D'ailleurs, visibles aussi pour les utilisateurs classiques sur mobile ou tablette pour qui ça peut être pratique, ainsi que pour les déficients moteur, utilisateurs de lecteur d'écran et mal-voyants avec loupe logicielle sur ces même tablettes et smartphones.

Donc, en conclusion, VISIBLE et de taille SUFFISANTE. C'est une contrainte graphique comme toutes les autres !"

En guise de conclusion, la bonne pratique de mise en oeuvre proposée par Romy :

"Je préconise toujours des liens d'évitement (skiplinks) visibles, en haut gauche de chaque page, et même plus, en les complétant de liens utiles comme suit :

Aller au contenu | Aller à la navigation | Aller à la recherche | Plan du site | Glossaire | Aide

  • « Aller au contenu » en premier, parce que c'est généralement la première chose que l'on souhaite à l'arrivée sur une page
  • « Aller à la recherche » si le site est pourvu d'un moteur de recherche interne
  • « Glossaire » idem
  • « Plan du site » parce qu'il est bien plus pratique d'avoir ce lien de suite que d'aller le chercher au fin fond de la page, au bout de la énième tabulation…
  • « Aide » idem"

Et si le client est opposé à l'affichage de liens d'évitement visibles, même après explication des bénéfices pour les mal-voyants, je préconiserais au moins de les afficher à la prise du focus, ainsi que sur les petits écrans (tablettes et smartphones).

Pour en savoir plus, les détails des discussions complètes sur le sujet :

Sélection de sites sur des sujets connexes

Pour aller plus loin