Exemple de menu déroulant

Introduction

Les menus déroulants permettent d’organiser et d’afficher des options de navigation ou des actions de manière compacte et structurée. Cependant, s’ils ne sont pas correctement développés, ils créent des problèmes d’accessibilité pour de nombreux utilisateurs.

Un menu déroulant accessible garantit une navigation fluide et intuitive pour tous, en respectant la conformité et les recommandations des normes (WCAG, RGAA, EN301549 etc.).

Dans les exemples suivants, 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 et conformes aux normes WCAG ainsi qu'au motif de conception aria combobox

Menu déroulant

Pour que le menu déroulant soit accessible, il faudra faire particulièrement attention aux points suivants :

• Permettre la navigation à la souris et au clavier (navigation avec la touche Tab, activation avec Entrée ou Espace, déplacement avec les flèches directionnelles).
• Être compatible avec les technologies d’assistance(AT), en fournissant une sémantique, des rôles et des attributs adaptés.(aria-expanded et aria-current par exemple)
• Une visibilité et un contraste suffisants pour une bonne lisibilité des textes et du focus au clavier.
• Le comportement du menu déroulant et de la sélection d'un élément doivent être prévisibles et cohérents pour éviter toute confusion.

Exemple

Code de l'exemple

<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle" aria-expanded="false" 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>

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.

Place aux tests

Navigation au clavier

Le menu se ferme. À la fermeture, le focus est automatiquement repositionné sur le bouton permettant d'ouvrir le menu

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.

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

Le motif de conception ARIA décrit les composants "Menu" et "Menubar" qui utilisent les rôles menu ou menubar.

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 de bureaux par exemple.

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

Exemple : Editor Menubar Example