Un élément en focus doit être visible à l’écran
Publié le 4 mars 2024
À retenir
- La plupart des navigateurs vont automatiquement s’assurer de rendre visible un élément en focus
- Il est de la responsabilité des développeurs de s’assurer qu’un élément en focus soit visible, que le navigateur le fasse par défaut ou non
- Il n’est pas acceptable qu’un élément en focus ne soit pas visible à l’écran
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.
Tout élément d’une interface utilisateur qu’il est possible d’activer avec un clavier doit posséder un mode de fonctionnement dans lequel l’indicateur de focus est visible.
— Traduit de « Understanding SC 2.4.7: Focus Visible (Level AA) », W3C
L’indicateur de focus est un élément qui permet aux utilisateurs de savoir où se trouve leur curseur et avec quel élément ils sont actuellement en train d’interagir. Cet article est un complément à un autre article que j’ai publié dans lequel j’y expliquais comment styliser cet élément.
Il n’est pas acceptable qu’un élément en focus ne soit pas visible à l’écran
S’il semble évident qu’un indicateur de focus doit être visible, mon expérience démontre que la conception de son style et l’implémentation de sa fonctionnalité ne sont pas toujours menées correctement. Par exemple, lorsque les développeurs privilégient le modèle de design d’application à page unique (application monopage, ou SPA), un changement d’écran peut laisser par erreur le focus sur un élément qui n’est plus visible à l’écran.
La plupart des navigateurs font automatiquement faire glisser la fenêtre de visualisation du navigateur (viewport, ou vue) lorsqu’un élément est placé en focus, que cet état soit par la navigation des utilisateurs avec leur clavier ou par l’exécution de code.
Toutefois, il appartient aux développeurs de s’assurer qu’un élément en focus soit complètement visible, peu importe que le navigateur glisse ou non la fenêtre de visualisation par défaut.
Après tout, l’intérêt de concevoir indicateur de focus est de s’assurer qu’il soit visible, afin de réellement améliorer l’expérience des utilisateurs, non pas simplement de cocher une case dans une liste de conformité.
Références et lectures additionnelles
Articles
En français
S’assurer de créer les états de chaque composant interactif | Mat Janson Blanchet
S’assurer de concevoir un indicateur de focus pour les éléments interactifs | Mat Janson Blanchet
En anglais
Appropriately Set the Focus on Each Page Load of a Web Application (video) | Egghead
Managing focus (video) | A11ycasts – YouTube
Accessibilité
Understanding SC 2.4.7: Focus Visible (Level AA) | W3C