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> est à réserver uniquement pour englober des menus contenant des liens internes au site.

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> 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 aria-label="Vous êtes ici">[…]</nav>
   […]
</main>
<footer role="contentinfo">[…]</footer>

Aller plus loin

4 commentaires

  • Par Sébastien Delorme, le 13 août 2015 à 11h04.

    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.

    Répondre

    • Par Claire Bizingre, le 22 septembre 2015 à 9h28.

      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 !

      Répondre

      • Par Johan Ramon, le 25 septembre 2015 à 14h36.

        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 un aria-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

  • Par Johan Ramon, le 20 juin 2018 à 17h28.

    Modification de la fiche effectuée le 20/06/2018 : remplacement de aria-label="Fil d'Ariane" par aria-label="Vous êtes ici".

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page