Français
Menu du site

p-as-heading

Un texte mis en forme comme un titre devrait probablement être un vrai titre

manualWCAG 1.3.1 (A)confiance : lowgravité : minorperceivable

Signale les éléments <p> et <div> courts dont tout le texte est en gras et rendu à >=18px, pour vérifier manuellement si un véritable élément de titre devrait être utilisé.

Applicabilité. Éléments <p>, et éléments <div> qui ne contiennent que du texte et du balisage en ligne, dont le texte visible est court (<=120 caractères) et non vide, et dont chaque fragment de texte visible est en gras (font-weight calculé >= 700, quelle qu’en soit l’origine : l’élément lui-même, un <strong>/<b> ou un <span> stylé) et rendu à >=18px. Le texte visible est le texte rendu (ni display:none, ni [hidden], ni visibility:hidden) et non réservé aux lecteurs d’écran. Un texte entièrement contenu dans des contrôles (le texte propre d’un widget ou d’un <label>) est laissé de côté.

Attendu. Un texte mis en forme pour se lire visuellement comme un titre (gras, plus grand que le corps de texte, court) devrait être balisé avec un véritable élément de titre (<h1>-<h6> ou role="heading") afin que son rôle structurel puisse être déterminé par programmation ; c’est la même préoccupation 1.3.1 que pour tout autre problème de « structure transmise uniquement par la présentation ».

Ce que rapporte un constat.

  • reasonCode : HEADING_LIKE_NUMBER lorsque le texte n’est qu’un nombre (des chiffres avec espacement et ponctuation : « 2024 » ; « No 12 » n’en est pas un), HEADING_LIKE_LINK lorsqu’il est entièrement contenu dans un seul lien, pour qu’un rapport puisse mettre l’un ou l’autre type de côté en tant que groupe ; sinon BOLD_LARGE_PARAGRAPH pour un <p> et BOLD_LARGE_DIV pour un <div>. Tous donnent lieu à une question.
  • fontSizePx : la taille de police du texte telle qu’elle est dessinée, en pixels CSS (la taille calculée multipliée par le zoom CSS, une transformation SVG ou le facteur d’échelle qu’applique font-size-adjust à la police), la plus petite lorsque les fragments diffèrent, comparée au seuil de 18px.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Exemples

can't tell
<style>.fakeHeading { font-weight: bold; font-size: 22px; }</style>
<p class="fakeHeading">Section Title</p>

Gras, de taille de titre et court : visuellement un titre, mais balisé comme un simple <p> sans sémantique de titre.

n/a
<p>Just a normal paragraph of body text that is not bold at all.</p>

Graisse et taille normales ; rien ne suggère visuellement un titre.

can't tell
<div style="font-size: 24px"><span style="font-weight: bold">Our team</span></div>

Un <div> qui ne contient que du texte est vérifié comme un <p>, et le gras peut venir d’un <span> stylé à l’intérieur. Un <div> qui contient d’autres blocs, et le texte dans un bouton, un libellé ou un en-tête de tableau, ne donnent pas lieu à la question.

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.

BOLD_LARGE_DIV

  1. Repérez le bloc de texte en gras et en grande taille indiqué par le rapport et regardez-le dans la page.
  2. Déterminez s’il introduit le contenu qui le suit, comme le fait un titre de section, ou s’il ne s’agit que d’une mise en valeur, d’un encadré ou d’une valeur.
  3. S’il sert de titre, vérifiez dans le panneau Accessibilité des outils de développement, ou avec la liste des titres d’un lecteur d’écran, s’il est exposé comme un titre.

Réussite. Le texte n’est pas un titre de section (mise en valeur, citation, prix ou statistique), ou il est balisé comme un titre (h1 à h6 ou role="heading").

Échec. Le texte sert visuellement de titre à une section mais n’est pas un titre : sa structure n’est indiquée que par le style, ce qui ne respecte pas le critère WCAG 1.3.1 (F2).

BOLD_LARGE_PARAGRAPH

  1. Repérez le paragraphe en gras et en grande taille indiqué par le rapport et regardez-le dans la page.
  2. Déterminez s’il introduit le contenu qui le suit, comme le fait un titre de section, ou s’il ne s’agit que d’une mise en valeur, d’un encadré ou d’une valeur.
  3. S’il sert de titre, vérifiez dans le panneau Accessibilité des outils de développement, ou avec la liste des titres d’un lecteur d’écran, s’il est exposé comme un titre.

Réussite. Le texte n’est pas un titre de section (mise en valeur, citation, prix ou statistique), ou il est balisé comme un titre (h1 à h6 ou role="heading").

Échec. Le texte sert visuellement de titre à une section mais n’est pas un titre : sa structure n’est indiquée que par le style, ce qui ne respecte pas le critère WCAG 1.3.1 (F2).

  1. Repérez le texte lié en gras et en grande taille indiqué par le rapport et regardez-le dans la page.
  2. Déterminez s’il introduit le contenu qui le suit, comme le fait un titre de section, ou s’il ne s’agit que d’une mise en valeur, d’un encadré ou d’une valeur.
  3. S’il sert de titre, vérifiez dans le panneau Accessibilité des outils de développement, ou avec la liste des titres d’un lecteur d’écran, s’il est exposé comme un titre.

Réussite. Le texte n’est pas un titre de section (mise en valeur, citation, prix ou statistique), ou il est balisé comme un titre (h1 à h6 ou role="heading").

Échec. Le texte sert visuellement de titre à une section mais n’est pas un titre : sa structure n’est indiquée que par le style, ce qui ne respecte pas le critère WCAG 1.3.1 (F2).

HEADING_LIKE_NUMBER

  1. Repérez le nombre en gras et en grande taille (comme une année) indiqué par le rapport et regardez-le dans la page.
  2. Déterminez s’il introduit le contenu qui le suit, comme le fait un titre de section, ou s’il ne s’agit que d’une mise en valeur, d’un encadré ou d’une valeur.
  3. S’il sert de titre, vérifiez dans le panneau Accessibilité des outils de développement, ou avec la liste des titres d’un lecteur d’écran, s’il est exposé comme un titre.

Réussite. Le texte n’est pas un titre de section (mise en valeur, citation, prix ou statistique), ou il est balisé comme un titre (h1 à h6 ou role="heading").

Échec. Le texte sert visuellement de titre à une section mais n’est pas un titre : sa structure n’est indiquée que par le style, ce qui ne respecte pas le critère WCAG 1.3.1 (F2).

Voir le code source