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.

    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.

      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.

        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