Mettez votre site en valeur ! Conseils pour concevoir des indicateurs de sélection utiles et faciles à utiliser

Que sont les indicateurs de concentration ?

Avez-vous déjà remarqué les contours bleus qui apparaissent parfois autour des boutons ou des champs de formulaire ? Et lorsque vous cliquez sur un élément de menu ? Avez-vous déjà essayé de faire disparaître ces contours ?

Les navigateurs utilisent la pseudo-classe CSS :focus-visible pour ajouter des contours aux champs de formulaire et à d'autres éléments lorsqu'ils sont sélectionnés. Voici une autre astuce : si vous décidez de supprimer les contours par défaut du navigateur, veillez à les remplacer par autre chose ! Il existe en effet toute une catégorie d'utilisateurs qui se fient à ces contours pour savoir où ils se trouvent sur la page.

Ces contours sont appelés « indicateurs de focus ». Il s'agit de repères visuels qui indiquent quel élément d'une page Web a le focus. Un seul élément d'une page peut avoir le focus à la fois, et cela doit être clairement identifiable. La quasi-totalité des éléments pouvant recevoir le focus sont interactifs : champs de formulaire, liens, boutons, infobulles, etc.

Une règle générale pour une conception accessible: si vous pouvez interagir avec un élément à l'aide de la souris, vous devriez également pouvoir utiliser le clavier pour effectuer les mêmes actions. Et si vous utilisez le clavier, tout élément avec lequel vous interagissez doit afficher un curseur de sélection visible.

Pourquoi la concentration est-elle importante ?

L'objectif principal du focus est de guider l'utilisateur.

Pour les utilisateurs voyants, il est important que la zone de sélection soit clairement visible et identifiable. Il s’agit d’un élément graphique au même titre que n’importe quel autre élément que vous concevez, et il doit respecter vos normes de cohérence. La zone de sélection indique aux utilisateurs ce qui est « cliquable » et permet d’identifier la nature d’un élément.

Mais au fond, qui a besoin d'indicateurs de mise au point ?

« Qui ne navigue pas sur les sites web avec une souris ? », vous demandez-vous peut-être. En réalité, de nombreuses personnes (1 adulte sur 4 aux États-Unis est en situation de handicap) utilisent le clavier comme principal moyen d'accès au web, notamment :

Les personnes qui utilisent des lecteurs d'écran. Les utilisateurs de lecteurs d'écran sont souvent aveugles, mais pas toujours ! Les personnes malvoyantes ou présentant des troubles cognitifs (comme la dyslexie) utilisent également des lecteurs d'écran pour les aider à comprendre les contenus disponibles sur le Web. Les lecteurs d'écran se commandent presque exclusivement à l'aide du clavier.

Les personnes à mobilité réduite. Par exemple, celles qui ne disposent pas d’une motricité fine suffisante au niveau des mains pour utiliser une souris. Elles peuvent recourir à un accessoire tel qu’un bâton à commande buccale pour utiliser un clavier standard, ou à un commutateur qui simule un clavier.

Les utilisateurs avancés. Un utilisateur avancé peut être, par exemple, un développeur web qui passe toute sa journée à écrire du code. Ou encore un administrateur qui effectue de nombreuses saisies de données. Personnellement, je préfère pouvoir naviguer dans un formulaire web à l'aide de la touche Tab tout en le remplissant, plutôt que de cliquer sur chaque champ.

Il convient également de noter que la « mise en évidence du focus » est une exigence pour qu’un site soit considéré comme accessible au regard des Directives pour l’accessibilité des contenus Web (WCAG). Les WCAG constituent la norme d’accessibilité la plus largement reconnue, et un nombre croissant de pays ont adopté des lois exigeant que les sites Web destinés au grand public respectent cette norme.

Quels éléments d'une page Web peuvent être mis en surbrillance ?

Plusieurs éléments d'une page Web peuvent (et devraient !) être sélectionnables. Tous doivent comporter un indicateur de sélection afin de se distinguer des éléments environnants. Voici quelques-uns des nombreux éléments qui devraient être sélectionnables sur n'importe quel site Web :

• Liens
• Boutons
• Champs de formulaire / Éléments de contrôle (zones de texte, listes déroulantes, boutons radio, etc.)
• Éléments du menu
• Éléments déclenchés au survol, comme les infobulles
• Les widgets, comme un sélecteur de calendrier

Encore une fois, si vous pouvez interagir avec un élément à l'aide de la souris, vous devriez également pouvoir utiliser le clavier pour interagir avec celui-ci.

À quoi ressemblent les indicateurs de focus ?

L'affichage d'un contour autour d'un élément aide toutes les personnes qui a) utilisent un clavier pour naviguer et b) peuvent également voir l'écran.

Vous voulez voir comment ça marche ? Actualisez cette page, puis appuyez plusieurs fois sur la touche Tab. Vous devriez voir apparaître des contours jaunes autour de certains éléments de l'en-tête, comme le logo et les icônes des réseaux sociaux.

