Identification cohérente
Les composants ayant la même fonctionnalité sur un site doivent être identifiés de manière cohérente : même libellé, même icône, même nom accessible. Deux boutons qui font la même chose ne doivent pas s'appeler Rechercher sur une page et Trouver sur une autre.
Ce que le critère demande
Lorsque deux composants d’interface utilisateur remplissent la même fonction sur un site, ils doivent être identifiés de manière cohérente. Cela signifie le même nom accessible (libellé, aria-label, texte alternatif), la même icône et un traitement visuel identique — afin que l’utilisateur reconnaisse « c’est la même action que j’ai effectuée deux pages plus tôt ».
La règle porte sur les libellés, pas sur le style. Un bouton d’envoi peut être mis en avant visuellement différemment selon le contexte, mais le nom accessible « Envoyer » ne doit pas devenir « Soumettre » ailleurs lorsqu’il accomplit la même chose.
Comment satisfaire ce critère
- Maintenir un vocabulaire restreint de verbes d’action (« Enregistrer », « Annuler », « Supprimer », « Rechercher ») et l’appliquer sur l’ensemble du site.
- Utiliser la même icône pour la même action partout — un seul pictogramme de recherche, pas trois.
- Lorsqu’une icône représente une action, lui attribuer le même nom accessible sur toutes les pages.
- Utiliser un composant du système de conception (
<Button label="Enregistrer">) plutôt que de saisir les libellés manuellement par page. - Auditer le site pour repérer les synonymes : « Envoyer » vs. « Soumettre », « Rechercher » vs. « Trouver », « Se connecter » vs. « S’identifier », « S’inscrire » vs. « Créer un compte ».
Erreurs courantes
- Deux icônes représentant la même action avec deux noms accessibles différents (« Modifier » sur un écran, « Éditer » sur un autre).
- Un champ de recherche intitulé « Rechercher » dans l’en-tête et « Chercher du contenu » dans la barre latérale.
- Un bouton « Supprimer » dans la vue liste et un bouton « Retirer » dans la vue détail — même effet, mot différent.
- Texte d’appel à l’action incohérent : « Acheter maintenant » sur la page produit, « Ajouter au panier » sur la page de liste, pour ce qui est fonctionnellement la même action.
Pourquoi c’est important
Les utilisateurs de lecteurs d’écran naviguent en parcourant une liste de liens ou de boutons. Si la même action est libellée différemment sur le site, ils ne peuvent pas s’appuyer sur des patterns reconnaissables — ils doivent lire chaque libellé et déterminer si ce « Envoyer » correspond au « Soumettre » rencontré précédemment. Pour les utilisateurs ayant des troubles cognitifs, l’identification cohérente est l’une des meilleures aides à la compréhension que l’on puisse offrir.
Ce critère de succès impose de traiter les libellés d’interface et les icônes comme des tokens de conception de premier ordre, et non comme du contenu que chaque rédacteur décide individuellement.