Le problème
Une page de div peut sembler organisée sans exposer de régions. La personne doit alors parcourir les contenus répétés pour atteindre la navigation ou le contenu principal.
Exemple : mauvais et correct
Mauvais
<div class="entete">RGAA Consulting</div>
<div class="navigation"><a href="/contact">Contact</a></div>
<div class="contenu"><h1>Nos guides</h1></div>
<div class="bas-page">Coordonnées du cabinet</div>Correct
<header>RGAA Consulting</header>
<nav aria-label="Navigation principale">
<a href="/contact">Contact</a>
</nav>
<main id="contenu"><h1>Nos guides</h1></main>
<footer>Coordonnées du cabinet</footer>Ici, header et footer fournissent les repères globaux. Leur rôle implicite change dans certains contenus sectionnants, comme article.
RGAA concerné
Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.
- Critère 9.2 — Structurer les zones avec les éléments adaptés.
- Critère 12.6 — Atteindre ou éviter les zones répétées.
- Critère 12.7 — Accéder rapidement au contenu principal, hors exceptions.
Impact utilisateur
Au lecteur d’écran, les repères donnent accès à la navigation, au contenu principal et au pied de page. Ils réduisent les déplacements répétitifs.
Correction
- Utilisez header, nav, main et footer pour les zones correspondantes. Conservez un seul main visible.
- Nommez distinctement les régions de même type aux fonctions différentes, par exemple « Principale » et « Ressources » pour deux navigations. aria-labelledby peut reprendre un titre visible.
- Ajoutez un lien d’accès au contenu principal. main ne remplace pas automatiquement l’accès rapide prévu au critère 12.7.
Méthode de test
- Inspectez l’arbre d’accessibilité ou la liste des repères : types et noms doivent correspondre aux zones réelles.
- Naviguez entre régions : un seul contenu principal visible doit être annoncé.
- Depuis le début, atteignez le lien d’évitement avec Tab et activez-le avec Entrée : la navigation doit reprendre dans le contenu principal.
Points de vigilance
- Une section ne devient pas systématiquement une région nommée : contexte et nom accessible comptent.
- role="main" sur main est généralement redondant. Multiplier les repères réduit leur utilité.
Sources officielles
Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.