En-têtes
Conception à l'aide d'en-têtes
Les en-têtes de pages Web aident les utilisateurs à identifier différentes sections du contenu. Les en-têtes sont visuellement plus grands et plus distincts que le texte environnant et fournissent un aperçu de la structure de la page.
Les utilisateurs voyants peuvent parcourir la page en lisant les en-têtes. Les utilisateurs du lecteur d’écran peuvent utiliser les en-têtes pour naviguer rapidement dans les différentes sections. Les utilisateurs ayant des troubles cognitifs peuvent comprendre la structure et trouver le contenu plus facilement. Il est important de baliser les en-têtes de façon sémantique pour que tout le monde en profite.
Suivez les pratiques exemplaires suivantes pour les en-têtes :
- Fournir des en-têtes pour chaque page
- Utiliser les éléments
<h1>
à<h6>
pour tous les en-têtes - Ne pas utiliser d’éléments d’en-tête pour du texte qui n’est pas un en-tête. Utiliser plutôt CSS pour modifier la taille ou les styles de police de caractère
- S’assurer que les titres sont significatifs et concis, et décrivent le sujet ou le but
- S’assurer que les titres suivent une séquence hiérarchique sans sauter aucun niveau
- Fournir un en-tête h1 qui décrit le contenu de la page
Bon exemple : Hiérarchie des en-têtes
Exemple d’en-têtes descriptifs suivant une hiérarchie sans sauter un niveau :
HTML
Début du code
<h1>Principes de base de l’accessibilité du Web</h1>
<h2>Qu’est-ce que l’accessibilité du Web?</h2>
<h2>Types d’incapacités</h2>
<h3>Cécité</h3>
<h2>Lignes directrices sur l’accessibilité<h2>
<h3>Règles pour l’accessibilité des contenus Web </h3>
Fin du code
Ressources WCAG connexes
Ressources WCAG connexes
Critères de succès
Techniques
- ARIA12 : Utiliser role=heading pour identifier des rubriques (en anglais)
- G130 : Fournir des en-têtes de section descriptifs (en anglais)
- H42 : Utiliser h1-h6 pour identifier les en-têtes de section (en anglais)
- H69 : Fournir des éléments d'en-têtes au début de chaque section du contenu (en anglais)