Créer un menu de navigation accessible

Un menu de navigation est un élément essentiel dans la conception de sites web.

Cependant, ces menus peuvent être inaccessibles pour les personnes utilisant des technologies d’assistance, si l’accessibilité n’est pas prise en compte.

Dans cet article, nous allons explorer comment créer un menu de navigation accessible.

Structure basique

Pour permettre aux personnes utilisant des technologies d’assistance (tel qu’un lecteur d’écran), d’accéder rapidement au menu en ciblant les zones de « navigation », le menu principal doit être encapsulé dans une balise :

<nav role="navigation" aria-label="Menu principal">

Ensuite, un menu comporte généralement plusieurs liens.
Nous allons structurer ces liens sous forme de liste avec les balises <ul> et <li>.

Pour aider les technologies d’assistance à identifier la page actuellement sélectionnée, utilisez l’attribut aria-current="page". Cet attribut doit être ajouté de manière dynamique uniquement au lien correspondant à la page courante.

Pour obtenir, par exemple, si la page « Accueil » est actuellement en cours de consultation :

<nav role="navigation" aria-label="Menu principal">
  <ul>
    <li><a href="..." aria-current="page">Accueil</a></li>
    <li><a href="...">Services</a></li>
    <li><a href="...">Contact</a></li>
  </ul>
</nav>

Structure classique

Certains éléments de menu peuvent nécessiter un sous-menu.

Dans ce cas, il faut utiliser une balise <button type="button"> pour déclencher l’action d’ouverture/fermeture du sous-menu.

Pour indiquer l’état d’ouverture/fermeture du sous-menu aux lecteurs d’écran, il est essentiel d’utiliser l’attribut aria-expanded et de rendre cet attribut dynamique :

• aria-expanded="false" lorsque le sous-menu est masqué.
• aria-expanded="true" lorsqu’il est affiché.

Intégrez la liste de liens du sous-menu à l’intérieur du <li> contenant le bouton d’ouverture/fermeture pour créer une liste imbriquée.

Pour masquer visuellement le sous-menu, vous pouvez utiliser une déclaration CSS qui empêche la restitution aux technologies d’assistance, comme display:none ou visibility:hidden.

Il est recommandé d’ajouter un attribut id unique à votre sous-menu, puis d’ajouter un attribut aria-controls au bouton qui déclenche son ouverture/fermeture.
Renseignez ensuite l’attribut aria-controls avec la valeur de l’attribut id du sous-menu.

Pour obtenir, par exemple, lorsque le sous-menu est replié :

<nav role="navigation" aria-label="Menu principal">
  <ul>
    <li><a href="..." aria-current="page">Accueil</a></li>
    <li>
      <button type="button" aria-expanded="false" aria-controls="submenu">Services</button>
      <ul id="submenu" style="display: none;">
        <li><a href="...">Service 1</a></li>
        <li><a href="...">Service 2</a></li>
        <li><a href="...">Service 3</a></li>
      </ul>
    </li>
    <li><a href="...">Contact</a></li>
  </ul>
</nav>

Structure complexe

Une erreur fréquente se produit avec les menus où l’élément qui ouvre ou ferme un sous-menu est également un lien vers une autre page du site.

Dans ces cas, lorsqu’un personne survole l’élément avec la souris, le sous-menu peut s’ouvrir. Cependant, lorsque la navigation se fait au clavier ou avec une technologie d’assistance, le lien redirige immédiatement vers une nouvelle page.

Cette implémentation empêche les technologies d’assistance d’accéder au sous-menu, car elles sont automatiquement dirigées vers l’URL spécifiée dans le lien avant de pouvoir interagir avec le sous-menu.

Par exemple, une solution corrective serait la suivante :

Utilisez une balise <a href="..."> pour structurer le lien.

Juste après ce lien, ajoutez une balise <button type="button"> pour déclencher l’action d’ouverture/fermeture du sous-menu. Cette balise peut par exemple contenir une icône de type « chevron » qui indique visuellement l’existence d’un sous-menu.

