Focus

Le focus est l’état de l’élément qui reçoit activement la saisie clavier. Un seul élément sur une page peut recevoir le focus à la fois, et l’indicateur visuel de cet état — l’anneau de focus — est le principal repère pour les utilisateurs au clavier, les utilisateurs de commutateurs et les utilisateurs de lecteurs d’écran.

Pourquoi le focus est important

Une part significative des utilisateurs navigue sur le web entièrement sans souris :

• Les utilisateurs clavier seul souffrant de handicaps moteurs rendant le pointage difficile ou impossible.
• Les utilisateurs de commutateurs qui parcourent les interfaces via des dispositifs à bouton unique ou de type souffle.
• Les utilisateurs de lecteurs d’écran, qui passent par l’interface clavier même sur les écrans tactiles.
• Les utilisateurs de commande vocale (« Cliquer sur le bouton Envoyer ») dont les outils résolvent les commandes en identifiant les éléments pouvant recevoir le focus.

Pour tous ces utilisateurs, le focus est le curseur. L’endroit où se trouve le focus, vers où il va, et son apparence détermine si la page est utilisable ou non.

Les règles WCAG sur le focus

WCAG 2.x et 2.2 comportent plusieurs critères centrés sur le focus :

• 2.1.1 Clavier (A) — toutes les fonctionnalités doivent être utilisables depuis le clavier.
• 2.1.2 Pas de piège clavier (A) — les utilisateurs au clavier doivent pouvoir déplacer le focus depuis tout élément en utilisant uniquement le clavier.
• 2.4.3 Ordre de focus (A) — l’ordre de focus doit être logique et cohérent.
• 2.4.7 Focus visible (AA) — l’élément focalisé doit avoir un indicateur visible.
• 2.4.11 Focus non masqué (AA, nouveau dans WCAG 2.2) — les en-têtes fixes, les bannières de cookies et les widgets de chat flottants ne peuvent pas masquer complètement un élément focalisé.
• 2.4.13 Apparence du focus (AAA, nouveau dans 2.2) — l’indicateur de focus doit satisfaire des seuils spécifiques de surface et de contraste.

Erreurs courantes en production

• outline: none sans remplacement. Les designers suppriment l’anneau par défaut car il ne correspond pas à l’identité visuelle, et oublient de le remplacer par un équivalent mis en forme. C’est un échec de niveau AA et le plus fréquent.
• Focus uniquement sur :focus-visible, pas sur :focus. La bonne pratique moderne utilise :focus-visible pour que l’anneau n’apparaisse que lors d’une navigation au clavier, pas lors de clics souris. Acceptable — mais l’indicateur sur :focus-visible doit quand même satisfaire le contraste AA.
• Focus perdu après des actions dynamiques. Après la fermeture d’une modale, le focus doit revenir à l’élément déclencheur. Après la suppression d’une ligne, le focus doit se déplacer vers un voisin logique. Dans le cas contraire, l’utilisateur se retrouve quelque part d’arbitraire (souvent le corps du document) et doit recommencer à tabuler depuis le haut.
• Focus masqué sous une interface fixe. Un lien focalisé à 50 pixels du haut de la page se retrouve derrière un en-tête fixe de 50 pixels de hauteur. L’utilisateur tabule vers un apparent vide. Il faut définir scroll-padding-top égal à la hauteur de l’en-tête, ou détecter le chevauchement et faire défiler l’élément focalisé dans la zone visible.

L’audit manuel le plus rapide

Tabuler sur toute la page depuis la barre d’adresse jusqu’au pied de page. Si à un moment quelconque on ne voit pas où se trouve le focus, si l’on ne peut pas atteindre un contrôle interactif, ou si l’on est bloqué dans un piège de focus, la page échoue sur 2.4.7 ou 2.1.2.