Amélioration de l'état des boutons en changeant uniquement les couleurs
Contexte En bref, la 'Liste d'objets' ci-dessus augmente de contenu lorsque les différents boutons en haut (A, B, C, D & E) sont choisi. Ces boutons ressemblent à des onglets, mais comme plusieurs peuvent être sélectionnés simultanément (en ajoutant leur contenu respectif à la liste), ils se comportent plus comme des boutons à bascule. Dans l'image ci-dessus, les boutons A et D génèrent actuellement le contenu dans la 'Liste d'objets'.
Problème Les utilisateurs comprennent la fonctionnalité des boutons, mais signalent qu'ils ne savent pas toujours quels boutons sont (in) actifs. Par conséquent, ils ne comprennent pas toujours quels boutons génèrent le contenu dans la "Liste d'objets" ci-dessous.
Question Étant donné que les utilisateurs n'ont eu aucun problème avec la fonctionnalité réelle des boutons, je ne pense qu'à améliorer l'état d'affichage en utilisant la couleur, donc (voir l'image au dessous de):
- Les boutons actifs sont maintenant plus clairs et les boutons inactifs sont plus foncés
- En conséquence, la zone connectée sous les boutons actifs est désormais plus claire également
- Les boutons actifs ont leurs lettres en gras dans leur couleur respective pour illustrer un état sélectionné
Suis-je dans la bonne direction ici en utilisant simplement des couleurs?
Je pense que vous avez la réponse vous-même, quand vous dites
Ces boutons ressemblent à des onglets
Faites-les simplement ressembler à ce qu'ils sont, des BOUTONS, puis vous pouvez utiliser les états des boutons pour communiquer des états tels que actif, sélectionné, désactivé ou neutre. L'utilisation de l'interface utilisateur pour d'autres éléments que ceux que vous utilisez réellement posera toujours des problèmes, allant des difficultés de compréhension des moyens financiers aux problèmes de mise en œuvre (tels que ceux que vous avez maintenant).
En bref: les boutons sont des boutons. Utilisez-les comme prévu et le problème est résolu.
En prenant un peu de recul, je pense que votre problème pourrait être celui de mélanger les métaphores de l'interface utilisateur.
Dans les applications de bureau, les onglets sont utilisés pour sélectionner une page parmi plusieurs.
Votre interface utilisateur propose des options librement composables, généralement associées à des cases à cocher. Donc, ajouter une case à cocher à l'étiquette rendrait les choses plus proches des sélections habituelles parmi d'autres dans d'autres applications.
Ajouter une ligne de texte entre les onglets et la liste, serait une autre option qui jouerait même Nice avec des lecteurs d'écran.
Évitez d'utiliser uniquement la couleur pour communiquer des informations
L'un des principes de l'accessibilité du Web est "S'assurer que la couleur n'est pas le seul moyen de communiquer des informations".
- Alors que deux couleurs peuvent sembler très différentes à l'œil d'un concepteur, une personne ayant une déficience de la vision des couleurs peut les percevoir comme presque identiques - vérifiez vos couleurs les unes contre les autres avec un Contrast Checker
- Les utilisateurs accédant à votre page avec un lecteur d'écran n'obtiendront pas ces repères visuels. Les lecteurs d'écran ne signalent pas la couleur de la page ou de ses éléments. Consultez la documentation MDN sur le balisage ARIA
L'utilisation de balises ARIA sur les onglets résoudra les problèmes d'accessibilité. Et pensez à ajouter une "icône active" à l'onglet actif.