Donnez un intitulé à ce bouton en utilisant par exemple l’attribut aria-labelledby.
Pour cela :

• Ajoutez l’attribut aria-labelledby à la balise <button type="button">.
• Assignez un ID unique au lien associé au sous-menu.
• Indiquez cet ID dans l’attribut aria-labelledby de la balise <button type="button">.

Ignorez les images purement décoratives (si présentes), comme les chevrons utilisés pour identifier le sous-menu. Par exemple :

• Laissez l’attribut alt vide des balises <img>, tel que alt="".
• Ajoutez l’attribut aria-hidden="true" aux balises <svg>.

Pour obtenir, par exemple, lorsque le sous-menu est déplié :

<nav role="navigation" aria-label="Menu principal">
  <ul>
    <li><a href="..." aria-current="page">Accueil</a></li>
    <li>
      <a href="..." id="menu-services-link">Services</a>
      <button type="button" aria-expanded="true" aria-controls="submenu" aria-labelledby="menu-services-link">
        <img src=".../chevron.jpg" alt=""/>
      </button>
      <ul id="submenu">
        <li><a href="...">Service 1</a></li>
        <li><a href="...">Service 2</a></li>
        <li><a href="...">Service 3</a></li>
      </ul>
    </li>
    <li><a href="...">Contact</a></li>
  </ul>
</nav>

Interactions clavier

Les éléments interactifs tels que les liens et les boutons doivent recevoir le focus de navigation.

Les touches Espace et Entrée doivent permettre d’ouvrir et de fermer le sous-menu.

Il est également recommandé :

• De permettre à la touche Échap (ou Escape) de fermer le sous-menu et de restituer le focus au bouton qui avait déclenché son ouverture.
• Refermer automatiquement les sous-menus lorsque le focus quitte le sous-menu ou la zone de navigation.

Attention, il est essentiel de gérer la touche Échap (ou Escape) si le sous-menu s’ouvre au survol de la souris.

Conclusion

Pour concevoir un menu de navigation accessible, il est essentiel de suivre certaines pratiques :

• Utiliser la balise <nav> avec l’attribut role="navigation" et aria-label : Cela permet de définir clairement la zone de navigation pour les technologies d’assistance.
• Structurer les liens du menu avec des balises <ul> et <li> : Cette structure assure une organisation logique des éléments.
• Gérer les sous-menus : Lorsque des sous-menus sont présents, il est crucial d’utiliser un bouton <button type="button"> avec l’attribut aria-expanded pour indiquer l’état du sous-menu (dépliée ou repliée). Idéalement relier les sous-menus aux boutons avec l’attribut aria-controls.
• Distinguer les balises <a href=""> et <button type="button"> : Il est indispensable de distinguer les balises <a href=""> pour les liens et <button type="button"> pour les actions, afin d’éviter les erreurs de navigation.
• Utiliser aria-current="page" : Pour permettre aux technologies d’assistance d’identifier la page actuellement en cours de consultation.
• Ajouter des intitulés aux boutons d’action : Lorsqu’un bouton d’action dans un sous-menu utilise une image (comme un chevron), assurez-vous d’ajouter un intitulé accessible.
• Masquer les éléments : L’utilisation de display: none; ou visibility: hidden; est appropriée pour masquer des éléments visuellement et pour les technologies d’assistance, garantissant que les sous-menus restent invisibles tant que les personnes ne les ont pas activés.
• Vérifier les interactions clavier : Assurez-vous que les éléments interactifs reçoivent correctement le focus de navigation, que les touches Espace et Entrée permettent d’ouvrir et de fermer les sous-menus, et que la touche Échap (ou Escape) ferme les sous-menus.

Ces conseils peuvent guider la création de nouveaux menus, mais aussi servir à corriger des menus déjà existants.

Source : Example Disclosure Navigation Menu | APG | WAI | W3C