Pour vérifier un menu mobile, essayez de trouver une rubrique, de l'ouvrir puis de revenir au contenu. Contrôlez l'état fermé comme l'état ouvert, au toucher et au clavier. Le menu doit rester compréhensible quand l'espace se réduit ou que le contenu devient plus long.
Définir le comportement du menu
Décrivez d'abord ce que le bouton ouvre : une liste dans la page, un panneau latéral ou une fenêtre modale. Cette distinction détermine les contrôles de focus et de fermeture. Un simple bloc dépliant ne demande pas automatiquement de déplacer le focus à l'intérieur ni de bloquer le reste de la page.
Le tutoriel du W3C sur les menus fournit des repères pour structurer la navigation. Notez aussi les libellés et l'organisation des rubriques : un comportement techniquement correct ne rend pas compréhensible un intitulé vague.
Éprouver quatre états concrets
Commencez par le menu fermé : son bouton est-il repérable et nommé clairement ? Ouvrez-le : les rubriques et la possibilité de fermeture restent-elles accessibles ? Dépliez ensuite une sous-section si elle existe. Enfin, suivez un lien et vérifiez où vous arrivez.
Refaites la séquence avec un libellé long, puis avec un écran plus étroit. Une ligne qui revient à la ligne ne doit pas recouvrir le lien suivant. Ne choisissez pas les tailles de test seulement pour obtenir des captures jolies ; cherchez les situations qui mettent la disposition en difficulté.
Pour le clavier, vérifiez que les commandes restent opérables, en vous référant au critère clavier. La visibilité du focus doit être contrôlée séparément. Un écran tactile peut aussi être utilisé avec un clavier externe.
Exemple fictif : une rubrique trop longue
Imaginez un site d'ateliers qui ajoute « Formations pour les équipes associatives » dans son menu. Sur un écran étroit, le libellé occupe deux lignes et pousse le bouton de fermeture hors du panneau. Le test doit vérifier le défilement, l'accès à la fermeture et le retour au contenu, pas seulement raccourcir le titre pour cacher le problème.
Consignez la largeur, le libellé, l'état ouvert et la commande de sortie utilisée. Essayez une modification de disposition, puis rejouez la séquence avec les autres rubriques. Ce scénario fictif illustre une régression de contenu, fréquente dans les interfaces pensées uniquement avec des textes courts.
Relier maquette et contrôle réel
Préparez ces contraintes dans votre exercice Auto Layout responsive, puis vérifiez le site développé avec un parcours de navigation au clavier. La maquette peut montrer une fermeture ; seul l'essai de l'interface démontre ce qui se passe effectivement après activation.
Ajoutez au moins un appareil réel aux simulations lorsque vous le pouvez. Notez les limites de votre échantillon : une vérification sur un seul navigateur ne permet pas de conclure pour toutes les combinaisons d'appareils et d'aides techniques.
Questions fréquentes
Faut-il un menu plein écran ?
Pas nécessairement. Choisissez une présentation adaptée au nombre de rubriques et au contenu. Un panneau plus grand ne règle pas automatiquement un problème de libellés ou de hiérarchie.
Doit-on fermer le menu en cliquant à l'extérieur ?
Cela peut compléter les commandes de fermeture, mais ne devrait pas être le seul moyen de quitter un panneau qui masque le contenu. Vérifiez une sortie accessible et compréhensible dans le comportement retenu.
Les animations sont-elles indispensables ?
Non. Si elles clarifient le changement d'état, gardez-les discrètes et respectez les préférences de réduction des mouvements. Vérifiez que leur suppression ne rend pas l'ouverture ou la fermeture ambiguë.
Sources
Documentation consultée lors de la relecture du 10 septembre 2026.