Menus déroulants accessibles

Sophie Schuermans le 16/04/2015 - Réagissez

Les menus déroulants sont censés simplifier la vie des utilisateurs en leur donnant accès à toutes les pages d'un site. Mais dans la pratique ils sont souvent difficiles à utiliser ou carrément inutilisables.

exemple de menu déroulant à 4 niveaux

Nous essayons ici de résumer les points essentiels auxquels il faut faire attention et de décrire quelques bonnes solutions.

Conseils généraux

Les deux points essentiels auxquels ils faut penser sont les suivants :

  • Utiliser une liste de liens avec un ou plusieurs niveaux d'imbrication pour structurer le menu dans le code HTML. De cette manière la structure du menu est claire pour tout le monde.
  • Faire en sorte que tous les niveaux du menu déroulant soient accessibles, quel que soit le mode d'interaction: souris, clavier, lecteur d'écran ou autres.

À côté de cela on peut également donner des informations supplémentaires :

  • Identifier la liste imbriquée comme un menu de navigation (avec <nav role="navigation">)
  • Annoncer que les liens du premier niveau du menu permettent d'afficher un sous-menu (aria-haspopup="true")
  • Annoncer l'état des éléments du menu : ouvert ou fermé (aria-expanded="true" ou aria-expanded="false" )

De bonnes solutions

La bonne solution dépend du contexte. L'objectif est que tout le monde puisse facilement s'orienter et naviguer dans le site, quel que soit le mode d'interaction utilisé.

On peut diviser les menus déroulants en deux grandes catégories. Les principales distinctions concernent:

  • ce qu'il faut faire pour afficher le sous-menu : s'affiche-t-il au survol de la souris (hover) ou faut-il cliquer, au clavier s'affiche-t-il avec TAB ou ENTER ?
  • la manière dont les sous-menus sont cachés : offscreen (ou clipping) ou display:none.

Il existe pas mal de combinaisons. Nous avons choisi de présenter deux solutions qui fonctionnent bien.

TAB et positionnement offscreen

Exemples : menu déroulant responsive basé sur un exemple de Simply Accessible et démo de menu déroulant accessible proposé par Accede Web. Le premier est responsive, le deuxième pas, mais à part cela leur comportement est semblable.

menu déroulant AnySurfer

menu déroulant AnySurfer sur mobile :affiché comme liste imbriquée

Le comportement du menu est le suivant:

  • A la souris:
    • Le sous-menu s'affiche au survol de l'élément parent.
    • En cliquant sur l'élément parent on navigue vers la page correspondante
  • Au clavier:
    • Le sous-menu s'affiche avec TAB, quand le focus arrive sur l'élément parent.
    • ENTER sert à naviguer vers la page correspondante
    • Le contenu de la liste imbriquée peut être parcourue de haut en bas au moyen du TAB, dans l'ordre du code source.
  • Avec un lecteur d'écran:
    • Le menu dans son entièreté est visible en permanence, comme une simple liste imbriquée car les sous-menus sont cachés de manière à rester visibles pour un lecteur d'écran (offscreen ou clipping). Il n'est donc pas nécessaire d'utiliser aria-haspopup ou aria-expanded.
    • Tous les liens du menu sont toujours visibles dans la liste de liens du lecteur d'écran.
    • Le menu peut se parcourir simplement en utilisant la flèche vers le bas, dans l'ordre du code source.

Cette solution est recommandée quand les liens du premier niveau sont des liens vers des pages du site.

Cette solution n'est pas pratique quand le menu déroulant est très long car il faut faire beaucoup de tabulations pour le traverser. Dans ce cas, l'utilisation d'un lien d'évitement (aller au contenu) peut être une solution.

ENTER et display:none

Exemple: Adobe accessible mega menu.

menu déroulant d'Adobe

Le comportement du menu est le suivant:

  • Au clavier:
    • Le TAB ne parcourt que les liens du premier niveau, qui sont visibles.
    • Le sous-menu s'affiche avec ENTER.
    • Le TAB permet de parcourir le sous-menu quand il est affiché.
  • Avec un lecteur d'écran:
    • Seul le premier niveau du menu est visible en permanence.
    • Les sous-menus sont cachés avec display:none.
    • Le lecteur d'écran annonce que l'élément parent sert à afficher un menu déroulant (grâce à aria-haspopup) et indique si le menu est actuellement déroulé ou pas (grâce à aria-expanded).

