Vous devez fournir aux utilisateurs au moins deux systèmes de navigation afin de couvrir un plus large spectre de stratégie 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. Les liens d'accès rapide sont des ancres vers certains éléments de la page. Ainsi sur votre site, vous devez implémenter :
un lien qui permet d'éviter ou d'accéder à la zone de contenu principale ;
un lien qui permet d'éviter ou d'accéder à chaque groupe de liens importants (notamment la navigation).
Ces liens d'accès rapide (ou d'évitement) 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.
À défaut, si vous devez les positionner hors écran, vous devez au moins vous assurer que ces liens apparaissent à la prise de focus. Vous devez donc les positionner hors écran (position:absolute). N’utilisez surtout pas de propriétés CSS qui les rendent inactifs, telles que :
display: none; ;
visibility: hidden; ;
width et height avec les valeurs 0 (width: 0;height: 0;) ;
font-size: 0; ;
attribut HTML5 hidden ;
propriété aria-hidden="true".
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.
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 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 (2 à 3 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 3 systèmes de navigation reconnus. Si vous intégrez un plan de site, vous devez vous assurer en plus que tous les liens sont pertinents et fonctionnels. Vous pouvez utiliser l'outil de validation des liens du W3C pour vous en assurer.
Titre de pages
Le titre des pages (balise <title>) est un élément de repère pour nombre d'utilisateurs.
Pour les personnes aveugles, utilisateurs de lecteurs d'écran, le titre de la page est le premier élément vocalisé. Pour des utilisateurs qui naviguent avec l'historique de navigation ou la liste des onglets, il est important qu'ils puissent retrouver les pages facilement en se basant sur leur titre.
Dans un certain nombre de cas, le titre de page est simple à construire, il reprend souvent le titre principal du contenu et le nom du site. Très souvent, ce n'est pas vous qui le créez, on vous impose sa construction (conception, référencement…). Dans d'autres cas, notamment pour les interfaces interactives, il faut veiller à rendre ces titres explicites :
de collections de pages (résultats de recherche par exemple). Dans ces cas, il est important d'indiquer la pagination dans le titre ;
lorsqu'un formulaire renvoie des erreurs, le titre de la page doit le mentionner.
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.
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 select de navigation.
Important : Une navigation dans une collection de pages est un élément de navigation, vous devez donc l'implémenter dans un élément <nav> avec le role="navigation". Et afin de distinguer les éléments de navigation, vous pouvez les labelliser au moyen de la propriété aria-label
<nav role="navigation" aria-label="navigation dans la collection de pages">
[...]
</nav>
Indiquer la page en cours de consultation aux utilisateurs permet de donner des points de repère quant à leur localisation dans le site.
Lorsque vous indiquez la page en cours dans le menu de navigation, attention aux informations par la couleur et par la forme. Si vous décidez de mettre une couleur de fond différente au lien actif, n'oubliez pas d'ajouter un title sur le lien sur le modèle « [Titre de la page] en cours de consultation ».
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).
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.
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.
