1.5. Structurer les menus de navigation principaux et secondaires avec <nav role="navigation">
Les menus de navigation principaux et secondaires doivent être balisés avec <nav role="navigation">.
Remarque
La balise <nav role="navigation"> est à réserver uniquement pour englober des menus contenant des liens internes au site.
Par exemple :
- Le menu principal.
- Le menu secondaire.
- Le fil d’Ariane.
- La pagination d’une page de résultats de recherche.
Autrement dit, elle ne doit pas être utilisée pour englober une liste de liens pointant vers des sites externes. Comme une liste de liens vers des réseaux sociaux, par exemple.
Astuce
Une bonne pratique consiste à ajouter l’attribut aria-label dans la balise <nav role="navigation"> et de le renseigner en précisant le type de système de navigation dont il est question.
<header role="banner">[…]</header> <nav role="navigation" aria-label="Menu principal">[…]</nav> <nav role="navigation" aria-label="Menu secondaire">[…]</nav> <main role="main"> <nav role="navigation" aria-label="Vous êtes ici">[…]</nav> […] </main> <footer role="contentinfo">[…]</footer>
3 commentaires
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Un fil d’Ariane, un système de pagination ou encore un sommaire d’article peuvent être englobés avec une balise
<nav>.En revanche,
role="navigation"ne doit pas être employé pour ce type de système de navigation.-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour,
Quelle est la raison pour ne pas rajouter le
role="navigation"pour « un fil d’Ariane, un système de pagination ou encore un sommaire d’article » ?Merci !
-
Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.
Bonjour Claire,
Nous avons beaucoup discuté de ce point en interne ; et, pour tout te dire, on a eu pas mal de difficultés à statuer.
Un fil d’Ariane, une pagination ou encore une table des matières pourraient effectivement posséder un
role="navigation"(et unaria-label) mais nous sommes partis du principe que ces composants de navigation ne sont pas les plus importants d’une page web.Le but des Landmarks étant de permettre aux utilisateurs de lecteur d’écran d’accélérer leur navigation en atteignant très rapidement les zones structurantes majeures de la page, nous préférons réserver le
role="navigation"seulement aux menus de navigation principal et secondaire/contextuel. Ce pour concrètement éviter que le lecteur d’écran ne remonte potentiellement 5 menus de navigation, ce qui pourrait freiner l’effet escompté.À noter que le RGAA indique « Le rôle ARIA navigation est réservé aux zones de navigations principales et secondaires ». Mention qui nous a permis de trancher en interne.
Johan
-
-
