L15 — Chapitre 12 - UX & Accessibilité

Critère SEO L15 : Navigation clavier — guide + exemple

PARTIE 1 - Fondamentaux Chapitre 12 - UX & Accessibilité Mot-clé : navigation clavier

On le voit souvent en erreur sur des sites générés en masse.

Le critère **L15 — Navigation clavier** 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 L15 se concentre sur la navigation clavier, un élément essentiel du chapitre 12 - UX & accessibilité. Il s'agit de garantir que tous les éléments interactifs d'une page web sont accessibles via le clavier, notamment en utilisant les touches tab, enter et escape. Cette exigence est cruciale pour les utilisateurs qui ne peuvent pas utiliser une souris et pour les outils d'audit SEO qui évaluent l'optimisation on-page sous l'angle de l'accessibilité.

Pourquoi c'est important (SEO + UX)

La navigation clavier améliore l'expérience utilisateur (UX) en rendant le site utilisable par tous, y compris les personnes en situation de handicap. Du point de vue SEO, Google valorise l'accessibilité, ce qui peut impacter positivement le classement. En facilitant la navigation par clavier, on réduit le taux de rebond et on augmente le temps passé sur le site, deux signaux importants pour le référencement.

Comment vérifier (pas à pas)

  1. Ouvrez la page web dans un navigateur.
  2. Utilisez la touche Tab pour naviguer entre les éléments interactifs (liens, boutons, formulaires).
  3. Vérifiez que le focus est visible et suit un ordre logique.
  4. Testez les actions avec Enter (activation) et Escape (fermeture de modales).
  5. Utilisez des outils comme Lighthouse (audit SEO) pour détecter les problèmes de navigation clavier.
  6. Référez-vous à la checklist UX pour valider chaque point.

Comment corriger proprement

Pour corriger les problèmes de navigation clavier, assurez-vous que :

  • Tous les éléments interactifs ont un attribut tabindex approprié.
  • Le focus est bien géré via CSS (:focus) pour être visible.
  • Les scripts JavaScript respectent les événements clavier (keydown, keyup).
  • Les modales ou menus utilisent Escape pour la fermeture.
  • La navigation suit un ordre logique correspondant à la structure visuelle.

Utilisez des frameworks accessibles ou des bibliothèques ARIA pour faciliter l'implémentation.

Exemple concret (illustratif)

Voici un snippet HTML/CSS pour un bouton accessible clavier :

```html
<button tabindex="0" onkeydown="if(event.key==='Enter') alert('Activé!')">Cliquez-moi</button>
```

Le bouton reçoit le focus via Tab, l'utilisateur peut activer l'action avec Enter. Le focus est visible grâce à une règle CSS :

```css
button:focus { outline: 3px solid #005fcc; }
```
Ce simple exemple illustre la navigation clavier fonctionnelle et visible, conforme au critère L15.

Checklist à cocher

  • [ ] Tous les éléments interactifs accessibles via Tab
  • [ ] Focus visible et distinct
  • [ ] Activation possible avec Enter
  • [ ] Fermeture modale possible avec Escape
  • [ ] Ordre de navigation logique et cohérent
  • [ ] Tests passés avec outils d'audit SEO (Lighthouse)
  • [ ] Conforme au chapitre 12 - UX & accessibilité
FAQ

Questions fréquentes — L15

Quelle est l’erreur la plus fréquente sur “Navigation clavier” ?

Corriger une page isolée sans corriger le template/import : l’erreur revient à la prochaine génération.

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 Hotjar/Clarity (si dispo) 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 →