Article original : How to add Focus Rings for keyboard interactions only

Par Ben Robertson

Une chose qui finit invariablement par faire son chemin dans notre processus de QA sur n'importe quel projet est l'apparition inattendue d'anneaux de focus.

Image Un anneau de focus sauvage est apparu !

Nous avons eu beaucoup de discussions sur la façon de les gérer. Le chef de projet et le designer suggèrent souvent de les supprimer. Bien que ce soit la solution facile, ce serait un anti-pattern de conception web. Les anneaux de focus par défaut sont fournis par tous les navigateurs afin que les utilisateurs de clavier puissent déterminer quel élément est actuellement en focus. En fait, les anneaux de focus sont nécessaires pour répondre aux normes d'accessibilité :

Toute interface utilisateur exploitable par clavier possède un mode de fonctionnement où l'indicateur de focus du clavier est visible.

Même lorsque nous décidons de ne pas supprimer les anneaux de focus, les designers sont généralement mécontents des styles par défaut. Une question qui est récemment apparue est la suivante : si les styles d'anneaux de focus sont conçus pour que les utilisateurs de clavier puissent suivre le focus sur la page, pourquoi doivent-ils apparaître lorsque je clique sur un élément ? Peut-on ajouter des anneaux de focus uniquement pour les utilisateurs de clavier ?

La réponse est oui ! Nous pouvons utiliser le polyfill :focus-visible pour ajouter des anneaux de focus uniquement lorsque l'utilisateur navigue avec un clavier.

Comment utiliser le polyfill :focus-visible

Voici comment vous pouvez implémenter :focus-visible dans vos projets dès maintenant.

Si vous utilisez des modules ES6, installez le polyfill via npm : npm install --save focus-visible

Importez le module dans votre fichier JavaScript principal :

import 'focus-visible';

Lorsque votre page se charge, votre <body> recevra une classe .js-focus-visible afin que vous puissiez masquer conditionnellement les anneaux de focus par défaut uniquement si le polyfill est chargé. De plus, lorsque vous naviguez via le clavier, les éléments en focus recevront une classe .focus-visible.

Maintenant, nous pouvons ajouter notre CSS :

// remplacer la feuille de style UA, uniquement lorsque le polyfill est chargé
.js-focus-visible :focus:not(.focus-visible) {
    outline-width: 0;
}

// établir l'apparence souhaitée de l'anneau de focus pour les modalités d'entrée appropriées
.focus-visible {
  outline: 2px solid $bright-brand-color;
}

Autres ressources

Voulez-vous approfondir la création de sites web accessibles ? Rejoignez mon cours par email gratuit : 💡 Erreurs courantes d'accessibilité et comment les éviter. 30 jours, 10 leçons, 100% amusant ! 💡 Inscrivez-vous ici !

_Cet article est initialement paru sur benrobertson.io.