L16 — Chapitre 12 - UX & Accessibilité

Critère SEO L16 : Focus visible — guide + exemple

PARTIE 1 - Fondamentaux Chapitre 12 - UX & Accessibilité Mot-clé : focus visible

Ce critère est discret… jusqu’au moment où il bloque la performance SEO.

Le critère **L16 — Focus visible** fait partie de notre checklist SEO (335 critères). Ici, tu as une méthode **pratique** pour le vérifier et le corriger — avec un exemple concret.

Ce que couvre exactement ce critère

Le critère SEO L16 « focus visible » du chapitre 12 - UX & accessibilité établit que tout élément interactif doit présenter un indicateur de focus clair et visible lors de la navigation au clavier. Cela garantit que les utilisateurs, notamment ceux en situation de handicap, peuvent suivre leur position sur la page. L’objectif est d’améliorer l’accessibilité tout en renforçant l’optimisation on-page pour une meilleure expérience utilisateur.

Pourquoi c'est important (SEO + UX)

Un focus visible optimise l’UX en permettant une navigation fluide et compréhensible, essentielle pour les utilisateurs au clavier ou avec des aides techniques. Du point de vue SEO, les moteurs valorisent les sites accessibles, ce qui impacte positivement le classement. L’absence de focus visible peut entraîner des pénalités dans l’audit SEO et une dégradation de la checklist UX.

Comment vérifier (pas à pas)

  1. Ouvrez votre page dans un navigateur.
  2. Activez la navigation au clavier via la touche Tab.
  3. Surveillez si un contour ou un style distinct apparaît sur chaque élément interactif.
  4. Utilisez des outils d’audit SEO comme Lighthouse ou axe-core pour détecter l’absence de focus visible.
  5. Consultez la checklist UX pour valider la conformité au critère L16.

Comment corriger proprement

Ajoutez ou améliorez les styles CSS pour le focus, par exemple :
```css
button:focus, a:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
```
Veillez à ne pas supprimer l’outline par défaut sans le remplacer. Testez ensuite au clavier et avec des lecteurs d’écran pour garantir une expérience accessible et conforme au chapitre 12 - UX & accessibilité.

Exemple concret (illustratif)

Sur un formulaire de contact, les champs input et les boutons doivent afficher un focus visible distinct. Par exemple, le bouton "Envoyer" adopte un contour bleu intense au focus, améliorant la visibilité lors de la navigation clavier. Cette optimisation on-page répond au critère L16 et est vérifiée via l’audit SEO et la checklist UX.

Checklist à cocher

  • [ ] Tous les éléments interactifs ont un focus visible
  • [ ] Le style de focus est suffisamment contrasté
  • [ ] Le focus n’est pas masqué par des styles CSS
  • [ ] Testé avec navigation clavier et lecteurs d’écran
  • [ ] Validé avec outils d’audit SEO (Lighthouse, axe-core)
  • [ ] Conforme au chapitre 12 - UX & accessibilité
FAQ

Questions fréquentes — L16

Quelle est l’erreur la plus fréquente sur “Focus visible” ?

Chercher à “optimiser” en ajoutant trop de mots‑clés, ce qui dégrade la lisibilité et crée des répétitions.

Quel outil est le plus rapide pour contrôler à l’échelle ?

Pour ce type de critère, un crawl (ex. Screaming Frog) + une vérification ciblée dans Lighthouse est généralement le combo le plus rapide.

Comment éviter que ça se reproduise sur 10K pages générées ?

Figer une règle d’auto‑génération (title/structure/schema/URLs) + ajouter un contrôle automatique (crawl ou test) avant import en production.

Prêt à passer de la théorie à l'action ?

Validez ce critère avec un audit, puis approfondissez la méthode dans l'Academy.

Auditer avec l'outil → Apprendre dans l'Academy →