Focus
Le focus sert à situer l'utilisateur lors de la navigation au clavier.
Apparence du focus
Sur le Web, il est possible de modifier le focus avec des propriétés CSS avec l'état:focus. Nous recommandons de personnaliser le focus et de conserver le focus par défaut du navigateur. Cela permet à l'utilisateur de gérer ses propres préférences.
Mise à jour | 28/04/2022
Sur le Web mobile et les applications, le focus s’applique pour les lecteurs comme VoiceOver sur iOS et Talkback sur Android. Ce n'est pas visuel, mais ça déplace l’utilisateur pour que la lecture reprenne au bon endroit.
Pour les utilisateurs des applications utilisant un clavier, le focus doit être définit au design.
Documentation à gérer sur Confluence
Gestion du focus
Comment gérer le changement de focus lors d’une action utilisateur, que ce soit par la simple navigation d’une page à l’autre, ou par les boutons précédent et suivant du navigateur ?
Moins il y a de comportements différents, moins on a de chance de perdre la personne qui navigue sur notre site. Les cas de navigation ont donc été regroupés, pour ainsi diminuer le nombre de comportements. Voici les 3 comportements distincts :
L’aspect visuel dicte le comportement du focus.
Si l’utilisateur actionne ce qu’il croit être un lien, comportement de changement de page.
Si l’utilisateur fait une action de retour, comportement de retour à l’action précédente.
Si l’utilisateur actionne ce qu’il croit être un bouton,
comportement d’ajout de contenu.
ou comportement d’ouverture
1. Changement de page et ouverture de modale
Recommandation
Focusser l’utilisateur au début du contenu demandé, soit sur la section mise à jour, soit sur le titre de la page. À défaut, on focus sur la section principale comme l’ancre du lien d'évitement « Aller au contenu principal ».
Note : Prévoir le même comportement pour le bouton “Retour vers le haut de page”
2. Retour à l’action précédente
Recommandation
Focuser sur le lien actionné précédemment pour que le scroll visuel concorde avec le focus :
Utilisation du bouton Précédent du navigateur : retour sur le lien actionné précédemment.
Fermeture d’une modale : retour sur le bouton actionné pour l’ouvrir.
Fermeture d’un panneau : retour sur le bouton actionné pour l’ouvrir.
Fermeture d’un onglet (s’il y a lieu) : retour sur le bouton actionné pour l’ouvrir.
Fermer le contrôleur audio : retour sur le bouton actionné pour l’ouvrir.
À défaut, si nous n’avons pas l’information de l’action précédente, on laisse le comportement natif (on perd le focus, le scroll ce déplace à l’endroit ou l’utilisateur était.)
3.A Affichage du contenu suivant
Recommandation
Focus sur le premier nouveau contenu et mentionner combien d'éléments sont affichés sur combien (ex: x de x éléments).
Voir plus
Pagination
Carrousel - Rail
Prévoir certains comportements spécifique à la navigation clavier, comme les flèches précédent/suivant pour naviguer dans la pagination ou dans les “pages” du carrousel.
3.B Ouverture ou fermeture de contenu et faire jouer ou mettre sur pause un média
Recommandation
Garder le focus sur le bouton actionné et mentionner son ouverture/fermeture.
Accordéon
Panneau (un item)
Onglets (plusieurs items)
Faire jouer ou mettre sur pause un média (vidéo, audio ou autre)
Liste déroulante (dropdown)
Prévoir certains comportements spécifiques à la navigation clavier, comme les flèches précédent/suivant pour naviguer dans les onglets ou dans le contrôler audio.
Références
Annexe
Changement de page et ouverture de modale
Affichage du contenu suivant
Ouverture ou fermeture de contenu