1.6 Structurer les menus de navigation avec des listes

Utiliser des listes non ordonnées <ul> et <li> pour baliser les menus de navigation.

Dans le cas d’un menu principal à plusieurs niveaux, veiller à la bonne imbrication des listes :

<nav role="navigation" aria-label="Menu principal">
 <ul>
  <li><a href="…">Premier lien du menu</a></li>
  <li>
    <a href="…">Deuxième lien du menu</a>
    <ul>
      <li><a href="…">Premier lien du sous-menu</a></li>
      <li><a href="…">Deuxième lien du sous-menu</a></li>
    </ul>
  </li>
  <li><a href="…">Troisième lien du menu</a></li>
 </ul>
</nav>

Aller plus loin

Quels bénéfices ?

La structuration des listes est essentielle pour les utilisateurs de lecteurs d’écran (personnes aveugles et malvoyantes). Cette structuration leur permet ainsi, à la rencontre d’une liste de :

  • Naviguer de liste en liste au sein d’une page.
  • Connaître dès le départ le nombre d’éléments dans celle-ci.
  • Naviguer plus facilement dans la liste :
    • Passer directement à la fin de la liste si ce contenu ne les intéresse pas.
    • Revenir facilement au début de la liste.

5 commentaires

  • Par Sébastien Delorme, le 26 août 2016 à 16h00.

    26 août 2016 : ajout de l’encart « Quels bénéfices ? ».

    Répondre

  • Par Thierry Koblentz, le 10 novembre 2016 à 5h23.

    Quel intérêt ici d’utiliser la balise <nav> ?

    Pourquoi ne pas simplement utiliser: <ul role="navigation" aria-label="Menu principal"> ?

    Répondre

    • Par Johan Ramon, le 10 novembre 2016 à 9h45.

      Bonjour,

      Intégrer role="navigation" dans la balise <ul> écraserait la sémantique « Liste » portée par cette dernière.

      Ce qui n’est pas souhaité.

      Johan

      Répondre

      • Par Thierry Koblentz, le 10 novembre 2016 à 17h50.

        Bonjour,

        Je comprends l’impact de `role` sur la liste, mais ma question est liée à l’expérience utilisateur.

        Concrètement, je suis curieux de savoir quelles differences sont perçues entre ces 2 exemples:

        http://codepen.io/thierry/full/GNoZyO/

        Ou plutôt, quels sont les problèmes avec le second.

        Merci.

        PS: et merci aussi pour avoir regrouper mes 2 posts.

      • Par Sébastien Delorme, le 14 novembre 2016 à 14h49.

        Bonjour Thierry,

        Dans le premier exemple, il y a (du point de vue du lecteur d’écran) :

        • Un élément de navigation, qu’il peut donc atteindre facilement depuis n’importe où dans la page.
        • Une liste imbriquée, qui permet de savoir combien d’items sont présents dans la navigation et de se promener facilement d’item en item, aller au premier, au dernier, etc. Mais également comprenant les imbrications de liste et donc de niveaux hiérarchiques.

        Le second exemple n’est pas correct, car un élément nav ne peut pas disposer de balises li (c’est seulement le cas de ul ou ol). Du coup sémantiquement cela n’a pas de sens.

        Le lecteur d’écran identifie bien la navigation, mais ne devrait pas identifier la liste (puisqu’elle est écrasée par nav).

        Sébastien

Ajouter un commentaire

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

Haut de page