En-têtes et non-conformité aux WCAG : une clarification à juste titre

Les titres expriment l’organisation du contenu sur une page Web ou un écran. Utiliser des titres bien structurés permet de survoler rapidement un document sur le Web et d’en comprendre son agencement ; un peu comme lorsque l’on survole un document imprimé sur du papier. Les titres permettent également aux personnes utilisant un lecteur d’écran ou d’autres technologies d’assistance de naviguer dans les pages Web et les écrans.

Les titres font partie des bases du langage de balisage sur le Web, trouvant leur place dans la spécification HTML depuis les tout débuts. Mais l’ancienneté des titres ne lève pas pour autant la confusion et l’ambigüité qui persistent autour de ce qui constitue un usage recommandé, tout particulièrement en matière d’accessibilité.

Si les recommandations sur l’accessibilité sont toujours sujettes à un certain degré d’interprétation, ce billet entreprend de chasser toute confusion et de clarifier notre position concernant les cas où les titres sont utilisés de manière non conforme aux règles pour l’accessibilité des contenus Web (WCAG).

Quels sont les critères WCAG visés ?

Les titres font l’objet de critères de succès dans les trois niveaux de conformité établis par les WCAG :

• 1.3.1 Information et relations : l’information, la structure, et les relations véhiculées par la présentation peuvent être déterminées par un programme informatique ou sont disponibles sous forme de texte. (Niveau A)
• 2.4.6 En-têtes et étiquettes : les en-têtes et les étiquettes décrivent le sujet ou le but. (Niveau AA)
• 2.4.10 En-têtes de section : les en-têtes de section sont utilisés pour organiser le contenu. (Niveau AAA)

Quelles pratiques ne sont PAS des non-conformités ?

Intéressons-nous en premier lieu aux cas d’utilisation qui ne dérogent pas aux WCAG.

Titres manquants

Les critères WCAG relatifs aux titres s’appliquent uniquement si la page ou l’écran contient des titres, ou du texte qui y ressemble.

Ce point est développé sur la page d’aide à la compréhension du critère de succès 2.4.6 En-têtes et étiquettes (en anglais), qui précise : « Ce critère de succès ne constitue pas une obligation à utiliser des en-têtes ou des étiquettes. Si la page contient des en-têtes ou des étiquettes, le critère de succès exige que ceux-ci soient de nature descriptive. »

De la même façon, la page d’aide à la compréhension du critère de succès 1.3.1 Information et relations (en anglais) recommande que les en-têtes soient identifiés avec des balises sémantiques, mais il n’exige pas la présence de titres sur chaque page ou écran.

À l’inverse, le critère de succès 2.4.10 En-têtes de section prévoit l’obligation d’utiliser des en-têtes pour organiser le contenu. Cela dit, il s’agit d’un critère de niveau AAA (triple A), reconnaissant que les en-têtes ne peuvent pas être appliqués à tous les types de contenu. Par ailleurs, l’évaluation de ce critère laisse plus de place à la subjectivité.

En somme, même si l’absence de titres peut nous sembler aberrante (et qu’elle traduit vraisemblablement un manque de structure sémantique), ce n’est pas une non-conformité aux critères 1.3.1 Information et relations et 2.4.6 En-têtes et étiquettes. (Il se peut, en revanche, que cette absence soit considérée comme allant à l’encontre du critère de succès 2.4.10 En-têtes de section.)

Absence de titre h1

Là encore, bien que le fait de commencer la hiérarchie des titres d’un contenu Web par un h1 soit une approche logique et répandue, ni les WCAG, ni la spécification HTML 5.2 n’établissent une obligation en ce sens. Une hiérarchie de titres sans h1 est certes inhabituelle, mais cet usage ne déroge pas aux WCAG.

Plusieurs titres h1

L’inverse vaut également : une hiérarchie constituée de plusieurs titres de niveau 1 est peut-être une pratique peu commune, mais elle ne constitue pas une non-conformité. On s’attend typiquement à ce qu’une page intègre un seul titre h1 pour représenter le titre principal.

