En-têtes et étiquettes

Ce que ce critère exige

Lorsqu’une section comporte un en-tête ou qu’un contrôle de formulaire possède une étiquette, le texte doit réellement décrire ce qui suit. Les utilisateurs de lecteurs d’écran se servent des en-têtes et des étiquettes comme table des matières de la page — les utilisateurs de JAWS appuient sur H pour naviguer d’en-tête en en-tête, et le mode formulaire lit les étiquettes à voix haute lorsque chaque champ reçoit le focus. Un texte vague brise entièrement ce modèle de navigation.

Ce critère n’exige pas que des en-têtes existent partout, mais seulement que ceux qui existent soient descriptifs. (Pour les cas où des en-têtes sont requis, voir le critère 2.4.10 au niveau AAA.)

Comment satisfaire ce critère

• Rédiger des en-têtes qui nomment la section, et non l’intention de conception : « Adresse de livraison » et non « Section 2 », « Questions fréquemment posées » et non « Plus d'infos ».
• Associer chaque contrôle de formulaire à un <label> visible dont le texte décrit le champ. Éviter le placeholder utilisé à la place d’une étiquette, qui disparaît à la saisie.
• Pour les étiquettes visuellement masquées (zone de recherche, boutons icônes), utiliser aria-label ou une classe .visually-hidden, mais rendre l’étiquette spécifique.
• Lorsque deux en-têtes sur une page couvrent réellement le même sujet (par exemple deux sections « Commentaires » sur un index de forum), ajouter un contexte disambiguant : « Commentaires du 14 juillet », « Commentaires du 15 juillet ».
• Examiner tout en-tête ou étiquette de trois mots ou moins — c’est là que le vague se concentre.

Échecs courants

• « Informations », « Détails », « Plus », « Section », « Formulaire » utilisés comme en-têtes sans contexte supplémentaire.
• Des étiquettes de formulaire telles que « Champ 1 », « Entrée », « Saisissez ici » ou aucune étiquette du tout (placeholder uniquement).
• Des en-têtes de grille de cartes qui affichent tous « En savoir plus » parce qu’ils ont été convertis depuis des appels à l’action par un changement de gabarit.
• Une page de résultats de recherche où chaque en-tête de résultat est littéralement le mot « Résultat ».
• Des tableaux dont les en-têtes de colonnes sont « Col 1 », « Col 2 » au lieu de « Date », « Montant », « Statut ».

Pourquoi ce critère est important

Dans les enquêtes de WebAIM auprès des utilisateurs de lecteurs d’écran, la navigation par en-têtes est de manière constante la stratégie la plus courante pour s’orienter sur une nouvelle page — plus fréquente que la lecture de haut en bas. Des en-têtes vagues détruisent cette carte. Des étiquettes vagues rendent les formulaires inutilisables : un utilisateur arrive sur un contrôle qui indique simplement « champ » et doit revenir en arrière pour lire le texte environnant, que le mode formulaire masque souvent.