Le gros avantage de cette solution est que l'utilisateur qui parcourt le menu au clavier n'est pas obligé de parcourir tous les niveaux de la liste.

Pour ce même comportement au clavier, il y a trois variantes, en fonction de la fonction des éléments du premier niveau du menu :

  1. Uniquement afficher et masquer le sous-menu
  2. Afficher le sous-menu et ouvrir une page du site
  3. Uniquement ouvrir une page du site (accompagnés d'un bouton pour afficher et masquer sous-menu)

Première variante

Les liens du menu servent uniquement à afficher et masquer les sous-menus. Les liens du premier niveau du menu ne correspondent pas à des pages du site.

  • A la souris: le sous-menu s'affiche quand on clique sur l'élément parent. Un deuxième clic masque le sous-menu.
  • Au clavier: Le premier ENTER affiche le sous-menu, le deuxième ENTER le masque.

C'est une bonne solution quand il n'y a pas de pages intermédiaires correspondant au premier niveau du menu.

Deuxième variante

Exemple sur la page du FWO

Les liens du menu ont une double fonction:

  • A la souris: le sous-menu s'affiche au survol de l'élément parent. En cliquant sur l'élément parent on navigue vers la page correspondante
  • Au clavier: Le premier ENTER affiche le sous-menu. Le deuxième ENTER sur le même lien ouvre la page correspondante.

Ce type de menu peut porter à confusion car le même lien a deux fonctions. Certains ne comprendront pas que le lien sert également à afficher une page, et ne découvriront pas ce contenu.

Troisième variante

Exemple sur Screenfeed.

Les liens du menu servent à afficher une page et ils sont accompagnés d'un bouton séparé pour dérouler le menu.

menu déroulant 'poney' avec bouton pour dérouler le menu

C'est une bonne solution quand les éléments du menu ont une double fonction. Il faut veiller à bien intituler les boutons.

Alternative au menu déroulant : sous-menus sur les pages

Exemple: menu déroulant sur le site de la ville de Leuven : le menu déroulant sous 'Ville de la bière' ne peut pas s'afficher au clavier et est invisible avec un lecteur d'écran. Mais en utilisant le lien "Ville de la bière" on trouve un sous-menu qui contient les mêmes liens que le menu déroulant:

menu déroulant 'Ville de la bière' sous-menu dans la colonne de gauche, contenant les mêmes liens

  • Le sous-menu s'affiche au survol de la souris.
  • Le sous-menu ne peut pas s'afficher au clavier (ni avec TAB, ni avec ENTER).
  • Seul le premier niveau du menu est visible en permanence. Les sous-menus sont cachés avec display:none.
  • Un sous-menu identique au menu déroulant est disponible sur toutes les pages accessibles à partir du menu.

Ceci peut être une solution quand le menu déroulant est trop long. Il faut cependant veiller à ce que le sous-menu puisse facilement être trouvé et identifié comme tel sur toutes les pages.

Erreurs à éviter

En pratique on rencontre régulièrement des menus de navigation déroulants qui ne sont pas accessibles, pour diverses raisons. Voici quelques erreurs à éviter:

  • Le menu déroulant se parcourt uniquement avec les flèches, pas avec le TAB: ce n'est pas le comportement attendu dans une page web mais dans une application.
  • Les rôles menu, menubar ou menuitem sont utilisés : ces rôles sont destinés aux menus applicatifs, pas aux menus de navigation, et ils escamotent la sémantique présente dans le code HTML (listes, liens). Ne les utilisez pas pour des menus de navigation.
  • Le TAB permet d'accéder à tous les liens mais ils ne deviennent pas visibles. Il faut faire en sorte que les parties déroulantes soient visibles quand elles ont le focus.
  • Les liens du menu déroulant sont accessibles mais n’envoient pas vers la page annoncée (exemple: bug sur un module Superfish pour Drupal).
  • Les liens du menu ne sont pas des liens.
  • Le menu n'est pas structuré comme une liste imbriquée, l'ordre des liens n'est pas correct.

Réagissez

Les balises HTML suivantes sont autorisées: <a> <b> <ul> <li>