Exemple de menu déroulant

Composant

17 janvier 2018

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.

L'exemple d'implémentation décrit ci-dessous est aussi bien adapté aux menus de navigation comme aux composants unitaires présentant une liste d'actions.

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-bs-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

aria-expanded : l'attribut aria-expanded avec comme valeur true/false, permet de vocaliser l'état du menu (ouvert ou fermé).
aria-current : si le menu déroulant est utilisé au sein d'un menu de navigation, prévoir l'ajout d'un attribut aria-current="page" sur l'item correspondant à la page active.
aria-haspopup : l'attribut aria-haspopup est réservé au rôle menu (voir paragraphe "Cas particulier des menus applicatifs"). Il n'est donc pas présent dans cette implémentation.


  <button aria-expanded="false">Mon compte</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Mon panier</a></li>
      <li><a class="dropdown-item" href="#" aria-current="page">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>

En complément le pattern ARIA décrit l'utilisation d'un attribut aria-controls, ainsi que des interactions claviers optionnelles supplémentaires : Home/End

Exemple : Example Disclosure for Navigation Menus

Cas particulier des menus applicatifs

Le pattern ARIA décrit un composant "Menu" et "Menubar", utilisant les rôles menu ou menubar.

Attention, ce pattern est réservé uniquement à la création de menu applicatif, dont les interactions devront se rapprocher du comportement des menus présent dans des applications bureaux par exemple.

Ces implémentations sont plus complexes et non nécessaires aux menus de navigation web.

Exemple : Editor Menubar Example