Chaque fois que vous appuyez sur la touche Tab, le curseur se déplace vers l'élément suivant dans l'ordre de focus (qui correspond généralement à l'ordre d'apparition des éléments dans le code). Vous pouvez appuyer sur Entrée ou Retour pour activer le lien. Vous pouvez naviguer sur la plupart des sites web à l'aide du clavier, en utilisant les touches Tab, les flèches et Entrée/Retour.

Les navigateurs les plus courants (Firefox, Chrome, Internet Explorer et Safari) intègrent tous des indicateurs de focus par défaut pour la plupart (sinon la totalité) des éléments. Si vous ne définissez aucun indicateur de focus, vous pourrez au moins vous fier aux indicateurs natifs du navigateur.

Cependant, les indicateurs de sélection varient d'un navigateur à l'autre. Si vous souhaitez que votre site web présente une apparence et une ergonomie cohérentes sur plusieurs navigateurs, il serait judicieux de consacrer du temps à la définition de styles de sélection.

Création d'un point de focus par défaut accessible

Il existe plusieurs éléments clés pour concevoir des indicateurs de mise au point efficaces. Certains d'entre eux ont déjà été mentionnés plus haut. Pour plus de clarté, en voici la liste :

• Bon contraste
• De forme et de taille complémentaires à l'élément
• La palette de couleurs est complémentaire, mais elle se démarque également
• Il n'est pas nécessaire que ce soit identique pour tous les éléments
• Les animations aident les utilisateurs à suivre le déplacement du curseur
• Doit s'afficher correctement même sur les navigateurs plus anciens
• Cela devrait être identique sur tous les navigateurs

Conception axée sur la concentration

• Dressez la liste de tous les éléments pouvant recevoir le focus. Combien de variantes existe-t-il pour chacun d'entre eux ? S'il existe des boutons principaux et secondaires utilisant des couleurs différentes, le même indicateur de focus fonctionnera-t-il pour les deux ?
• Réfléchissez à votre palette de couleurs. Utilisez-vous une couleur pour mettre en évidence certains éléments ? Cette couleur permettrait-elle de bien attirer l'attention ? Si ce n'est pas le cas, y a-t-il une autre couleur qui conviendrait mieux ?
• Dans de nombreux cas, l'état « focus » peut correspondre à l'état « hover ». Si votre état « hover » est clairement identifiable, pensez à l'utiliser également pour indiquer que le curseur est en « focus ».
• Il est généralement recommandé de remplacer le style de mise en surbrillance natif du navigateur pour tous les éléments par un style personnalisé, afin que les indicateurs de mise en surbrillance soient cohérents d'un navigateur à l'autre.

Examinons le style CSS par défaut de l'état « focus » pour notre bibliothèque de modèles, Cauldron:

*:focus {
    outline: 2px solid #d71ef7;
}

