Commencer par les actions faciles à confondre
Ouvrir un produit et l’ajouter à une comparaison répondent à deux intentions différentes. Sur téléphone, les commandes correspondantes se touchent pourtant parfois presque. Avant de revoir le dessin, listez ces paires : recherche et fermeture, image précédente et suivante, plus et moins. Évaluez leur association, pas seulement chaque icône. Si une pression ordinaire impose de viser soigneusement, il faut réexaminer la disposition.
Un petit symbole dans une zone utilisable
Une icône discrète peut être placée dans un bouton plus généreux. L’espace ajouté doit réellement réagir à la pression et ne pas servir uniquement de marge décorative. Les zones actives voisines ne doivent pas se chevaucher. Le critère 2.5.8 des WCAG 2.2, niveau AA, fixe un minimum de 24 × 24 pixels CSS, avec des exceptions définies. Ce seuil ne suffit pas à concevoir un menu agréable.
Simplifier avant d’agrandir
Si toutes les actions ne tiennent pas, ne les réduisez pas indéfiniment. Gardez l’action principale visible et rangez les opérations rares dans un menu secondaire clairement nommé. Conservez le nom de la section courante et un retour évident. Testez les véritables traductions : un libellé court de maquette peut masquer un problème dans une autre langue.
Vérifier la modification en situation
Testez le zoom normal et agrandi, un écran étroit et le clavier de recherche ouvert. Touchez le bord du bouton, l’espace entre deux actions et le libellé. Le résultat doit être compréhensible, sans navigation involontaire. Parcourez aussi l’interface avec Tab : une grande zone tactile ne garantit pas l’accès au clavier. Notez les écrans et modes de saisie vérifiés. L’examen de quelques boutons ne constitue pas un audit complet d’accessibilité.
Poursuivez avec le focus visible et la navigation au clavier.