rb.

Focus ou Focus-visible : Quel choix pour une meilleure expérience utilisateur ?

optimiser-css-focus-focus-visibleAujourd'hui, on va parler de quelque chose d'excitant (oui, vraiment) : les pseudo-classes CSS :focus et :focus-visible. Ces petites merveilles peuvent transformer votre site web et améliorer l'expérience utilisateur de manière significative. Accrochez-vous, car ça va être aussi génial qu'une journée sans réunions !

L'importance de l'expérience utilisateur

Avant de plonger dans les profondeurs du CSS, rappelons-nous que l'expérience utilisateur (UX) est ce qui fait ou défait un site web. Si vos utilisateurs ne peuvent pas naviguer facilement, ils partiront aussi vite qu'un croissant lors d'un petit-déjeuner d'équipe. Les états de sélection, comme le focus, sont essentiels pour guider les utilisateurs à travers votre site, en leur donnant des indices visuels sur ce qui est cliquable, tapable, ou simplement là pour être admiré.

Attention à ne pas confondre active et focus

La pseudo-classe :active s'applique à un élément pendant que celui-ci est activé, comme lorsque vous maintenez un bouton de souris enfoncé. En revanche, :focus s'applique lorsqu'un élément est sélectionné pour interaction, par exemple quand il reçoit l'attention du clavier. Deux états différents, deux utilités différentes. Voilà, vous êtes prévenus !

active_vs_focus_c8536dc727.gif

La décision de montrer le focus : chaque interaction ou seulement à la navigation clavier ?

Ah, le dilemme classique : doit-on afficher le focus à chaque interaction (clavier, souris, tactile) ou seulement lors de la navigation au clavier ? Afficher le focus partout peut donner l'impression d'une fête de Noël avec des lumières clignotantes, ce qui est génial pour les fêtes mais pas pour un site web. C'est là que :focus-visible entre en scène, comme un super-héros CSS, pour sauver l'interface de l'encombrement visuel.

Comprendre :focus-visible

La pseudo-classe :focus-visible est une extension de :focus conçue pour améliorer l'expérience utilisateur en matière d'accessibilité. Elle s'applique aux éléments en focus uniquement lorsqu'ils bénéficient réellement d'une indication visuelle, comme lors de la navigation au clavier. Par exemple, un bouton ou un lien aura un style spécifique en focus-visible lorsqu'il est sélectionné avec la touche Tab, mais ce style ne s'appliquera pas si l'élément est cliqué avec une souris. Cela permet de fournir des indices visuels uniquement lorsque cela est pertinent, évitant ainsi une surcharge visuelle pour les utilisateurs de souris ou de dispositifs tactiles.

Comparaison entre :focus et :focus-visible

Pour :focus

Avantages :

Inconvénients :

Pour :focus-visible

Avantages :

Inconvénients :

Cas d'utilisation

:focus : Imaginez un formulaire de contact avec des champs de saisie, où chaque champ se met en surbrillance dès qu'on clique dessus, que ce soit avec une souris, un clavier ou en tapant dessus avec un doigt. Voilà un bon usage de :focus.

css

input:focus,
textarea:focus,
select:focus {
 outline: 2px solid #007BFF;
}

:focus-visible : Maintenant, imaginez un site avec des boutons et des liens partout. Utiliser :focus-visible ici permet d'éviter que chaque élément brille comme une enseigne de Las Vegas à chaque clic de souris. Seulement les utilisateurs de clavier verront les contours, gardant l'interface propre pour les autres.

css

button:focus-visible,
a:focus-visible {
 outline: 3px dashed #28A745;
}

Compatibilité entre les navigateurs

Bien que les pseudo-classes :focus et :focus-visible soient largement supportées par la plupart des navigateurs modernes, il y a une exception notable : Safari (oui encore et toujours lui). Pour que :focus-visible fonctionne correctement sur Safari, vous aurez besoin d'un petit coup de pouce supplémentaire, un workaround que nous aborderons en détail dans un prochain article. Restez à l'affût !

Recommandation : Utiliser le focus approprié selon le type d'élément

Je recommande de choisir entre :focus et :focus-visible en fonction du type d'élément cliquable. Cela permet de garantir une expérience utilisateur optimale sans surcharger l'interface. Voici comment :

Utilisation de :focus

Certains éléments bénéficient d'un retour visuel constant, indépendamment de la méthode de navigation :

css

/* Pour les éléments de formulaire */
input:focus,
textarea:focus,
select:focus,
.combobox:focus,
.listbox-option:focus,
.grid-cell:focus {
 outline: 2px solid #007BFF;
}

Utilisation de :focus-visible

D'autres éléments nécessitent un focus spécifique uniquement pour les utilisateurs de clavier :

css

/* Pour les éléments interactifs */
button:focus-visible,
a:focus-visible,
input[type="radio"]:focus,
input[type="range"]:focus,
input[type="checkbox"]:focus,
.accordion-button:focus-visible, 
.breadcrumb a:focus-visible,
.disclosure-button:focus-visible,
.toolbar-button:focus-visible,
.tooltip-trigger:focus-visible {
 outline: 3px dashed #28A745;
}

Petit rappel important : le focus se désactive automatiquement lorsque vous cliquez sur un autre élément. Cela signifie que l'élément précédemment en focus perd son état de focus et son style associé. Assurez-vous donc que votre interface reste claire et intuitive même lorsque les utilisateurs naviguent et cliquent sur différents éléments.

Les erreurs fréquentes et leurs solutions

Erreur 1 : Trop de focus, tue le focus

Problème : Vous avez mis un style de focus sur chaque élément et maintenant, votre site ressemble à une boule à facettes disco. Trop de focus peut rendre l'interface confuse et encombrée.

Solution : Utilisez :focus-visible pour les éléments qui bénéficient vraiment d'une indication de focus uniquement pour les utilisateurs de clavier.

css

button:focus-visible,
a:focus-visible {
 outline: 3px dashed #28A745;
}

Erreur 2 : Pas de focus, pas de visibilité

Problème : Vous avez décidé de supprimer tous les styles de focus parce que c'était trop moche. Maintenant, vos utilisateurs ne savent plus où ils se trouvent dans la navigation.

Solution : Gardez les styles de focus, mais utilisez-les avec parcimonie. Conservez-les pour les champs de formulaire et autres éléments interactifs essentiels.

css

input:focus,
textarea:focus,
select:focus {
 outline: 2px solid #007BFF;
}

Erreur 3 : Focus partout, mais invisible

Problème : Vous avez appliqué des styles de focus, mais ils sont si subtils que personne ne les remarque. C'est comme mettre une casquette de camouflage dans une forêt.

Solution : Assurez-vous que vos styles de focus sont visibles. Utilisez des couleurs et des bordures suffisamment contrastées pour être remarquées par vos utilisateurs.

css

button:focus, a:focus {
 outline: 2px solid #FF5733; /* Une couleur vive et visible */
}

Conclusion

Les pseudo-classes :focus et :focus-visible sont des outils puissants pour améliorer l'accessibilité et l'expérience utilisateur de vos sites web. En comprenant et en appliquant ces pseudo-classes de manière appropriée selon le type d'élément interactif, vous pouvez créer des interfaces utilisateur plus intuitives et accessibles. Tester vos styles de focus dans différents scénarios est crucial pour vous assurer qu'ils fonctionnent bien pour tous les utilisateurs.

L'UX est une composante essentielle du succès de toute application web, et une bonne gestion des états de sélection comme le focus peut faire une grande différence dans la satisfaction et la rétention des utilisateurs. Essayez ces techniques dans vos prochains projets !