Focus sur la mise en place d’une navigation accessible sur un site.

Ce que j’ai fait :

• lister les bonnes pratiques en matière de navigation
• préfixer chaque bonne pratique du critère de succès correspondant

Rappel :

• (A) les menus de navigation principaux et secondaires doivent être balisés ainsi : <nav role="navigation">

Ce que j’ai appris :

• la balise <nav> est réservée pour une liste de liens internes au site, elle ne peut pas être utilisée pour une liste de liens externes.

  Exemple : sur ce blog, les liens vers les réseaux sociaux présents dans le footer ne peuvent être balisés avec <nav>

• (A) les menus de navigation étant une liste de liens, les balises <ul> et <li> doivent être utilisés pour en structurer le contenu. Le fait d’utiliser ces balises permet notamment aux utilisateurs.ices de lecteurs d’écran de réaliser certaines actions comme passer directement au dernier item ou faire défiler les items par groupe.

• (A) un lien d’évitement (ou d’accès rapide) à la zone de contenu principal doit être présent. Il doit s’agir du premier élément interactif dans le code HTML. Le lien d’évitement peut être masqué par défaut mais il doit dans tous les cas être rendu visible à la prise de focus au clavier. On peut aussi mettre en place des liens d’évitement pour accéder directement au moteur de recherche, au menu principal…

  Page de démonstration de cas d’implémentation des liens d’accès rapide(lien externe)

• (AA) un site web doit proposer deux systèmes de navigation au moins, parmi une navigation principale, un moteur de recherche, un plan du site. Lorsque le site web est constitué d’une seule page ou d’un nombre très limité de pages, ce critère peut ne pas s’appliquer.

• (AAA) indiquer la page en cours de consultation pour mieux se repérer dans le site. Le lien en cours doit être différencié visuellement mais aussi grâce à un attribut title sur le lien sur le modèle “[Titre de la page] en cours de consultation”.

• (AAA) prévoir un fil d’ariane

Distinguer les éléments de navigation

Un site peut comporter de nombreux élements de navigation : menu principal, menu secondaire, fil d’Ariane ou encore une collection de pages. Les utilisateurs.ices doivent pouvoir les distinguer rapidement afin d’accéder à celui qui les intéresse.

Dans son Guide de l’intégrateur RGAA 3(lien externe), la DINSIC recommande d’uiliser <nav role="navigation"> pour tous les éléments et de distinguer ensuite chacun d’entre eux avec aria-label.

Exemple pour les pages de résultats d’un moteur de recherche :

<nav role="navigation" aria-label="navigation dans la collection de pages">

En revanche, AcceDe Web recommande d’englober un fil d’Ariane, un système de pagination ou encore un sommaire d’article avec une balise <nav> mais de ne pas leur ajouter de role="navigation", préférant réserver ce rôle aux menus de navigation principal et secondaire du site (voir la discussion à ce sujet sur le site d’AcceDe Web, section “Commentaires”(lien externe)).