Focus
Le focus désigne l'état d'un élément de page web quand il reçoit l'attention du clavier. Un indicateur visuel, souvent un contour, signale quel élément est actif. Sans cet indicateur, naviguer au clavier devient impossible.
Appuyez sur Tab sur n'importe quelle page web. Un contour apparaît autour du lien ou du bouton sélectionné. C'est le focus : le signal visuel qui indique quel élément est prêt à recevoir votre action.
Supprimez ce contour, et la navigation au clavier devient aveugle.
#Qui reçoit le focus ?
En HTML, certains éléments sont focusables par défaut : <a>, <button>, <input>, <select> et <textarea>. Le navigateur les parcourt dans l'ordre du DOM quand vous appuyez sur Tab.
Un <div> cliquable, lui, ne reçoit pas le focus. Pour le rendre focusable, trois ajouts sont nécessaires : tabindex="0" pour l'inclure dans l'ordre de tabulation, un role ARIA pour indiquer sa fonction, et la gestion clavier des touches Entrée et Espace. Oubliez un seul de ces éléments, et votre composant est inutilisable au clavier.
#Pourquoi outline: none est une erreur
WebAIM qualifie cette pratique de « fléau ». Les designers trouvent le contour du navigateur inélégant. Les développeurs ajoutent *:focus { outline: none; } dans leur reset CSS. L'indicateur de focus disparaît de toute la page.
Le W3C classe cette pratique comme un échec du critère 2.4.7.
La bonne approche : :focus-visible. Ce pseudo-sélecteur CSS, supporté par tous les navigateurs depuis mars 2022, affiche l'indicateur uniquement quand le navigateur détecte une navigation au clavier.
button:focus {
outline: none;
}
button:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
}Les designers sont satisfaits. Les utilisateurs au clavier voient où ils sont.
#Ce que les normes demandent
Le critère 2.4.7 des WCAG (niveau AA) exige un indicateur de focus visible pour tout composant opérable au clavier. Le critère 10.7 du RGAA reprend cette exigence.
Les WCAG 2.2 vont plus loin avec le critère 2.4.11 (niveau AA) : l'élément focusé ne doit pas être masqué par un autre élément. Modales, bandeaux de cookies, headers sticky : vérifiez qu'ils ne recouvrent pas l'élément actif.
#En résumé
Ne supprimez jamais l'outline sans le remplacer. Utilisez :focus-visible pour les indicateurs au clavier. Et testez : appuyez sur Tab et naviguez votre page. Si vous perdez le fil, vos utilisateurs aussi.