S’assurer de concevoir un indicateur de focus pour les éléments interactifs
Publié le 28 février 2024
À retenir
- Chaque élément interactif doit avoir un état en focus
- Privilégiez un indicateur de focus bicolore qui convient aussi bien aux fonds clairs qu’aux fonds foncés
Cet article fait partie d’une série sur les micro-interactions avec les interfaces utilisateur et la manière dont elles affectent l’expérience utilisateur.
This article is also available in English.
Un indicateur de focus est un contour visible autour de l’élément avec lequel les utilisateurs sont en train d’interagir. Il permet aux utilisateurs de savoir où se trouve leur curseur durant leur interaction.
Les champs d’entrée de texte sont probablement l’exemple le plus connu pour illustrer un indicateur de focus. Lorsque les utilisateurs interagissent avec ce type d’élément, ces derniers présentent habituellement un changement visuel autour de l’élément pour indiquer qu’ils sont en focus.
Chaque élément interactif requiert cet état.
État en focus
Chaque élément interactif a besoin d’un état en focus. Le plus souvent, chaque élément utilisera un style commun à tous les éléments pour indiquer l’état en question, mais il peut arriver que ce style diffère d’un élément à un autre.
Privilégiez un indicateur de focus bicolore
Notez que l’indicateur de focus doit être suffisamment contrasté par rapport à son environnement. Il est donc peu probable qu’une seule couleur fonctionne dans tous les contextes.
Les exemples ci-dessus emploient le même contour violet comme indicateur de focus que dans l’image située sous le titre de cette section. Toutefois, comme on peut le voir, sur un fond noir, ce contour violet n’est pas suffisamment contrasté pour être visible.
La solution à ce problème de modèle de conception consiste à utiliser un indicateur de focus bicolore, que l’on peut voir dans la colonne de droite de l’image ci-dessus. Bien que le contour violet disparaisse sur le fond noir, le contour blanc reste bien visible et offre un contraste suffisant par rapport à l’état précédent.
Quand l’indicateur de focus doit-il être visible ?
La principale raison d’être de cet indicateur est d’attirer l’attention sur un élément interactif. Les utilisateurs voyants qui naviguent à l’écran à l’aide d’une souris et d’un curseur ne dépendent pas autant de cet élément, mais ceux qui naviguent à l’aide d’un clavier ont absolument besoin de savoir quel est élément est en focus à tout moment.
L’indicateur de focus n’est pas nécessaire pour les utilisateurs voyants lorsqu’ils cliquent. Cependant, tout champ texte doit afficher l’indicateur de focus lorsque les utilisateurs interagissent avec ce champ, car le curseur disparaît habituellement alors qu’ils y insèrent du texte.
Si les utilisateurs utilisent Tab ou Shift + Tab pour naviguer dans le site, chaque élément interactif devrait afficher son état en focus lorsqu’il est actif.
La librairie JavaScript focus-visible fournit une bonne explication (en anglais) sur la manière de distinguer les contextes dans lesquels il convient d’afficher ou non l’indicateur de focus, selon la façon dont les utilisateurs naviguent.
À faire et à éviter
À faire
- Veiller à ce que tous les éléments interactifs soient dotés d’un indicateur de focus
- Détecter si les utilisateurs naviguent à l’aide du clavier afin d’afficher les indicateurs de focus les plus appropriés
À éviter
- Se fier aux styles d’indicateurs de focus par défaut des navigateurs ou des librairies de code ; dans ces deux cas, le contraste est souvent insuffisant
- Un indicateur de focus trop discret ; l’indicateur doit être visuellement clair
- Masquer ou rogner l’indicateur de focus
⚠️ Il n’est pas nécessaire d’afficher l’indicateur de focus sur un élément non interactif si les utilisateurs naviguent avec le clavier.
Références et lectures additionnelles
Articles
En français
Bien concevoir ses composants, les bases d’un design system évolutif | Stéphanie Walter
Documenter l’accessibilité en phase de design ! | Stéphanie Walter
S’assurer de créer les états de chaque composant interactif | Mat Janson Blanchet
Un élément en focus doit être visible à l’écran | Mat Janson Blanchet
En anglais
Accessible Focus Indicators: Something to :focus on | Deque
A guide to designing accessible, WCAG-compliant focus indicators | Sara Soueidan
Indicating focus to improve accessibility | Mozilla
Visual Focus | IT Accessibility – NC State University
Accessibilité
Understanding SC 1.4.13: Content on Hover or Focus (Level AA) | W3C
Understanding SC 2.4.3: Focus Order (Level A) | W3C
Understanding SC 2.4.7: Focus Visible (Level AA) | W3C
Understanding SC 3.2.1: On Focus (Level A) | W3C
Références techniques
Keyboard Accessibility | WebAIM
Hover and Focus Effects – Links and Hypertext | WebAIM
focus-visible | Web Incubator CG – GitHub
Heuristics Explainer – focus-visible | Web Incubator CG – GitHub
Mis à jour le 4 mars 2024