proposition: Identifier plus clairement l'élément qui détient le focus

[jipigi]

Description du besoin
L'identification visuelle de l'élément qui détient le focus dans la page est utile pour une personne qui n'utilise que le clavier pour naviguer dans l'application. Cet indicateur est le seul moyen pour lui de suivre sa navigation et d'identifier à quel endroit il est rendu dans la page. Si l'identification est vraiment trop discrête, cela pourrait aller jusqu'à empêcher l'utilisation de l'application. Par exemple, un changement de couleur très faible :

Inversement, pour un utilisateur de souris, cette identification n'est pas nécessaire, elle peut même devenir embêtante. Par exemple, après avoir cliqué sur un bouton avec la souris, un état focus trop marqué donne une impression de persistance sur l'action associée, alors que l'utilisateur a terminé sa tâche dans cette partie de l'interface.

Ça peut poser un problème aussi lorsqu'on utilise des boutons radio pour proposer un choix dans une fenêtre de création d'élément. Un focus trop marqué va mettre l'emphase sur l'élément alors qu'il est en tout point équivalent aux autres choix de la liste :

Il y a donc deux besoins qui s'opposent, celui des utilisateurs qui ne peuvent naviguer qu'avec l'aide du clavier, et celui des utilisateurs de souris.

Description sommaire de la solution proposée
Pour répondre à ce problème, le W3C propose la pseudo classe :focus-visible qui permet d'afficher un visuel marqué pour le focus uniquement lorsqu'il a été donné à l'aide du clavier. Avec cette pseudo classe, on pourrait conserver les visuels de focus actuels, discrets pour les utilisateurs de souris, et avoir un visuel plus clair pour les utilisateurs du clavier. À noter que le visuel marqué est quand même attribué lorsque le focus est donné avec la souris à un élément de saisie (tout contrôle qui fait sortir un clavier virtuel sur un appareil mobile).

Enjeux

• Déterminer le visuel marqué pour chaque contrôle (outline ou ombrage? Contraste, couleur, etc.).
• Faire le tour des contrôles pour trouver ceux qui ont un visuel trop fort actuellement, et le remplacer par le :focus-visible (voir l'exemple dans bogue: [m-radio et m-checkbox] Retirer la couleur bleue du libellé d'un radio ou checkbox focus #81).
• Déterminer si le polyfill est acceptable car la pseudo classe n'est pas encore supportée par tous les navigaeurs.

Références
https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
https://nelo.is/writing/styling-better-focus-states/

Liens vers les récits Jira