Par défaut, notre curseur est d'un violet saturé afin qu'il ressorte bien sur un fond blanc (#ffffff) ou blanc cassé (#fdfdfe). Il est doté d'un contour de 2 px, ce qui le rend un peu plus visible qu'un simple trait de 1 px, et d'un décalage de 2 px afin qu'il ne touche pas le texte, par exemple lorsque vous placez le curseur sur un lien.

Bon exemple

Mauvais exemple

Naviguez dans votre application à l'aide de la touche Tab et observez les endroits où le curseur est particulièrement bien mis en valeur et ceux où il l'est… disons, moins bien. Les endroits où le style du curseur semble déplacé pourraient être des candidats pour un curseur personnalisé.

Focus personnalisé

Il existe deux cas dans lesquels nous utilisons la mise au point personnalisée :

1. Lorsque vous souhaitez mettre particulièrement en évidence un élément pouvant recevoir le focus (par exemple, des champs de saisie ou des boutons de terminaison).
2. Lorsque la couleur de mise en évidence par défaut ne convient pas à un arrière-plan spécifique.

Voyons quelques éléments personnalisés que nous avons développés pour Cauldron.

Données saisies sur le terrain

Il s'agit d'un champ non ciblé issu de Cauldron.

Nous souhaitions que la mise au point sur le terrain ait un aspect distinct et s'adapte à l'état du terrain. Nous avons choisi de reprendre la couleur du contour du terrain et de lui donner une légère lueur pour indiquer la mise au point.

Lorsque le champ se trouve en état d'erreur, il s'affiche avec un trait plus épais et un contour rouge, ainsi qu'un texte indiquant la nature de l'erreur.

Lorsque le focus revient sur un champ présentant une erreur, la bordure épaisse se transforme à nouveau en une lueur, assurant ainsi une continuité visuelle avec l'état de focus sans erreur.

Nous avons cherché à faire en sorte que l'état de sélection des champs apparaisse comme un prolongement naturel du modèle, plutôt que comme un élément qui vient s'y superposer.

Boutons

Il s'agit d'un bouton principal non mis en avant issu de Cauldron :

Le focus de notre bouton dans le terminal est l'un de mes éléments préférés, non seulement parce que notre développeur front-end a fait un travail remarquable pour le mettre en œuvre, mais aussi parce qu'il est visuellement intéressant et permet de reconnaître immédiatement l'état de focus.

Nos boutons secondaires et « Erreur » utilisent le même style de mise en évidence, mais leur couleur est modifiée pour s'harmoniser avec le texte.

Nous avons veillé à ce que les boutons se distinguent clairement sur le plan visuel afin qu'ils ressortent bien, car ils servent à déclencher des actions clés dans nos applications.

Boîtes de dialogue

Lorsqu'un utilisateur de lecteur d'écran accède à un formulaire comportant du texte ou un en-tête, ces informations doivent être lues à voix haute. Le formulaire doit donc être mis en surbrillance d'une manière ou d'une autre. Cela se traduit souvent par la mise en surbrillance de l'ensemble du formulaire (parfois de manière invisible ?). Dans le cas des zones de texte, nous utilisons plusieurs types de mise en surbrillance afin de permettre aux technologies d'assistance de lire le contenu sans créer de confusion visuelle.

Pour les passages de texte destinés à être lus à voix haute en bloc, nous utilisons une barre de gauche qui apparaît dans la marge intérieure de l'objet englobant, comme ici dans notre alerte. Dès que vous quittez cet objet à l'aide de la touche Tab, le curseur se place sur le premier objet accessible par la touche Tab, qui, dans ce cas précis, est le bouton « READY ».

Pour les éléments tels que les fenêtres modales, où le formulaire comporte un en-tête bien distinct, nous utilisons une barre inférieure pour indiquer que le focus est sur cet élément. De plus, lorsque vous appuyez sur la touche Tab, le focus se déplace vers le premier élément accessible via la touche Tab, qui, dans ce cas précis, serait « Prénom ».

La configuration par défaut ne convient pas

Il arrive parfois que l'on ne souhaite pas créer une zone de mise au point personnalisée, mais que la couleur par défaut ne s'harmonise pas avec celle de l'arrière-plan. Je parie que vous devinez ce qu'il faut faire : changer la couleur de la zone de mise au point. Voici un exemple tiré de nos notifications.

Bon exemple

Mauvais exemple

Même si le bouton « X » de fermeture utilise la couleur par défaut, nous avons dû modifier cette couleur afin d'améliorer le contraste et de mieux l'harmoniser avec la palette de couleurs.

Ce qu'il faut éviter

Voici quelques éléments à éviter lorsque vous définissez votre objectif :

1. Une mise au point trop discrète. Je pense que nous avons tous déjà été confrontés à cette horrible ligne pointillée de mise au point que pratiquement personne ne voit. La mise au point doit être clairement visible.
2. Perte du focus. Il s'agit souvent d'un problème lié au z-index, que l'on observe fréquemment dans les menus à onglets. Il est important de vérifier que le focus d'un élément n'est pas masqué par un autre élément.
3. Un décalage visuel au niveau de la mise au point. C'est bien sûr à vous de décider en matière de conception, mais n'oubliez pas cette vieille règle : si quelque chose semble bizarre, c'est généralement le cas.

Comment et quand aborder les indicateurs de concentration

Quelle que soit la date à laquelle vous commencez, la première chose à faire est de dresser la liste de tous les éléments pouvant recevoir le focus que vous avez utilisés ou que vous comptez utiliser sur le site. Combien de variantes de couleur ou de style existe-t-il pour chacun d’entre eux ? Votre site utilise-t-il des widgets ou des contrôles personnalisés ? Votre site (ou votre système) utilise-t-il plusieurs palettes de couleurs ?

Lors de la conception d'indicateurs de mise au point, vous pouvez vous retrouver dans deux cas de figure :

1. Conception de nouveaux motifs
2. Amélioration d'une application existante

Le meilleur moment pour s'attaquer à la conception des indicateurs de sélection est avant la mise en œuvre des modèles d'éléments – par exemple, lorsque l'on part de zéro pour créer un nouveau site ou lorsque l'on procède à une refonte stylistique d'un site existant. Bien qu'il soit possible de modifier les indicateurs de sélection à la volée, il est souvent plus simple de les intégrer dès la conception des modèles d'éléments eux-mêmes, et ce pour plusieurs raisons :

1. Il est plus facile d'obtenir l'adhésion aux indicateurs clés lorsqu'ils s'inscrivent dans une conception cohérente.
2. Il est plus facile de mettre en place l'état « focus » en même temps que d'autres états, comme l'état « hover ».
3. Il est plus facile de concevoir l'état « focus » lorsqu'on conçoit d'autres états (comme « hover » et « active »), car on a le temps de réfléchir davantage à la manière dont cet état s'intègre au reste du design.

Mon conseil : intégrez dès le début des indicateurs de sélection et évaluez-les régulièrement. La manière la plus difficile d'intégrer des indicateurs de sélection dans une application est de le faire dans des délais très courts. Les utilisateurs de votre site vous remercieront également d'avoir intégré ces indicateurs dès le départ.