Fiche 4 : Navigation

Introduction - cas utilisateurs

Vous devez fournir aux utilisateurs au moins deux systèmes de navigation afin de couvrir un plus large spectre de stratégies de navigation dans les contenus du site. En effet, tous les utilisateurs ne naviguent pas de la même manière et certains systèmes de navigation peuvent s’avérer trop complexes à utiliser. Par exemple, un menu de navigation trop riche, comme un méga-menu, peut nécessiter beaucoup d’actions pour un utilisateur qui ne navigue qu’au clavier et donc rendre sa recherche d’information laborieuse. Proposer un second système permet d’aider ces utilisateurs qui ont des stratégies de navigation différentes.

Certains utilisateurs peuvent avoir des difficultés à atteindre la zone de contenu principal. Par exemple : les utilisateurs malvoyants qui utilisent une loupe d’écran ne voient pas la page dans sa globalité. Il peut être laborieux pour ces utilisateurs de devoir scroller tous les éléments communs des pages d’un site (l’en-tête, la navigation) pour atteindre le contenu principal à chaque fois. De même, les utilisateurs aveugles qui ont une lecture linéaire de la page doivent parcourir tous les éléments redondants (titre principal, navigation, etc.) avant d’atteindre le contenu principal.

Les utilisateurs qui ne peuvent pas utiliser de souris ou un système de navigation adapté restent néanmoins ceux qui rencontrent le plus de difficultés. Pour ces utilisateurs, la zone de contenu principal, comme tous les autres éléments du site ne peut être atteinte qu’avec la tabulation, ce qui peut être particulièrement laborieux.

Les liens d’accès rapide en début de contenu leur permettent de réduire considérablement leur temps de consultation, ils peuvent directement atteindre la zone de contenu principal.

Liens d’accès rapide

Vous devez fournir aux utilisateurs des liens d’accès rapide (également appelés liens d’évitement). Les liens d’accès rapide sont des ancres vers certains éléments de la page. Sans ces liens d’accès rapide, les utilisateurs tétraplégiques doivent faire des centaines et des centaines de tabulations pour atteindre un élément de la page. C’est pourquoi ce critère RGAA est non négociable.

Ainsi sur votre site, vous devez implémenter :

  • un lien qui permet d’accéder à la zone de contenu principale ;
  • un lien qui permet d’accéder à chaque groupe de liens importants (par exemple la navigation).

Note : le lien d’accès à la zone de contenu principale devrait toujours être présent. En revanche, le lien d’accès à la navigation principale n’est utile que s’il y a beaucoup de contenus tabulables avant le menu de navigation principal. Quand ce n’est pas le cas, le lien d’accès à la navigation principale n’est pas forcément utile.

Ces liens d’accès rapide doivent de préférence toujours être visibles. En effet, ils sont utiles aux utilisateurs aveugles, aux utilisateurs qui naviguent au clavier, mais également aux utilisateurs malvoyants qui utilisent une loupe d’écran. Ces derniers naviguent à la souris et si ces liens sont positionnés hors écran, il leur est impossible de les utiliser.

Bien qu’il soit préférable que ces liens soient toujours visibles, vous pouvez indiquer à votre équipe d’intégrateurs que ces liens doivent être rendus accessibles à la prise de focus (cf. Liens d’accès rapides dans le Guide de l’intégrateur RGAA 3).

Pour qu’ils soient efficaces, les liens d’accès rapide au contenu et à la navigation doivent être positionnés en début de code et en haut de page. En faire les premiers liens du code de votre page est la meilleure solution.

Important : ces liens doivent toujours être situés à la même place dans la présentation. De plus, afin que les utilisateurs aveugles, qui ont une lecture linéaire de votre site, puissent s’y retrouver, ces liens doivent toujours être dans le même ordre dans le code source.

Page de démonstration des cas d’implémentation des liens d’accès rapide

Deux systèmes de navigation au moins

Un site web doit proposer deux systèmes de navigation au moins, parmi :

  • une navigation principale ;
  • un moteur de recherche ;
  • un plan du site.

Pour que le moteur de recherche puisse être considéré comme un élément de navigation, il doit indexer toutes les pages du site. Ainsi, un moteur de recherche dans un catalogue qui ne permet pas de trouver la page des mentions légales du site n’est pas considéré comme un moteur de recherche. Le moteur de recherche doit également être atteignable de manière identique depuis chaque ensemble de pages.

