page-has-heading-one

La page devrait avoir un titre de niveau un

manualconfiance : mediumgravité : minoroperable

Vérifie que la page contient au moins un titre de niveau un (<h1> ou role="heading" avec aria-level="1").

Applicabilité. Toujours applicable à tout document HTML doté d’un élément <body> : « la page a-t-elle un h1 ? » est une question qui concerne la page entière, sur le modèle de bypass-blocks-present, qui évalue directement le document. Pas tant qu’une boîte de dialogue modale est ouverte : le reste de la page est alors inerte, si bien que l’analyse voit la boîte de dialogue, pas la page. Un élément personnalisé auquel ses ElementInternals donnent le rôle heading (this.attachInternals().role) et le niveau 1 (son attribut aria-level ou l’ariaLevel de ses ElementInternals) compte comme un <h1>. Un <hx> natif marqué role="none" ou "presentation" reste un titre lorsqu’il peut recevoir le focus ou porte un attribut ARIA global, car la résolution des conflits des rôles de présentation de WAI-ARIA amène alors les navigateurs à ignorer ce rôle. Un <hx> natif doté d’un aria-level valide (un entier positif) a ce niveau, comme l’exposent les navigateurs : <h2 aria-level="1"> est un titre de niveau un et <h1 aria-level="2"> ne l’est pas, comme les lit heading-order.

Attendu. Au moins un titre de niveau 1 existe (<h1> natif, ou role="heading" avec aria-level="1"). Une page sans titre de premier niveau n’offre pas de point d’entrée clair aux utilisateurs de technologies d’assistance qui naviguent par titres.

Exemples

pass
<body>
<h1>Page title</h1>
</body>

Un titre de niveau un existe.

can't tell
<body>
<h2>Section</h2>
<p>No top-level heading anywhere on the page.</p>
</body>

Il n’existe ni <h1> ni role="heading" aria-level="1".

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

HEADING_ONE_MISSING

  1. Ouvrez la page et repérez son titre principal (le texte qui dit ce qu’est cette page).
  2. Ouvrez le panneau Accessibilité des outils de développement, ou la liste des titres d’un lecteur d’écran, et cherchez un titre de niveau 1.
  3. S’il n’y en a pas, vérifiez si le titre principal est balisé comme un titre et à quel niveau.

Réussite. La page a un titre de niveau un qui nomme son contenu principal.

Échec. Aucun titre de la page n’est de niveau un : la navigation par titres n’a pas de point de départ clair (bonne pratique, G141).

Voir le code source