Contours de focus
Montrez toujours où se trouve le focus
Des contours de focus bien visibles pour les boutons, liens et champs de formulaire – adaptés à votre design, sans une ligne de code dans le thème.
Les utilisateurs du clavier dépendent du contour de focus. EZZE WCAG Pro vous offre trois profils, trois méthodes et un aperçu en direct pour que le focus soit reconnaissable sur les surfaces claires comme sombres. Inclus dans tous les plans.
- Profils Standard, Alternatif et Champs de formulaire
- Outline, border ou box-shadow avec aperçu en direct
- Du CSS pur, avec :focus-visible par défaut
Pourquoi le focus compte
Sans focus visible, un site n'est pas utilisable au clavier
Les personnes qui n'utilisent pas de souris passent d'un élément à l'autre avec la touche Tab. Sans contour de focus, elles ne savent pas où elles se trouvent. Les contours de focus soutiennent trois critères WCAG.
Trois profils
Le bon contour pour chaque zone
Un seul style de focus convient rarement partout. C'est pourquoi les contours de focus distinguent Standard, Alternatif et Champs de formulaire. Chaque élément reçoit un seul profil ; Alternatif et Champs de formulaire sont prioritaires.
-
Standard
Le contour de focus pour la plupart des éléments. Après l'installation, il s'applique aux boutons ; ajoutez les liens et d'autres éléments avec des sélecteurs supplémentaires.
-
Alternatif
Pour les zones à fond différent, comme un pied de page sombre : par exemple blanc au lieu de bleu foncé, ou bicolore pour rester visible sur les surfaces claires et sombres.
-
Champs de formulaire
Un contour plus marqué pour input, select et textarea. Les boutons d'envoi et autres exceptions gardent le focus standard.
Trois méthodes
Outline, border ou box-shadow
Pour chaque profil, vous choisissez la méthode CSS, le style de ligne, une épaisseur de 1 à 10 pixels, la couleur avec transparence et l'arrondi des angles. La page de réglages masque les options qui ne correspondent pas à la méthode.
Configuration
Voyez ce que voient les visiteurs avant d'enregistrer
La page de réglages vous guide à travers les profils et range les options avancées dans des sections dépliables. Une aide explique le choix du profil, un style au contraste fiable et un test clavier complet.
:focus-visible ou :focus
Le contour apparaît quand on en a besoin
Par défaut, les contours de focus utilisent :focus-visible. Les utilisateurs du clavier voient toujours le contour, sans gêner les utilisateurs de souris au clic.
Vérifier vous-même
Comment tester votre focus
Le focus ne peut pas être évalué entièrement de façon automatique. Ces quatre étapes couvrent les problèmes les plus fréquents.
Conseil
Pour les champs de formulaire, un contour plus marqué est utile, par exemple 3 px au lieu de 2 px. D'autres obstacles comme les libellés manquants sont détectés par le test d'accessibilité.
Bon à savoir
Des questions sur les contours de focus ?
Plans, JavaScript, clic de souris, conflits de thème, sauts de mise en page et barre d'outils.
1. Les contours de focus sont-ils inclus dans le plan Free ?
Oui. Les contours de focus font partie des optimisations du site et sont inclus dans tous les plans, y compris le plan Free – avec les trois profils.
2. Les contours de focus ont-ils besoin de JavaScript ?
Non. Les contours de focus sont réalisés en CSS et fonctionnent même si JavaScript est désactivé.
3. Pourquoi ne vois-je pas le contour quand je clique avec la souris ?
Par défaut, le plugin utilise :focus-visible. Les navigateurs affichent alors le contour pendant la navigation au clavier, mais pas à chaque clic de souris. Si vous le souhaitez aussi au clic, activez « appliquer sur :focus ».
4. Mon thème écrase le contour de focus. Que faire ?
Utilisez la méthode box-shadow, plus rarement écrasée, ou activez l'option qui force le border-radius. Vérifiez aussi que les éléments concernés sont couverts par les sélecteurs du bon profil.
5. La mise en page saute lors du focus. Pourquoi ?
Le plus souvent à cause de la méthode border, car la bordure prend de la place, ou d'images liées. Passez à la méthode outline, sans effet sur la mise en page, et laissez la correction des liens d'image activée.
6. Quelle différence avec l'outil Focus de la barre d'outils ?
En tant qu'administrateur, vous définissez les contours de focus pour tous les visiteurs. L'outil « Focus » de la barre d'outils d'accessibilité est une préférence personnelle de chaque visiteur, par exemple pour un anneau de focus très contrasté. Les deux se complètent.
Commencez maintenant
Prêt pour un focus visible par tous ?
Installez EZZE WCAG Pro gratuitement, choisissez votre profil et vérifiez le contour directement dans l'aperçu en direct.
Contours de focus pour WordPress – un focus clavier visible selon les WCAG
Le contour de focus indique quel élément est sélectionné au clavier. De nombreux thèmes WordPress le masquent parce qu'il gêne au clic – et rendent ainsi le site difficilement utilisable au clavier. Les contours de focus d'EZZE WCAG Pro le rétablissent : avec des profils dédiés aux éléments standard, aux zones sombres et aux champs de formulaire, et avec :focus-visible pour qu'il n'apparaisse que lorsqu'il est utile.
Vous choisissez entre outline, border et box-shadow, définissez la couleur, l'épaisseur et l'arrondi, et voyez aussitôt le résultat dans l'aperçu en direct sur fond clair et sombre. Cela soutient les critères WCAG 2.4.7 Visibilité du focus, 1.4.11 Contraste du contenu non textuel et 2.4.11 Focus non masqué – sans JavaScript et sans modifier le thème.
Une des optimisations du site, dans tous les plans
Les contours de focus font partie des optimisations du site et sont inclus dans le plan Free. Avec les liens d'évitement et les raccourcis clavier, ils rendent un site entièrement utilisable au clavier. Ce qui manque encore, le test d'accessibilité le montre.