Du moment que la présentation visuelle des multiples titres h1 n’évoque pas de hiérarchie (le premier h1 présenté avec une taille de police d’écriture plus grande ou en gras par rapport au deuxième h1), par exemple), intégrer plusieurs h1 ne contrevient pas aux WCAG — même si ce choix peut être déroutant.

Sauter des niveaux de titre

Commencer directement par un titre h2 et enchaîner avec un titre h4 ne contribue certainement pas à favoriser une structure logique des titres au sein d’un contenu, et c’est une pratique qu’il faut éviter dans la mesure du possible ; toutefois, elle ne constitue pas une non-conformité WCAG.

Dans l’exemple qui suit, la hiérarchie des titres passe d’un titre de niveau 2 (« Risotto forestier aux lardons ») à un titre de niveau 4 (« Préparation »), et ce n’est pas une non-conformité.

<h2>Risotto forestier aux lardons</h2>
Pour réaliser le risotto parfait, il faut […]
<h4>Préparation</h4>
<ol>
<li>Faire chauffer le bouillon. Peler et hacher finement les […]</li>
</ol>

Certaines techniques WCAG, comme la technique H42 (en anglais) portant sur l’utilisation des balises h1 à h6 pour identifier les titres et la technique ARIA12 (en anglais) sur l’utilisation de l’attribut role=heading également pour l’identification des titres, recommandent que les balises de titre indiquent un niveau de titre adapté (appropriate en anglais) au contenu.

Toutefois, ces techniques ne définissent pas ce qui est « adapté », et c’est un problème qui suscite un vaste débat (en anglais). Ainsi, bien qu’une structure de titres hiérarchisée soit une bonne pratique, sauter des niveaux de titre n’est pas une non-conformité WCAG.

Plusieurs titres ayant le même intitulé

Les titres doivent être clairs et descriptifs. D’après la page d’aide à la compréhension du critère de succès 2.4.6 En-têtes et étiquettes (en anglais), les en-têtes aident à comprendre le contenu et l’organisation d’une page. D’aucuns diraient qu’il est impossible de décrire un contenu avec précision en utilisant les mêmes titres plusieurs fois, mais il s’agit en grande partie d’une question de jugement qui dépend du contexte.

Par exemple, une page de recettes qui contient plusieurs titres h1 ayant tous pour intitulé le texte « Préparation » est susceptible de créer de la confusion :

<h1>Préparation</h1>
Pour réaliser le risotto parfait, il faut […]
<ol>
 	<li>Faire chauffer le bouillon. Peler et hacher finement les […]</li>
</ol>
<h1>Préparation</h1>
Le coq au vin est un plat traditionnel français qui […]
<ol>
 	<li>Faire chauffer l’huile d’olive dans une cocotte à fond épais […]</li>
</ol>

En revanche, utiliser plusieurs titres h3 avec le texte « Préparation », à la suite d’un titre h2 portant le titre de la recette est moins susceptible d’entraîner une confusion :

<h2>Risotto forestier aux lardons</h2>
Pour réaliser le risotto parfait, il faut […]
<h3>Préparation</h3>
<ol>
 	<li>Faire chauffer le bouillon. Peler et hacher finement les […]</li>
</ol>
<h2>Coq au vin</h2>
Le coq au vin est un plat traditionnel français qui […]
<h3>Préparation</h3>
<ol>
 	<li>Faire chauffer l’huile d’olive dans une cocotte à fond épais […]</li>
</ol>

Ainsi, même s’il est difficile de percevoir une quelconque logique à structurer une page avec plusieurs titres ayant le même intitulé, c’est une pratique qui reste conforme aux WCAG.

Quelles pratiques SONT des non-conformités ?

Quels sont alors les usages qui dérogent aux WCAG ?

Un texte qui ressemble à un titre, mais qui n’est pas balisé comme tel

Les WCAG exigent d’utiliser la meilleure structure sémantique possible pour présenter l’information et les relations, ce qui inclut les titres. Certes, cette exigence ne se traduit pas par une obligation d’employer des titres.

