Les liens d’accès rapide (ou skiplinks) : comment aider les utilisateurs à naviguer au clavier sur votre site ?

Les liens d’accès rapide, appelés aussi liens d’évitement ou skiplinks, permettent aux utilisateurs qui naviguent uniquement au clavier de sauter les blocs de contenus répétés (menus de navigation, barre de recherche, publicité…) lorsqu’ils arrivent sur une page web pour lire directement le contenu principal.

Lorsque vous arrivez sur un site web, en tant que personne voyante, vous allez naturellement scanner la page pour identifier le contenu principal. Cela vous permet de lire le texte de la page et de pouvoir cliquer rapidement sur le lien qui vous intéresse.

Par exemple, sur la page Jeux olympiques d’été de 2024 du site Wikipédia, vous allez immédiatement identifier :

• le menu principal (au format burger)
• le logo
• la barre de recherche
• les différents menus
• les bannières d’informations
• les barres latérales
• le titre de la page
• le contenu principal
• …

En quelques secondes, vous allez pouvoir commencer à lire le contenu et accéder aux différents liens disponibles dans la page, comme le lien « pandémie de Covid-19 » disponible à la fin du premier paragraphe de contenu. Pour un utilisateur voyant, la structure générale de la page web est évidente.

Au contraire, un utilisateur qui navigue uniquement au clavier, à cause d’un handicap moteur (maladie de Parkinson, paralysie, amputation…) ou visuel, par exemple, va devoir parcourir tous les liens des blocs de contenus répétés sur chaque page (menus, barre de recherche, sommaire…) avant d’accéder au contenu principal, et cela, sur chaque page qu’il visitera sur le site. Par exemple, sur la page Wikipédia citée ci-dessus, cet utilisateur devra appuyer 97 fois sur la touche “Tabulation” de son clavier pour atteindre le lien « pandémie de Covid-19 » s’il n’y a pas de liens d’accès rapide.

Pour améliorer la navigation sur un site de ces utilisateurs, le W3C, grâce aux WCAG (Web Content Accessibility Guidelines), recommande aux sites web de mettre en œuvre un mécanisme qui permet de « contourner des blocs » (ou « bypass blocks » en anglais). L’une des techniques préconisées est l’utilisation des skiplinks (ou liens d’accès rapide).

Le principe des liens d’accès rapide est de proposer un lien en haut de la page qui, lorsqu’on clique dessus, déplace l’utilisateur au début du contenu principal.

Ces liens doivent avoir un libellé court et précis pour aider l’utilisateur à se repérer. Ces exemples sont couramment utilisés :

• Aller vers le contenu
• Aller au contenu principal
• …

Le plus souvent, il n’est pas nécessaire de prévoir un lien d’accès rapide par section ou par bloc de la page web, sauf si celle-ci est très complexe.

Néanmoins, il peut être intéressant de rendre certaines fonctionnalités ou contenus facilement accessibles, comme la recherche ou le menu principal ou encore le sommaire du contenu affiché sur la page courante.

En respectant cette recommandation du W3C, vous permettez aux utilisateurs d’avoir une navigation fluide et agréable.

• Les aveugles qui utilisent un lecteur d’écran et visitent plusieurs pages d’un site web peuvent éviter d’écouter le contenu de tous les blocs de contenu répétés sur chaque page, avant de pouvoir lire le contenu principal.
• Les utilisateurs qui naviguent au clavier uniquement accèdent au contenu grâce à un faible nombre de frappes sur la touche Tabulation du clavier. Sinon, ils doivent parfois appuyer plus d’une centaine de fois sur cette touche pour passer un méga menu.
• Les personnes atteintes de déficience visuelle qui utilisent une loupe d’écran bénéficient aussi de cette fonctionnalité. En effet, elle leur permet de se repérer aisément et rapidement sur l’interface.
• Les personnes ayant des difficultés cognitives apprécient aussi ce regroupement de liens en début de page qui facilite leur navigation.

Vous l’aurez compris : il y a de nombreuses raisons de mettre en place cette fonctionnalité qui est utile pour de nombreux utilisateurs !

Les liens d’accès rapide doivent obligatoirement être placés au début du code HTML : cela leur permet d’être facilement repérés par les utilisateurs. Sinon, ceux-ci pourraient les manquer et perdre du temps à parcourir inutilement des blocs de contenu qui ne les intéressent pas.

