La structure : le squelette invisible de l'accessibilité
Vous voyez la structure de votre page quand vous naviguez ? Non. Et c'est bien normal, vous êtes voyant. Mais pour quelqu'un qui utilise un lecteur d'écran, la structure HTML c'est tout. C'est la différence entre naviguer dans une bibliothèque organisée et chercher un livre dans un tas en vrac. Une bonne structure permet de naviguer efficacement, de comprendre l'organisation du contenu et d'accéder directement aux sections pertinentes.
Hiérarchie des titres (h1-h6)
Règles fondamentales
Les titres, c'est la table des matières de votre page. Les utilisateurs de lecteurs d'écran appuient sur « H » pour sauter de titre en titre. Si votre hiérarchie est cassée, ils sont perdus :
- Un seul h1 par page : c'est le titre principal, celui qui dit de quoi parle la page (RGAA 9.1)
- Hiérarchie logique : h1 → h2 → h3, sans sauter de niveaux. Passer de h1 à h3, c'est comme avoir un livre dont les chapitres sautent du 1 au 3
- Titres pour structurer : chaque section de contenu mérite son titre
- Ne pas utiliser les titres pour le style : vous voulez du texte gros ? Utilisez CSS. Les balises h sont pour la sémantique, pas pour l'apparence
Exemple de bonne structure
Regardez comme c'est logique quand c'est bien fait :
<h1>Accessibilité numérique en France</h1>
<h2>Le cadre réglementaire</h2>
<h3>Le RGAA</h3>
<h3>L'European Accessibility Act</h3>
<h2>Comment se mettre en conformité</h2>
<h3>Audit initial</h3>
<h3>Corrections prioritaires</h3>
Vérification
Installez l'extension HeadingsMap dans votre navigateur. En un clic, elle affiche la hiérarchie de tous vos titres. Et là, surprise : vous allez probablement découvrir des sauts de niveaux et des titres manquants partout.
Landmarks HTML5
Les landmarks, ce sont les panneaux indicateurs de votre page. Ils permettent aux utilisateurs de lecteurs d'écran de sauter directement vers les grandes sections — comme un GPS pour votre site :
| Balise HTML5 | Rôle ARIA équivalent | Usage |
|---|---|---|
| <header> | role="banner" | En-tête principal du site |
| <nav> | role="navigation" | Navigation principale et secondaire |
| <main> | role="main" | Contenu principal (un seul par page) |
| <footer> | role="contentinfo" | Pied de page du site |
| <aside> | role="complementary" | Contenu complémentaire (sidebar) |
| <form> | role="form" | Formulaire (si labellisé) |
| <section> | role="region" | Section thématique (si labellisée) |
Bonnes pratiques
- Un seul <main> par page — c'est votre contenu principal, il ne peut y en avoir qu'un
- Labelliser les nav multiples : si vous avez deux navigations, il faut les distinguer avec
<nav aria-label="Navigation principale">et<nav aria-label="Navigation secondaire"> - header et footer : quand ils sont enfants directs de body, ils deviennent automatiquement des landmarks
- section : attention, elle ne devient un landmark que si elle a un
aria-labelledbyouaria-label. Sans ça, c'est juste une div déguisée
Structure de page type
Voici le modèle que je recommande systématiquement. Gardez-le sous le coude :
<body>
<a href="#main" class="skip-link">Aller au contenu</a>
<header>
<nav aria-label="Navigation principale">...</nav>
</header>
<main id="main">
<h1>Titre de la page</h1>
<article>...</article>
</main>
<aside aria-label="Articles connexes">...</aside>
<footer>
<nav aria-label="Navigation pied de page">...</nav>
</footer>
</body>
Lien d'évitement (skip link)
Le skip link, c'est le raccourci que personne ne voit mais que les utilisateurs clavier adorent. C'est le tout premier élément focusable de la page, et il permet de sauter directement au contenu principal :
- Texte : « Aller au contenu principal » ou « Accéder au contenu »
- Cible : l'id du
<main> - Il peut être visuellement masqué mais doit apparaître au focus clavier — essayez sur n'importe quel site gouvernemental, vous le verrez
- Critère RGAA 12.7
Ordre de lecture
L'ordre de lecture du DOM HTML doit correspondre à l'ordre visuel. Ça paraît évident, mais les CSS modernes rendent les choses piégeuses. Évitez :
tabindexpositif qui modifie l'ordre de navigation — je ne le dirai jamais assez : n'utilisez jamais tabindex > 0- Les réorganisations CSS (flexbox order, grid) qui créent un décalage entre ce que vous voyez et l'ordre réel du DOM
- Le contenu positionné en absolute qui apparaît visuellement avant son emplacement dans le code source
Une bonne structure HTML est la fondation de tout. Sans elle, même les attributs ARIA les plus sophistiqués ne peuvent pas rattraper le coup. Commencez toujours par là.