Concevoir une navigation mobile et ses sous-menus

Séparer destination et ouverture

Pour chaque rubrique, décidez si son titre mène à une page ou ouvre une liste. Si les deux fonctions sont utiles, présentez-les comme deux commandes distinctes. Une flèche accolée à un lien ne suffit pas si toute la zone produit tantôt une navigation, tantôt une ouverture selon l’appareil.

Nommez le bouton « Menu » ou « Navigation » plutôt que de compter seulement sur trois traits. Conservez des titres de rubrique cohérents avec les pages d’arrivée. Une navigation générale ne doit pas reproduire toutes les pages du catalogue : elle peut mener à des index qui proposent ensuite recherche et filtres.

Choisir un panneau simple ou une vraie interruption

L’exemple de navigation à ouverture W3C distingue les liens ordinaires des menus applicatifs ARIA. Une navigation de site ne nécessite généralement pas le rôle menu ni les commandes d’un menu de logiciel. Gardez des liens et une commande qui annonce l’état ouvert ou fermé.

Si le panneau laisse le reste de la page utilisable, évitez de le présenter comme modal. S’il couvre et bloque tout le contenu, organisez le comportement d’une vraie interruption avec fermeture et retour du focus. Ce choix doit être identique visuellement et pour les personnes utilisant une aide technique.

Tester les changements d’état et de largeur

Ouvrez un sous-menu sur ordinateur, réduisez la fenêtre, puis revenez à la largeur initiale. Vérifiez que les styles et les états ne laissent pas de lien invisible accessible ou de bouton sans effet. Un panneau fermé doit disparaître aussi du parcours au clavier.

Testez un titre traduit long, un zoom et une page déjà défilée. Le menu ne doit pas cacher durablement le titre ni empêcher de rejoindre le contenu. Si le fond ne peut plus défiler durant l’ouverture, il doit retrouver un comportement normal après fermeture et après activation d’un lien.

Exemple : une rubrique avec une page d’ensemble

Exemple pédagogique : « Prestations » mène à une page de présentation et un bouton voisin ouvre les catégories. Sur téléphone, le bouton Menu révèle les deux fonctions avec leurs libellés. Le test ouvre une catégorie, ferme le panneau puis revient en arrière. La navigation indique encore la rubrique utile sans conserver un calque qui empêcherait de lire la page.