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.

Commentaires

Ajouter un commentaire

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

Haut de page