Le plan du site quant à lui doit être représentatif de la structure générale du site. Il n’est pas demandé que soient référencées toutes les pages du site, mais seulement les pages menant aux rubriques principales. Par exemple, si le site dispose d’une rubrique « Actualités », il n’est pas nécessaire d’y faire figurer toutes les actualités publiées.

Il existe des cas particuliers pour lesquels cette recommandation est non applicable :

  • un site composé d’un faible nombre de pages (deux à trois pages) peut ne fournir qu’un menu de navigation menant vers ces pages, le menu étant alors identique au plan du site ;
  • un site monopage (« Single Page Application ») peut ne fournir que des liens d’accès rapide aux différentes sections de la page, la fonction de recherche du navigateur (Ctrl F) permettant de chercher dans tout le contenu du site.

Ordre cohérent et présentation cohérente

Chaque système de navigation doit avoir sur chaque ensemble de pages un ordre et une présentation cohérente :

  • le système de navigation est accessible depuis une fonctionnalité identique (par exemple, pour le plan du site, la fonctionnalité est un lien ayant pour intitulé « Plan du site ») ;
  • la fonctionnalité est située à la même place dans la présentation (par exemple, le lien vers le plan du site est toujours situé en haut à gauche sur la page) ;
  • la fonctionnalité est toujours dans le même ordre relatif dans le code source (par exemple, le lien vers le plan du site est toujours le premier élément texte et le premier lien de la page).

Plan du site

Le plan du site n’est pas obligatoire, il fait partie des trois systèmes de navigation reconnus.

Si vous intégrez un plan de site, vous devrez vous assurer que tous les liens qui y sont listés sont pertinents et fonctionnels. Vous pouvez utiliser l’outil de validation des liens du W3C pour vous en assurer.

Vous devrez également vous assurer que le plan du site est atteignable de la même façon depuis chaque ensemble de pages.

Collection de pages

Une collection de pages est un ensemble de pages reliées les unes aux autres par des liens et ayant un thème ou une nature commune. Par exemple, les pages de résultats d’un moteur de recherche ou les pages d’un catalogue sont des collections de pages.

Pour les pages d’une collection de pages, vous devez mettre à disposition de l’utilisateur :

  • un lien permettant d’accéder à la page suivante ;
  • un lien permettant d’accéder à la page précédente ;
  • des liens permettant d’accéder à toutes les pages de la collection.
Collection de pages issue du site Service-public.fr

Lorsque le nombre de pages est très important, il est illusoire de vouloir mettre un lien vers chaque page. Dans ce cas, il est acceptable de présenter les liens par groupe de 10 liens par exemple (« 20-30 »).

D’autres systèmes permettant d’atteindre une page quelconque d’une collection de pages peuvent être utilisés comme un champ de formulaire ou une liste de sélection.

Page de démonstration des cas d’implémentation de la navigation dans les collections de pages

Page en cours de consultation dans le menu

Indiquer la page en cours de consultation aux utilisateurs permet de leur donner des points de repère quant à leur localisation dans le site.

Note : cette recommandation est de niveau AAA, elle n’est donc pas obligatoire.

Attention : lorsque vous indiquez la page en cours dans le menu de navigation, ne véhiculez pas cette information uniquement par la couleur et/ou par la forme. Par exemple, si vous décidez de modifier la couleur d’arrière-plan du lien actif, n’oubliez pas de prévoir un titre (title) sur le lien, sur le modèle « [Titre de la page] en cours de consultation ». Communiquez cette demande aux équipes techniques en charge de l’intégration du site.

La meilleure des implémentations consiste à couvrir la plus grande part d’utilisateurs, et donc :

  • utiliser une couleur de fond pour signifier la page active ;
  • utiliser une forme adjacente au lien, par exemple une icône (pour les utilisateurs qui perçoivent mal ou pas les contrastes de couleurs) ;
  • ajouter un title sur le lien de la page active (pour les utilisateurs aveugles ou les utilisateurs qui utilisent des feuilles de styles utilisateurs).

Page de démonstration pour la mise en évidence de la page active dans le menu de navigation

Fil d’Ariane

Un fil d’Ariane est un moyen de navigation rapide et un repère dans le site : il doit permettre à l’utilisateur de s’orienter dans le site web.

Note : cette recommandation est de niveau AAA, elle n’est donc pas obligatoire. L’absence d’un fil d’Ariane a un impact limité. Toutefois, c’est un outil qui peut faciliter la navigation des aveugles et grands malvoyants, ainsi que des handicapés mentaux ou cognitifs.

S’il est prévu, le fil d’Ariane doit donc être représentatif de la position de la page dans l’arborescence du site. Par exemple, les pages parentes doivent y être représentées.