Souvent, les designers trouvent les skiplinks inesthétiques, voire perturbants pour les utilisateurs qui n’en ont pas besoin. La solution, dans ce cas, est d’afficher les liens d’accès rapide uniquement lorsque l’utilisateur navigue au clavier.

Lorsque c’est possible, ces liens doivent s’afficher dès que le visiteur utilise son clavier et pas seulement lorsque ces liens reçoivent le focus.

Sinon, les skiplinks peuvent être cachés par défaut, mais doivent être affichés lorsqu’ils reçoivent le focus. Afficher ces liens est utile pour tous les utilisateurs voyants qui n’utilisent pas de souris.

Pour être utilisables, les liens d’accès rapide doivent :

• être affichés à tous les utilisateurs ou cachés de manière accessible
• être atteignables lorsqu’un utilisateur navigue au clavier
• être mis en avant lorsqu’ils reçoivent le focus (ou dès que le visiteur navigue au clavier)
• lorsqu’ils sont cliqués, déplacer le focus sur l’élément souhaité

Dans le code HTML, il faut prévoir une ancre vers la balise <main>.

1. Ajouter un attribut id=”main” à la balise <main>
2. Ajouter un attribut tabindex=”-1” à la balise <main>
3. Ajouter au début du code HTML un lien vers l’ancre de la balise <main> : <a href=”#main”>Aller au contenu principal</a>

L’objectif en CSS est de masquer de manière accessible les liens d’accès rapides lorsqu’ils ne reçoivent pas le focus.

Vous retrouverez la démonstration de cet exemple, ainsi que le code source sur Github.

Sur les sites de la Métropole de Grenoble ou de France Info, nous retrouvons la méthode la plus utilisée pour les liens d’accès rapides. Ils s’affichent uniquement lorsqu’ils reçoivent le focus et disparaissent quand ils ne l’ont plus. Ils sont masqués de façon accessible à l’utilisateur : c’est ce qui leur permet de recevoir le focus.

Access42 a décidé de rendre accessible le lien « Contenu » à tous les utilisateurs et de le laisser afficher en permanence.

Le W3C propose d’autres méthodes pour améliorer et faciliter la navigation des visiteurs qui n’utilisent pas de souris sur un site web.

• Ajouter un lien au début de chaque blog de contenu répété pour aller directement à la fin du bloc (https://corfm.at/wcag-g123) : cette technique peut être très verbeuse et si le site est complexe, il peut y avoir de nombreux liens à parcourir.
• Ajouter un lien pour chaque bloc de contenu en haut de la page (https://corfm.at/wcag-g124) : cette méthode peut nécessiter d’ajouter un grand nombre de liens si le site est complexe. En plus, on peut avoir besoin d’un lien pour sauter ce bloc : il devient donc moins pertinent.
• Regrouper les différents blocs de contenu répété pour permettre aux utilisateurs de les passer : certains sites web utilisent le CSS pour modifier le layout de la page. Dans le code source, le contenu principal est affiché en premier, mais il sera affiché différemment à l’écran. Cette technique peut perturber les utilisateurs voyants qui naviguent au clavier uniquement.
• Structurer correctement la page web et son contenu pour faciliter la navigation des utilisateurs (notamment de lecteurs d’écran) en utilisant des niveaux de titres cohérents, des balises de structures et des landmarks ARIA. Cette méthode est très utilisée par les utilisateurs de lecteurs d’écran, car ces derniers permettent de parcourir la page en passant de titre en titre ou de bloc en bloc. Néanmoins cette fonctionnalité n’est pas native aux navigateurs pour les utilisateurs voyants qui naviguent aux claviers : ils doivent donc installer une extension ou un lecteur d’écran en plus.

Nous avons vu ensemble que les liens d’accès rapides sont simples et rapides à mettre en œuvre, alors qu’ils aident considérablement les utilisateurs à naviguer de manière fluide et facile. Par ailleurs, il est aussi très simple de vérifier leur fonctionnement.

Je vous invite à penser aux utilisateurs qui naviguent autrement qu’avec un clavier et une souris lorsque vous concevrez votre prochain site web.

Si vous avez des questions, n’hésitez pas à m’envoyer un message sur les réseaux sociaux ! 😊