Une navigation accessible avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
La navigation est un élément central de l’accessibilité, et un point de vigilance particulier pour les webmasters : en effet, un site peut offrir une navigation totalement conforme aux critères du RGAA, mais très pénalisante pour son référencement naturel sur les moteurs de recherche traditionnels (Google, Bing) ou génératifs (ChatGPT, Gemini).
Introduction : les différents types de navigation
Le Référentiel général de l’accessibilité d’amélioration de l’accessibilité distingue trois solutions pour naviguer au sein d’un site web.
Le menu de navigation
Le menu de navigation est la solution la plus répandue. C’est également la meilleure solution – et de loin – si vous désirez positionner votre site web sur des requêtes concurrentielles, car les moteurs de recherche s’appuient sur les liens entre vos pages web pour comprendre l’arborescence de votre site web, le rôle sémantique et l’importance relative de chaque URL.
Différents types de menus de navigation peuvent coexister au sein d’une même page web :
- Menu de navigation principal ;
- Menu de sous-rubrique ;
- Menu contextuel ;
- Table des matières.
Le plan du site
Le plan du site est une page dédiée à l’arborescence de votre site, qui se présente sous la forme de listes de liens organisés en rubriques et sous-rubriques.
Cette page web n’a pas vocation à être exhaustive, à condition qu’il donne accès à toutes les pages du site de manière directe ou indirecte. Si mon plan du site contient par exemple un lien vers ma page Accessibilité, je n’ai pas besoin de liste toutes les URL associées à cette rubrique car elles sont maillées depuis cette page.
Note : vous ne devez pas confondre le plan du site avec le fichier Sitemap, le plus souvent généré au format XML et destiné principalement aux moteurs de recherche.
Le moteur de recherche
La navigation au sein d’un site peut également s’opérer à l’aide d’un moteur de recherche interne. Ce dernier doit donner accès à l’ensemble des pages du site, et pas uniquement à certains types de contenus spécifiques. Il peut se présenter sous la forme d’un moteur de recherche libre ou d’un formulaire.
1. Chaque ensemble de pages doit disposer d'au moins deux systèmes de navigation différents
Des pages web liées maillées entre elles et offrant une cohérence sémantique, thématique ou fonctionnelle sont considérées comme un ensemble de pages. C’est par exemple le cas des pages d’une catégorie spécifique, d’un blog ou d’un guide de conseils.
Un site conforme au RGAA doit offrir pour chaque ensemble de pages au moins deux solutions de navigation concomitantes :
- Un menu de navigation et un plan du site ;
- Un menu de navigation et un moteur de recherche ;
- Un moteur de recherche et un plan du site.
Le menu de navigation est de loin la meilleure solution pour votre référencement naturel. Il facilite l’exploration, l’indexation et le positionnement de votre site web sur les moteurs de recherche, permettant d’accorder à chaque URL la popularité qu’elle mérite tout en renforçant sa légitimité grâce aux liens provenant de contenus à la sémantique affinitaire. En tant que professionnel du SEO, je ne peux que vous recommander d’implémenter un menu de navigation.
Le plan du site peut faciliter l’exploration de votre site web, en aidant Google ou n’importe quel autre moteur de recherche à mieux comprendre l’arborescence de votre site. Il peut également lisser un peu le niveau de profondeur de certaines pages. Mais il ne remplacera jamais pour votre SEO un menu en bonne et due forme.
Le moteur de recherche présente surtout des bénéfices pour l’utilisateur. Il est intéressant d’en ajouter un à votre site web, à condition que ce dernier possède un vrai menu.
Oui, les trois systèmes se complètent parfaitement :
- Le menu pour une navigation exhaustive et un meilleur SEO ;
- Le plan du site pour embrasser en un regard les pages stratégiques ;
- Le moteur de recherche pour trouver facilement et rapidement le contenu adéquat.
Vous devez remplir trois conditions pour que votre page « plan du site » réponde aux critères d’accessibilité du RGAA :
- La page reflète l’architecture générale du site ;
- Les liens sont fonctionnels ;
- Les intitulés des liens sont pertinents par rapport aux pages de destination.
Imaginez par exemple que vous avez un site web sur les vélos, avec l’architecture suivante :
- Accueil
- Boutique
- Vélos de ville
- VTC
- VTT
- Vélos électriques
- Fat Bikes
- Services
- Forfait entretien
- Réparation
- Conseils
- Guide d’achat
- Guide d’entretien
- Boutique
Le plan du site ne serait pas (du tout) conforme RGAA s’il reprenait les liens suivants :
- Accueil
- VTT
- Vélos de ville
- Fat Bikes
- Conseils
- Réparation
Pourquoi ? Car rien ne va : pas de hiérarchisation des pages, pages de 1er niveau manquant (Boutique, Services), pages de 2nd niveau avant dans la liste (VTT), liste parcellaire, etc.
2. Chaque ensemble de pages affiche les éléments de navigation de façon similaire
Le menu et les barres de navigation doivent être toujours situés au même endroit afin de rendre la navigation plus naturelle et plus accessible. Une personne souffrant par exemple de TDAH pourra compter sur les mêmes repères pour se situer et changer plus facilement d’URL.
Il en va de même pour la page « plan du site », qui doit être accessible pour chaque ensemble de pages à partir d’une fonctionnalité et d’un emplacement identiques.
Mais attention, le RGAA va un peu plus loin. Le menu et les barres de navigation doivent également se présenter dans le même ordre dans le code source.
Vous pouvez très bien forcer l’affichage d’un menu relégué en bas du code source pour qu’il s’affiche en haut de l’écran, ou vice-versa. Certains SEO utilisent cette technique pour mettre en haut du code HTML les informations importantes pour Google, mais descendent son affichage dans la page web pour l’expérience utilisateur : ça peut être le cas pour un sous-menu thématique dans une page listing e-commerce, qui a de l’importance pour les moteurs de recherche tout en important peu aux utilisateurs qui ont déjà accès à des filtres.
Or, les technologies d’assistance, dont les lecteurs d’écran utilisés par les personnes avec une déficience visuelle, s’appuient sur le code source pour permettre à leurs utilisateurs de naviguer. Cela compliquerait l’accessibilité si ce forçage était présent sur certaines pages et pas sur d’autres.
C’est pourquoi le RGAA explicite ce critère d’ordre dans le code source, et pas uniquement en terme de rendu à l’écran.
Astuces et tutoriels sur l'accessibilité Web
3. Les zones de regroupement de contenus sont évitables
Les zones de regroupement de contenus désignent des sections d’une page qui contiennent des informations connexes ou remplissent une fonction donnée. L’en-tête, la zone de navigation principale, le contenu principal ou le pied de page sont des exemples de zones de regroupement. Ces zones de regroupement peuvent ralentir ou compliquer l’accès aux sections pertinentes pour les internautes en situation de handicap qui utilisent une technologie d’assistance. Pouvoir les éviter ou les atteindre facilement est un critère de pertinence RGAA.
Plusieurs techniques permettent cet évitement ou cette atteinte rapide :
- L’utilisation d’un WAI-ARIA de type landmark correspondant à sa nature ;
- La présence d’un titre dont le contenu permet de comprendre la nature du contenu de la zone ;
- La possibilité de masquer la zone par le biais d’un bouton qui précède directement la zone dans l’ordre du code source ;
- Un lien d’évitement situé juste avant la zone dans l’ordre du code source ;
- Un lien d’accès rapide visible ou, à défaut, visible lors de la prise de focus.
Votre site doit offrir au moins l’une de ces techniques.
Les Landmarks transforment une page web, perçue comme un flux linéaire par un lecteur d’écran, en une série de régions nommées et navigables.
Ils consistent en une série d’attributs role qui apportent du contexte à des sections particulières de votre code source :
role="main": contenu principal de la page ;role="banner": en-tête du site ;role="contentinfo": pied de page ;role="navigation": Menu de navigation ;role="search": Moteur de recherche sur le site ;role="complementary": informations complémentaires (ex: articles connexes, publicité).
Les spécifications HTML5 créent des Landmarks implicites, à condition d’être bien utilisées :
- <header> : landmark banner
- <nav> : landmark navigation
- <main> : landmark main
- <footer> : landmark contentinfo
L’attribut tabindex était à l’origine destiné à changer l’ordre de tabulation naturel des liens et des contrôles de formulaire en utilisant des valeurs positives (par exemple, tabindex=”1″, tabindex=”2″).
Mais cet usage est fortement déconseillé, car il perturbe l’ordre de lecture logique de la page (et il est inutile s’il respecte l’ordre naturel).
WAI-ARIA a étendu l’utilisation de cet attribut, en se concentrant sur les valeurs 0 et -1, pour gérer le focus sans altérer l’ordre naturel :
- tabindex=”0″ : C’est la contribution majeure d’ARIA. Elle permet de rendre n’importe quel élément non interactif (comme un
<div>ou un<span>) atteignable au clavier, en l’insérant dans l’ordre de tabulation naturel. C’est fondamental pour rendre accessibles les composants personnalisés (widgets). - tabindex=”-1″ : Utilisé pour retirer un élément du flux de tabulation. Il est essentiel pour gérer le focus via JavaScript, notamment lors de l’ouverture d’une fenêtre modale.
Même avec ces navigations optimisées, il est essentiel que la touche Tab permette toujours :
- d’atteindre le composant complexe dans son ensemble ;
- De sortir du composant (passer à l’élément suivant ou précédent dans la page) après l’interaction interne.
Pour être conforme aux critères d’accessibilité du RGAA, vous devez vous assurer que l’utilisateur n’est jamais bloqué (piégé) à l’intérieur d’un élément d’interface.
4. La navigation offre une expérience utilisateur préservée au clavier
Les critères RGAA tiennent également compte de l’accessibilité de vos contenus pour une navigation au clavier. Tous les internautes ne sont en effet pas en capacité de naviguer avec une souris.
Les éléments qui reçoivent le focus (ou, si vous préférez, qui ont une zone d’interaction permettant la navigation, comme un élément cliquable), doivent être atteignables avec la touche de tabulation. Si une autre interaction est privilégiée (flèches directionnelles par exemple), l’utilisateur doit en être informé.
L’ordre de tabulation doit demeurer cohérent. Il ne faut pas que la navigation au clavier fasse passer par exemple l’utilisateur du début à la fin de la page avant de le faire revenir au milieu.
Cela vaut également pour les contenus additionnels qui apparaissent au survol, à la prise de focus ou à l’activation d’un composant d’interface. Par exemple, une infobulle qui explique comment remplir un champ doit être accessible à la navigation au clavier.
Vous avez certainement l’habitude de naviguer avec un dispositif de pointage, qu’il s’agisse de la souris ou du pavé tactile. Mais certains utilisateurs, confrontés par exemple à une paralysie ou à des tremblements involontaires sont obligés de naviguer au clavier.
La navigation au clavier repose sur deux mécanismes principaux :
- La tabulation : en pressant la touche Tab, l’utilisateur atteint l’élément d’interface interactif suivant (bouton, lien, champ de formulaire, etc.). La navigation inverse est possible avec la combinaison Majuscule + Tab.
- Les autres interactions : des raccourcis claviers optimisés peuvent être utilisées à la place de la tabulation, notamment en cas d’éléments d’interface complexe. Par exemple, au sein d’un groupe de boutons radio ou d’un système d’onglets, les flèches de direction peuvent se substituer à la touche Tab. Dans ce cas, l’internaute doit en être informé.
L’attribut tabindex était à l’origine destiné à changer l’ordre de tabulation naturel des liens et des contrôles de formulaire en utilisant des valeurs positives (par exemple, tabindex=”1″, tabindex=”2″).
Mais cet usage est fortement déconseillé, car il perturbe l’ordre de lecture logique de la page (et il est inutile s’il respecte l’ordre naturel).
WAI-ARIA a étendu l’utilisation de cet attribut, en se concentrant sur les valeurs 0 et -1, pour gérer le focus sans altérer l’ordre naturel :
- tabindex=”0″ : C’est la contribution majeure d’ARIA. Elle permet de rendre n’importe quel élément non interactif (comme un
<div>ou un<span>) atteignable au clavier, en l’insérant dans l’ordre de tabulation naturel. C’est fondamental pour rendre accessibles les composants personnalisés (widgets). - tabindex=”-1″ : Utilisé pour retirer un élément du flux de tabulation. Il est essentiel pour gérer le focus via JavaScript, notamment lors de l’ouverture d’une fenêtre modale.
Même avec ces navigations optimisées, il est essentiel que la touche Tab permette toujours :
- d’atteindre le composant complexe dans son ensemble ;
- De sortir du composant (passer à l’élément suivant ou précédent dans la page) après l’interaction interne.
Pour être conforme aux critères d’accessibilité du RGAA, vous devez vous assurer que l’utilisateur n’est jamais bloqué (piégé) à l’intérieur d’un élément d’interface.
Certains sites ou applications web intègrent des raccourcis clavier qui reposent sur une seule touche. Mais cela peut poser problème pour les personnes en situation de handicap qui utilisent une technologie d’assistance, car il peut y avoir des conflits entre le raccourci clavier configuré par l’éditeur du site ou de l’application et la technologie d’assistance.
Le RGAA prévoit trois solutions possibles pour contourner ce problème :
- Désactiver le raccourci clavier
- Configurer la touche de raccourci au moyen de touches de modification (Ctrl, Alt, Maj, etc.).
- Activer le raccourci uniquement quand le focus est sur le composant qui utilise le raccourci à une touche.
Certains contenus additionnels apparaissent au survol, à la prise de focus ou à l’activation d’un composant d’interface (bouton, lien, etc.). C’est par exemple le cas d’une infobulle qui apparaît au passage du curseur de la souris.
Vous devez vous assurer que ces contenus additionnels sont bien accessibles avec une navigation au clavier, afin que les personnes qui utilisent ces technologies ne passent à côté d’aucune information.