Critère SEO L17 : Skip links — guide + exemple

Les skip links améliorent sensiblement l'expérience utilisateur, notamment pour les personnes utilisant des lecteurs d'écran ou naviguant au clavier. En SEO, leur présence favorise un meilleur crawl des moteurs et réduit le taux de rebond lié à une navigation laborieuse. Ils optimisent la structure de la page en facilitant un accès direct au contenu, un critère apprécié dans le Chapitre 12 - UX & Accessibilité. Leur mise en place répond également aux normes d'accessibilité WCAG, renforçant ainsi la qualité globale du site.

1. Inspectez le code source pour repérer un lien avec un href ciblant une ancre du contenu principal (ex: <a href="#maincontent">). 2) Testez la navigation clavier dès le chargement — le premier élément focusable doit être un skip link. 3) Utilisez des outils d'audit SEO comme Lighthouse ou Wave pour détecter l'absence ou la mauvaise implémentation des skip links, comme mentionné dans la checklist UX. 4) Vérifiez la visibilité du lien au focus pour assurer son utilité.

Intégrez un skip link visible et accessible en début de code HTML, avec un href pointant vers l'ID de la section principale du contenu. Exemple de code : <a href="#maincontent" class="skip-link">Passer à la navigation principale</a>. Ajoutez des styles CSS pour que le lien apparaisse uniquement au focus, garantissant ainsi une navigation fluide sans encombrer l’interface visuelle. Veillez à ce que l’ancre ciblée existe et soit correctement positionnée pour un accès direct au contenu.

Voici un extrait HTML intégrant un skip link conforme :

```html
<a href="#maincontent" class="skip-link">Passer au contenu principal</a>
<nav>...menu de navigation...</nav>
<main id="maincontent">...contenu principal...</main>
```

En CSS :

```css
.skip-link {
position: absolute;
left: -999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: static;
width: auto;
height: auto;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
```
Cette méthode assure une optimisation on-page conforme au critère L17 et améliore notablement l'accessibilité.

• [ ] Un skip link est présent en début de page.
• [ ] Le skip link cible une ancre valide correspondant au contenu principal.
• [ ] Le skip link est visible au focus clavier.
• [ ] L’implémentation respecte les normes du Chapitre 12 - UX & Accessibilité.
• [ ] Les outils d’audit SEO confirment la bonne configuration (Lighthouse, Wave).
• [ ] Le skip link améliore la navigation pour les utilisateurs de lecteurs d’écran et clavier.