Menus dépliants
Dans un menu dépliant, seuls les éléments de premier niveau sont visibles. En règle générale ces éléments correspondent aux principales rubriques du site. En activant un élément du menu, l'utilisateur ouvre un sous-menu.
Un menu dépliant peut être implémenté de plusieurs façons. Le sous-menu peut se déplier lorsque le curseur passe sur l'élément, ou lorsque l'utilisateur tabule sur l'élément au clavier, ou encore quand l'utilisateur sélectionne l'élément ou appuie sur ENTER lorsque l'élément reçoit le focus.
A quoi ressemblent les menus dépliants ?
Description vidéo
Un utilisateur navigue dans le menu principal du site Web du American National Parks Conservation Association.
L'utilisateur
- tabule au menu principal
- ouvre le premier élément du menu avec ENTER
- tabule dans le sous-menu
- sélectionne un des éléments du sous-menu
Quelles sont les difficultés rencontrées par les utilisateurs face aux menus dépliants
Les menus dépliants posent problème à de nombreux utilisateurs.
1 Accès au clavier : le menu ne se déplie pas (seulement accessible à la souris)
Souvent les menus dépliants marchent bien pour les utilisateurs naviguant à la souris, mais ne reçois pas le focus au clavier.
Description vidéo
Un utilisateur naviguant au clavier veut déplier la menu principal du site Web Hannover.de
- Le focus est difficile à voir ; l'utilisateur active le programme "Force Focus" pour mieux voir sa position.
- L'utilisateur ne peut pas tabuler dans le menu principal ; les focus saut au premier élément après le menu.
- Un utilisateur naviguant à la souris prend la main pour montrer que le menu s'ouvre bien à la souris.
2 Accès clavier : menus imbriqués et menus volumineux, focus peu visible
Les menus dépliants imbriqués sont souvent difficiles d'accès. Quand chaque élément du menu reçoit le focus, la navigation peut être extrêmement longue pour les utilisateurs naviguant au clavier. Ce problème peut être aggravé si le focus est peu visible.
Les utilisateurs naviguant à la souris peuvent également rencontrer des problèmes : le fait d'ouvrir un sous-menu et ses sous-menus demande de la dextérité. Le menu peut se refermer avant que l'utilisateur a atteint l'élément voulu.
Description vidéo
Un utilisateur naviguant au clavier veut interagir avec le menu principal du site Web Magdeburg.de. En arrivant sur le menu principal :
- un sous-menu se déplie
- en tabulant un menu de troisième niveau se déplie
- en tabulant un menu de quatrième niveau se déplie
- en tabulant un menu de cinquième niveau se déplie
Traverser le menu prend du temps. Il est difficile d'identifier l'élément qui reçoit le focus.
3 Accès au clavier et au lecteur d'écran : comportement inattendu
Quand un menu a été implémenté comme interface à onglets mais visuellement ressemble à un menu classique, les utilisateurs s'attendent à pouvoir se déplacer en tabulant, mais ce composant ne se comporte pas de cette manière. Seules les flèches → ← permettent de passer d'élément en élément.
Les utilisateurs non-voyants peuvent rencontrer un autre problème : cette interface à onglets n'utilise par les rôles ARIA tab, tablist et tabpanel pour indiquer de manière claire comment se déplacer dans le menu.
Description vidéo
Dans cette démo, l'utilisateur accède au clavier au menu principal du site web familyreunion-syria.diplo.de (il navigue avec Firefox et le lecteur d'écran NVDA).
- En tabulant au menu principal, le premier élément Startseite prend le focus.
- Il n'est pas possible de tabuler à l'élément suivant ; le focus est pris sur le premier élément qui suit le menu.
- L'utilisateur déplace le focus sur l'élément du menu et utilise la flèche droite à la place.
- Le lecteur d'écran annonce l'intitulé du lien lettre par lettre.
4 Accès aux utilisateurs mal-voyants : Les contrôles de sous-menu difficiles à trouver et à associer aux éléments du menu
Les utilisateurs mal-voyants ont souvent du mal à faire le lien entre les étiquettes et les contrôles dont elles font référence, les deux ne se trouvant pas toujours à proximité.
Description vidéo
Un utilisateur mal-voyant cherche à ouvrir un sous-menu du menu principal en mode "responsive" sur le site web Existenzgründer.de.
- Elle ouvre la navigation principale via le bouton hamburger
- Elle ne voit pas le mécanisme permettant de déplier l'élément "Unternehmen führen"
- Elle active un élément de menu qui ouvre une nouvelle page - le menu principal se ferme
- Elle ouvre la navigation principale de nouveau via le bouton hamburger et découvre le contrôle +
- Elle se trompe de contrôle + (le contrôle n'est pas situé à proximité de l'élément de menu dont il fait référence)
5 Accès aux utilisateurs mal-voyants : bouton Hamburger impossible à localiser
Sur de nombreux sites, l'utilisateur passe en mode "responsive" si l'écran n'est pas suffisamment large ou si l'utilisateur a zoomé.
Description vidéo
Un utilisateur mal-voyant doit trouver le menu principal qui est présenté comme bouton hamburger.
- L'utilisateur cherche la navigation principale et pense l'avoir localisée quand il tombe sur une interface à onglets au milieu de la page.
- L'accompagnateur lui indique la présence d'un autre menu sur la page.
- Il cherche le menu en haut de la page.
- Il zoom sur les boutons "rechercher" et "menu", mais pense être dans la rubrique "rechercher".
- Il continue de chercher ; l'accompagnateur fini par lui indiquer la position du bouton hambuger.
- Il localise le bouton, l'active, et vérifie que le menu s'ouvre correctement.
6 Accès par commande vocale : éléments de menu non-activés
Pour les personnes naviguant à l'aide de commande vocale, la manière dont les menus dépliants sont codés peut empêcher l'interaction.
Description vidéo
Un utilisateur de lecteur d'écran navigue sur le site web de la compagnie aérienne Eurowings.com.
- La commande "Klick Buchen" ouvre le menu dépliant.
- La commande "Klick Flüge Buchen“ ouvre l'interface de recherche de vols.
- La commande „Klick Abflughafen“ ouvre un autre menu dépliant.
- La commande „Klick Deutschland - Nord“ ne marche pas parce que l'élément de menu n'est pas codé en lien.
7 Utilisateurs de lecteurs d'écran : Contenus de la page qui rendent le menu difficile d'accès
Des contenus dynamiques tels que les animations déclenchées de manière automatique ou des carrousels peuvent rendre inaccessibles les menus de navigation pour les utilisateurs de lecteurs d'écran. La piste audio et les captions reprennent les éléments annoncés par le lecteur d'écran. On entend également l'utilisateur non-voyant.
Description vidéo
Un utilisateur non-voyant veut consulter le menu du site web GKV Spitzenverband. Un carrousel est actif en arrière-plan et le lecteur d'écran reste bloqué sur les contenus du carrousel, empêchant l'utilisateur de connaître les éléments du menu.
Comment créer des menus dépliants accessibles ?
- Faire en sorte que le menu soit accessible au clavier. Baliser les éléments de menu en liste et faire en sorte que la touche TAB permet de se déplacer dans le menu.
- Rendre les sous-menus masqués accessibles au clavier. Faire en sorte que la prise de focus ou le fait d'appuyer sur ENTER permet d'ouvrir le sous-menu, ou de renvoyer vers une page ou sont listés tous les éléments du sous-menu.
- Faire en sorte que la position du focus dans le menu principal et le sous-menu soit visible. Les utilisateurs naviguant au clavier ont besoin de savoir ou ils se situent avant d'activer un élément.
- Limiter la taille des sous-menus lorsque la prise de focus ouvre le sous-menu. Eviter d'imposer aux utilisateurs des listes trop longues à parcourir.
- En règle générale, limiter la taille des sous-menus. Quand les menus dépassent la taille de l'écran du navigateur, les derniers éléments sont difficiles à atteindre, particulièrement pour les utilisateurs qui agrandissent les contenus.
- Vérifier que tous les contenus sont accessibles dans les versions responsives du menu (pour des téléphones portables, par exemple) via des sous-sections ou des sous-menus.
- Indiquer l'état des sous-menus. Lorsque les sous-menus s'affichent en cliquant ou en appuyant sur ENTER, indiquer aux utilisateurs de lecteurs d'écran si le sous-menu est visible ou masqué.
8 Utilisateur mal-voyant : des menus longs difficiles à consulter
Les sous-menu trop longs posent problème à l'ensemble des utilisateurs. Sur des écrans de taille réduite, il est souvent impossible de consulter l'ensemble des éléments du sous-menu et la fin de la liste peut être coupée. Naviguer dans ces derniers éléments devient complexe voir impossible. Ce problème est accentué pour les utilisateurs mal-voyants qui élargissent les contenus.
Pour aller plus loin
- Menus and boutons de menus (Heydon Pickering, Inclusive Components, mai 2017)