cemyaşlı.
FR
Cem Yaşlı / Menu
← Notes de studio
UI et UX2 min de lecture

Comment reconnaître la carte sélectionnée sans se fier à la couleur ?

Dans un sélecteur de polices, une coche persistante et un contour de focus distinct permettent de différencier sélection et navigation au clavier.

Cem Yaşlı
Deux cartes de caractères Aa, dans différentes nuances de gris, côte à côte à l'écran.

Deux cartes présentent le même spécimen « Aa ». La carte choisie devient violette. Une pression sur Tab fait apparaître un liseré violet sur une autre commande. Quelle police sera appliquée ? La même couleur sert à transmettre deux informations.

Donner à la sélection un signe qui reste

Nommez les cartes « Avec empattements » et « Sans empattements ». Dans une première maquette, indiquez le choix par le fond seul. Dans la seconde, ajoutez une coche et la mention « Sélectionnée » à l’intérieur de la carte. Réservez le contour extérieur au focus clavier : quand celui-ci se déplace, la coche reste auprès de la police choisie.

Trois vérifications avant la livraison

Passez la maquette en niveaux de gris : peut-on désigner la police active sans nommer une couleur ? Parcourez ensuite l’interface au clavier. Enfin, réduisez la largeur pour faire passer un libellé sur deux lignes : la coche doit rester à côté du texte. Pour un choix exclusif, prévoyez des boutons radio partageant le même nom, avec des libellés accessibles et un état coché transmis aux technologies d’assistance. La maquette en gris ne suffit pas à tester la navigation.

W3C : WCAG 2.2, 1.4.1 · Recommandation du W3C du 5 octobre 2023

Dans le carnet

Adobe MAX 2026 : ce que le MCP local change pour les graphistes ↗Quelles mesures relever pour la signalétique d’un hôtel ? ↗Tous les articles ↗