Menu déroulant

Sommaire

Principe

Un menu déroulant se présente généralement sous la forme d’une liste de boutons accolés qui permettent d’afficher un sous-menu relatif au bouton activé.

Socle HTML

<nav role="navigation" aria-label="Menu principal">
  <ul>
    <li>
      <button aria-expanded="false">Bouton de premier niveau dont le sous-menu est masqué</button>
      <ul class="non-visible">
        <li><a href="…">Lien de second niveau</a></li>
        <li><a href="…">Lien de second niveau</a></li>
        […]
      </ul>
    </li>
    <li>
      <button aria-expanded="true">Bouton de premier niveau dont le sous-menu est affiché</button>
      <ul class="visible">
        <li><a href="…">Lien de second niveau</a></li>
        <li><a href="…">Lien de second niveau</a></li>
        […]
      </ul>
    </li>
    <li><a href="…">Lien de premier niveau</a></li>
    […]
  </ul>
</nav>

Rôles, états et propriétés ARIA

Interactions au clavier

Entrée ou Espace

Échap

Si le focus clavier est positionné sur l’un des éléments d’un sous-menu affiché, déplace le focus clavier sur le bouton de premier niveau qui a déclenché l’affichage du sous-menu, puis ferme ce dernier.

Remarque

Les sous-menus non affichés à l’écran doivent être masqués avec display: none et/ou visibility: hidden.

3 commentaires

  • Par David, le 21 août 2018 à 9h30.

    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 Johan,
    Si un sous-menu ouvert perd le focus, est-ce qu’on doit le refermer ?

    Bonne journée.

    Répondre

    • Par Sébastien Delorme, le 21 août 2018 à 15h46.

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

      Je me permets de répondre à la place de Johan.

      Au final, rien ne l’impose réellement. C’est un choix fonctionnel à faire.

      Nous aurions toutefois tendance à fortement recommander la fermeture du sous-menu dès que le focus en sort de manière à ne pas avoir à rechercher le bouton de fermeture (qui peut être beaucoup plus haut dans la page).

      Sébastien.

      Répondre

      • Par David, le 22 août 2018 à 7h32.

        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 Sébastien,
        Je suis du même avis. D’un point de vue ergonomique, c’est logique de fermer un sous-menu si il n’est plus en état de focus. J’avais besoin du point de vue d’un spécialiste de l’accessibilité.

        Merci pour votre réponse.

Ajouter un commentaire

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

Haut de page