Gestion du focus
Apprenez l'importance de la gestion du focus pour l'accessibilité en React et comment la contrôler programmatiquement avec les refs et les bonnes pratiques.
Le focus : Indicateur crucial pour l'interaction
Le focus désigne l'élément de l'interface utilisateur qui reçoit actuellement les entrées du clavier et qui est souvent mis en évidence visuellement (par exemple, avec un contour ou un changement de style). Pour les utilisateurs qui naviguent principalement au clavier (personnes ayant des handicaps moteurs, utilisateurs avancés) ou qui utilisent des lecteurs d'écran (qui annoncent l'élément ayant le focus), une gestion correcte et prévisible du focus est absolument essentielle à l'utilisabilité et à l'accessibilité d'une application web.
Une mauvaise gestion du focus peut rendre une application frustrante, voire impossible à utiliser pour certains. Les problèmes courants incluent :
- Un ordre de tabulation (le parcours des éléments interactifs avec la touche Tab) illogique ou incohérent.
- Une perte de focus (le focus disparaît ou retourne au début du document) après une action ou un changement dans l'interface.
- Une absence d'indication visuelle claire de l'élément qui a le focus.
- L'impossibilité d'atteindre certains éléments interactifs au clavier.
- Des "pièges à focus" où l'utilisateur ne peut plus sortir d'un certain composant (comme une modale) avec le clavier.
En React, bien que le navigateur gère l'ordre de focus de base pour les éléments HTML natifs, la nature dynamique des interfaces que nous construisons nécessite souvent une gestion plus active et programmatique du focus pour garantir une expérience accessible.
L'ordre de tabulation naturel et `tabIndex`
Par défaut, les éléments HTML nativement interactifs (, , , ,