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>

Quels bénéfices ?

La structuration des listes est essentielle pour les personnes utilisant un lecteur 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.

4 commentaires

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

Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

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.
  
  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,
  
  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.
    
    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,
    
    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.
    
    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 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

Haut de page