Comment réaliser un menu déroulant réellement ergonomique

Menu déroulant accessible / Accessible Drop Down menu

James Edwards vient de publier sur sitepoint.com un article pouvant servir de référence sur ce qui constitue probablement le type de menus le plus utilisé actuellement: les menus déroulant ( « dropdown menu » en anglais).

Critères d’accessibilité

Les critères d’accessibilité à observer sont:

  1. l’ouverture /fermeture doit être contrôlée dans le temps, afin que:
    • le menu ne s’ouvre pas si la souris ne fait que le survoler sans s’y arrêter
    • le menu ne se referme pas si la souris sort brièvement et non intentionnellement de la zone active
    • la synchronisation entre ces deux comportements permet de passe d’un lien à l’autre sans déclencher l’ouverture des sous-menus non souhaités
  2. le menu doit pouvoir se repositionner automatiquement s’il approche de la limite de la fenêtre: il s’ouvre alors dans la direction opposée à la direction par défaut
  3. le menu doit pouvoir se parcourir uniquement à l’aide du clavier. Pouvoir parcourir les menus via la touche ->| TAB c’est bien, avec les flèches (Up/down/left/right) c’est encore mieux.

Démonstration

Il termine par deux exemples de réalisation parfaite selon les trois critères précités:

L’article aborde d’autres points de détail, sa lecture complète vous est vivement recommandée, particulièrement si le sujet vous empêche de fermer l’oeil la nuit.