Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée ?
Un développeur utilise <h3> pour mettre en valeur le prix d’un produit, parce que le rendu visuel lui convient. Le lecteur d’écran annonce « Titre de niveau 3 » et insère ce prix dans le plan de la page. C’est une pollution directe de la navigation par titres.
Le critère cible tous les éléments HTML sémantiques détournés à des fins purement visuelles : titres <h1>-<h6> choisis pour leur taille de police, <blockquote> pour créer une indentation graphique, <p> vides pour générer des marges entre deux blocs. <div> et <span> sont exclus, car ils n’ont pas de sémantique native.
Il existe une porte de sortie : l’attribut role="presentation". Il supprime la sémantique native de l’élément. Son usage est formellement déconseillé dans le RGAA, mais peut se justifier dans des cas très précis : un <li> dans un pattern d’onglets WAI-ARIA, oui. Un <h2> choisi pour son apparence, jamais.
Sur un titre, role="presentation" est toujours non-conforme. La règle pratique : si le choix de l’élément est motivé uniquement par le CSS, c’est une non-conformité.
Un test pour détecter les balises HTML détournées à des fins de présentation
Éléments sémantiques non détournés à des fins visuelles
- Inspectez le code source à la recherche d’éléments sémantiques dont la présence semble dictée par l’apparence plutôt que par le sens :
<h1>-<h6>,<p>,<blockquote>,<ul>,<ol>,<li>,<em>,<strong>,<table>, etc. Les éléments<div>et<span>sont hors périmètre. - Pour chaque élément suspect, vérifiez qu’il porte l’attribut
role="presentation". - Vérifiez que cet usage est réellement justifié : suppression de sémantique requise par un pattern ARIA (ex. : onglets), et non une astuce graphique.
- Si les deux conditions sont réunies, l’élément est conforme. Si
role="presentation"est absent, ou si son usage n’est pas justifié, c’est une non-conformité.
Cas à surveiller en priorité : titres utilisés pour leur taille de police, <blockquote> pour une indentation visuelle, <p> vides pour créer des espaces, <table> de mise en page sans role="presentation".
Exemples
❌ Non conforme : Titre utilisé comme légende visuelle sur une carte produit
<div class="card">
<img src="chaussure-running.jpg" alt="Chaussure de running modèle X">
<h3>À partir de 89 €</h3>
<p>Légèreté et performance pour vos entraînements.</p>
</div>Le <h3> est utilisé pour son rendu visuel par défaut (texte plus grand, en gras) et non pour structurer le contenu. Le lecteur d’écran annonce « Titre de niveau 3 » et intègre ce prix dans le plan de navigation de la page. Un utilisateur qui navigue par titres voit cette entrée parasite dans son sommaire, sans contexte de section. La correction : remplacer le <h3> par un <p> ou un <span> stylisé en CSS.
✅ Conforme : Pattern d’onglets WAI-ARIA avec role="presentation" justifié sur les <li>
<ul role="tablist">
<li role="presentation">
<a role="tab" href="#panel-1" aria-selected="true">Caractéristiques</a>
</li>
<li role="presentation">
<a role="tab" href="#panel-2" aria-selected="false">Avis clients</a>
</li>
</ul>L’élément <ul> porte role="tablist". Dans ce contexte, les <li> enfants ne sont plus dans un contexte de liste : leur sémantique native est incompatible avec le modèle WAI-ARIA. Le role="presentation" sur chaque <li> supprime cette sémantique et permet à l’arbre d’accessibilité d’exposer correctement les onglets comme enfants directs du tablist. L’usage est justifié par une contrainte de structure ARIA, pas par une motivation graphique.
Astuces et pièges
⚠️ Les titres pour jouer sur la typographie : l’erreur la plus fréquente en audit
Utiliser <h2 role="presentation"> pour profiter de la mise en forme par défaut d’un titre sera toujours considéré comme non-conforme. Le RGAA est explicite sur ce point. Si vous avez besoin d’un grand texte sans valeur sémantique, utilisez un <p> ou un <span> avec une classe CSS dédiée. Le rendu visuel ne justifie jamais le détournement d’un titre.
⚠️ Paragraphes vides pour créer des espacements
Les <p></p> ou <p> </p> glissés entre deux blocs pour générer de l’espace vertical sont des non-conformités fréquentes. Certains lecteurs d’écran les annoncent comme des paragraphes vides, créant une expérience de navigation dégradée. La solution : gérez tous les espacements avec CSS (margin, padding, gap). Si un élément vide subsiste pour des raisons techniques, il doit porter role="presentation".
⚠️ role="presentation" légitime dans les patterns WAI-ARIA
Dans un <ul role="tablist">, les <li> doivent porter role="presentation" pour supprimer leur sémantique de liste, incompatible avec le modèle d’onglets WAI-ARIA. C’est l’un des rares cas où l’usage est justifié et documenté dans les pratiques officielles du W3C. La distinction clé : l’usage répond à une contrainte de structure ARIA, pas à un objectif graphique.
💡 Méthode d’audit rapide : le plan de document
Installez l’extension Web Developer et ouvrez « Information > View Document Outline ». Tout titre dans le plan qui ne correspond pas à une vraie section de contenu est immédiatement suspect. Croisez avec l’inspection du DOM : si le développeur a choisi cet élément pour son rendu visuel par défaut, le critère 8.9 est potentiellement violé.
⚠️ <blockquote> pour une indentation visuelle
<blockquote> doit encadrer une citation provenant d’une source externe. L’utiliser pour indenter un bloc de texte arbitraire est un détournement sémantique. Le RGAA admet qu’un role="presentation" peut être acceptable dans ce cas précis, contrairement aux titres. Reste que la vraie solution est de supprimer cet élément et de gérer l’indentation en CSS sur un <div> ou un <p>.
Questions fréquentes
Quels éléments HTML génériques comme <div> et <span> sont visés par le critère RGAA 8.9 ?
Non. <div> et <span> n’ont pas de sémantique native, ils sont conçus pour être des conteneurs neutres. Le critère 8.9 ne les cible pas. C’est l’inverse qui pose problème : prendre un élément sémantique (<h3>, <blockquote>, <p>) pour faire le travail d’un <div>.
Pourquoi appliquer role="presentation" à un <h2> ne suffit-il pas pour satisfaire le critère RGAA 8.9 ?
Non, jamais. role="presentation" sur un titre est explicitement cité comme non-conforme dans le RGAA, pas comme une correction. Si l’élément <h2> ne représente pas réellement un titre de section, remplacez-le par un <p> ou un <span> stylisé en CSS. Le role ne corrige pas le problème, il le masque sans le résoudre.
Comment distinguer un usage légitime de role="presentation" d'un usage inapproprié selon le RGAA ?
Posez-vous une question : est-ce que je supprime la sémantique pour respecter un modèle ARIA (onglets, grille…), ou est-ce pour profiter du rendu visuel de l’élément ? La contrainte technique ARIA est la seule justification recevable en audit. Un choix motivé par l’apparence sera systématiquement invalidé.
Comment le critère RGAA 8.9 s'applique-t-il aux tableaux <table> utilisés pour la mise en page ?
Oui. Le critère 8.9 couvre explicitement les tableaux de présentation. Un <table> utilisé uniquement pour aligner des éléments visuellement doit porter role="presentation". Sans ce rôle, le lecteur d’écran tente d’interpréter le tableau comme un tableau de données et annonce lignes, colonnes et en-têtes là où il n’y en a pas. Idéalement, remplacez ces tableaux par Flexbox ou Grid.
Quelle est la différence entre le critère RGAA 8.9 et le critère 10.1 ?
Le critère 10.1 cible les balises et attributs de présentation obsolètes issus de l’ancien HTML : <font>, <center>, <marquee>, l’attribut align, etc. Le critère 8.9 cible les éléments sémantiques modernes (<h1>-<h6>, <p>, <blockquote>) détournés à des fins visuelles. Les deux sont distincts et complémentaires : on peut échouer l’un sans échouer l’autre.