Menu déroulant

Préambule

Dans cet exemple nous allons utiliser le menu déroulant disponible dans la librairie Boosted. Cette librairie basée sur Bootstrap permet de concevoir rapidement des interfaces accessibles aux couleurs de la charte Orange.

Rendu final

Voici le rendu de notre menu.

Code de l'exemple


      <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
          Mon compte
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Mon panier</a></li>
          <li><a class="dropdown-item" href="#">Mes commandes</a></li>
          <li><a class="dropdown-item" href="#">Mes informations</a></li>
          <li role="separator" class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="#">Déconnexion</a></li>
        </ul>
      </div>
      

Place aux tests

Pour que ce menu soit accessible, il doit être utilisable, à la souris, au clavier et au lecteur d'écran.

Navigation au clavier

Déplacer le focus sur le bouton « Mon compte » à l'aide de la touche Tab et valider avec la touche Entrée.
Le menu s'ouvre.
Utiliser les flèches Haut/Bas.
Celles-ci permettent de se déplacer sur les différents éléments du menu.
Appuyer sur la touche Échap.
Le menu se ferme. À la fermeture, le focus est automatiquement repositionné sur le bouton permetant d'ouvrir le menu

Navigation au lecteur d'écran

Se positionner sur le bouton « Mon compte ».
Le lecteur d'écran indique qu'il s'agit d'un menu déroulant ; de plus il indique l'état du menu (ouvert ou fermé).
Appuyer sur la touche Entrée.
Le menu s'ouvre, le premier élément est sélectionné. Cet élément est automatiquement vocalisé par le lecteur d'écran.
Utiliser les flèches Haut/Bas.
Celles-ci permettent de se déplacer sur les différents éléments du menu.
Sélectionner un élément du menu à l'aide de la touche Entrée.
Le menu se ferme. Comme le focus est replacé automatiquement, le lecteur d'écran vocalise à nouveau le bouton du menu, ainsi que son état.

Attributs ARIA

Si vous n'utilisez pas un composant menu déjà accessible, vous aller devoir utiliser quelques attributs ARIA pour que ce menu soit correctement vocalisé au lecteur d'écran.

Sur le bouton permettant d'ouvrir le menu :

Exemple :

        <button aria-haspopup="true" aria-expanded="false">Mon compte</button>
      

Sur la liste des éléments à l'intérieur du menu :

Exemple :

        <button aria-haspopup="true" aria-expanded="false">Mon compte</button>
        <ul role="menu">
          <li><a href="#" role="menuitem">Mon panier</li>
          <li><a href="#" role="menuitem">Mes commandes</li>
        </ul>