En revanche, lorsqu’un texte indique le début d’une section (en général parce qu’il est visuellement plus grand ou plus gras que le texte de labeur), alors ce texte doit être balisé en tant que titre.

Dans l’exemple qui suit, le texte à l’intérieur des éléments p est présenté de façon à lui donner l’aspect d’un titre ; or, cette pratique va à l’encontre des WCAG.

<p style="font-weight: bold; font-size: 1.5rem;">Risotto forestier aux lardons</p>
Pour réaliser le risotto parfait, il faut […]
<p style="font-weight: bold; font-size: 1.5rem;">Coq au vin</p>
Le coq au vin est un plat traditionnel français qui […]

Le fait de présenter du texte comme un titre sans la balise correspondante est non conforme au critère 1.3.1 Information et relations.

Titres ordonnés de manière illogique

En plus d’exiger l’utilisation de balises de titre lorsque nécessaire, les WCAG précisent que ces balises doivent respecter une hiérarchie logique par rapport aux autres titres. Cela n’empêche pas de sauter un niveau de titre, comme nous l’avons vu : un h2 peut, par exemple, être suivi d’un h4.

Ce qui compte, c’est que les niveaux de titre reflètent la hiérarchie du contenu dont il est question.

Autrement dit : un titre visuellement moins important que les autres doit être structuré avec une balise de moindre importance dans la hiérarchie des contenus.

Dans l’exemple qui suit, le titre « Préparation » est associé à un titre (h2 qui laisse supposer, à tort, qu’il est plus important que le titre « Risotto forestier aux lardons » (présenté avec une balise h3).

<h3>Risotto forestier aux lardons</h3>
Pour réaliser le risotto parfait, il faut […]
<h2>Préparation</h2>
<ol>
 	<li>Faire chauffer le bouillon. Peler et hacher finement les […]</li>
</ol>

Présenter les différents niveaux de titre selon une hiérarchie inversée (un titre h2 qui viendrait après un titre h3, par exemple, ou un h6 utilisé à la place d’un h1 pour présenter le titre principal d’une page) constitue bien une non-conformité à l’égard du critère 1.3.1 Information et relations.

Titres non descriptifs

Les titres parfaitement structurés d’un point de vue tant sémantique que logique seront inefficaces si chaque titre ne décrit pas précisément la section de contenu qu’il présente.

Dans l’exemple qui suit, on peut affirmer que les titres des deux recettes ne sont pas descriptifs :

<h2>Recette</h2>
Pour réaliser le risotto parfait, il faut […]
<h2>Recette</h2>
Le coq au vin est un plat traditionnel français qui […]

Bien sûr, la subjectivité et le contexte entrent en ligne de compte lorsqu’il s’agit de déterminer si un titre est assez « descriptif ».

Néanmoins, utiliser des titres qui ne décrivent pas de façon adéquate le contenu qu’ils annoncent constitue une non-conformité au critère 2.4.6 En-têtes et étiquettes (en anglais).

À titre de conclusion : que faut-il garder « en tête » ?

Pour résumer, voici les scénarios qui ne sont pas incompatibles avec les WCAG :

• titres manquants (sauf si vous visez la conformité de niveau AAA, c’est-à-dire triple A) ;
• absence de titre h1 ;
• plusieurs titres h1 ;
• sauter des niveaux de titre ;
• plusieurs titres ayant le même intitulé.

A contrario, voici les scénarios qui constituent une non-conformité aux WCAG :

• un texte qui ressemble à un titre, mais qui n’est pas balisé comme tel ;
• ordre de titres illogique ;
• titres non descriptifs.

Cet article vise en premier lieu à décrire les usages de titres qui dérogent aux règles pour l’accessibilité des contenus Web (WCAG). Gardons toutefois à l’esprit que l’objectif général de l’accessibilité consiste à faire du Web un lieu plus inclusif pour tout le monde. Ainsi, si certaines implémentations ne vont pas à l’encontre des WCAG, toutes sont susceptibles de créer de la confusion et de créer de nouveaux obstacles pour les personnes en situation de handicap.

Traduction : Eleanor Hac