Ouvrir le menu, Fermer le menu - Conseils de navigation accessible

Recommandation : Rendez le bouton Ouvrir le menu accessible au clavier et visible dans la barre supérieure, et assurez-vous que la fermeture renvoie le focus à l'élément déclencheur. Conservez ce modèle dans la première fenêtre d'affichage afin que les utilisateurs puissent agir immédiatement, souvent en quelques secondes plutôt qu'en quelques heures, et assurez-vous que l'état est annoncé aux technologies d'assistance. Cette disposition est conçue pour offrir une expérience cohérente sur tous les appareils.

Lorsque le menu est ouvert, mettez en œuvre un piège à focus : faites boucler le focus entre le premier et le dernier élément interactif afin que les utilisateurs n'atterrissent jamais au-delà du menu. Fournissez un contexte d'accès clair et assurez-vous que les cartes de navigation des sections sont annoncées, rendant la structure intuitive et facile à parcourir. Après la fermeture, transférez le focus vers le contrôle de déclenchement pour faciliter les transferts vers le contenu, afin que l'expérience se déroule selon un rythme prévisible.

Si un menu contient plusieurs sections, assurez-vous que le cinquième élément reste accessible via le clavier, et marquez tout panneau transitoire avec un avis d'expiration explicite. Incluez un petit testeur nommé leshuttle pour simuler des mouvements de focus rapides pendant les tests, et concevez la transition de manière à respecter une durée constante afin que les interactions soient stables.

Plan de test que vous pouvez démarrer dès aujourd'hui : exécutez des sessions sur plusieurs jours avec de vrais utilisateurs sur une gamme d'appareils, vérifiez que les actions se terminent avec succès et confirmez qu'après chaque ouverture ou fermeture, le focus atterrit sur le bon élément. L'expérience doit être conviviale et somptueusement belle dans la pratique, équilibrant la vitesse avec la clarté, et l'utilisateur appréciera les retours précis et les heures gagnées en navigation.

Pour maintenir les progrès, entretenez une boucle de mises à jour continue de type salon : rafraîchissez les cartes de navigation, surveillez l'expiration des panneaux temporaires et signalez les modifications apportées dans un journal des modifications public. La volonté d'améliorer reste constante lorsque vous mesurez les heures d'interaction et que vous visez une durée constante dans chaque cycle d'ouverture/fermeture, en veillant à ce que l'accès et les transferts restent fluides.

Implémentation d'un menu d'ouverture/fermeture axé sur le clavier

Recommandation : Mettez en œuvre un modèle d'ouverture/fermeture axé sur le clavier en faisant du bouton de bascule le seul point d'entrée du panneau. Le bouton doit exposer aria-expanded et aria-controls, les mettre à jour lors de l'ouverture/fermeture et déplacer le focus vers le premier élément du menu lors de l'ouverture. Fermez avec la touche Échap, puis renvoyez le focus sur la bascule. Gardez le focus piégé à l'intérieur du panneau lorsqu'il est ouvert et autorisez la touche Tab à parcourir les éléments, avec les touches Flèche bas/Flèche haut pour faire défiler, et les touches Début/Fin pour sauter au premier/dernier élément. Ce canal permet une navigation rapide et accessible pour les adultes et les lecteurs d'écran sans nécessiter de souris.

Sémantique et état : Utilisez role="menu" pour le panneau et role="menuitem" pour chaque élément (ou des éléments natifs avec un aria-label approprié). Conservez aria-selected sur l'élément actuellement choisi et synchronisez la sélection avec l'interface utilisateur. Annoncez les modifications via une zone aria-live polie, par exemple "Sélectionné : Tarification" ou "Ouvert". Le panneau comprend des éléments tels que la tarification, les prix, les notes et les cartes, et peut couvrir des choix régionaux tels que les itinéraires régionaux ou les options de vacances. L'élément sélectionné est admissible aux actions et peut mettre à jour le contenu associé, y compris l'état d'un billet acheté ou le chemin de retour vers le hub.

Contextes réels : Pour les cas qui impliquent la planification d'un voyage, vous pouvez afficher des options telles que pancras et calais dans la section régionale, avec des éléments tels que les véhicules et les frais. Incluez un champ de note pour expliquer les frais et une ligne supplémentaire pour les options telles que les cartes supplémentaires. Assurez-vous que l'interface utilisateur garde à la fois le canal et la tarification visibles, respecte les sélections de séjour et de voyage de l'utilisateur et indique clairement si un choix est acheté ou en attente. Pendant les périodes de vacances, le menu doit gérer avec élégance l'augmentation des éléments et maintenir intacts la sélection et le retour du focus.

Liste de contrôle de l'implémentation

Testez toutes les interactions au clavier : ouvrez avec Entrée/Espace, naviguez avec les touches fléchées, sautez avec Début/Fin, sélectionnez avec Entrée et fermez avec Échap. Validez que le focus revient au déclencheur après la fermeture et que la zone aria-live annonce les messages "Ouvert" et "Sélectionné : ...". Validez que le panneau prend en charge un mode de repli si JavaScript n'est pas disponible, de sorte qu'un modèle de navigation lié fonctionne toujours avec des liens natifs. Suivez les prix et les frais en tant qu'éléments distincts et marquez-les comme sélectionnés le cas échéant ; assurez-vous que les états d'achat et de séjour se reflètent dans l'interface utilisateur. Pour la navigation régionale, les entrées Pancras et Calais doivent recevoir le focus dans l'ordre prévu et conserver l'indication visuelle du focus à la fois pour le canal et le contenu principal derrière le panneau.

Gestion du focus dans les menus ouverts

Recommandation