Les titres, listes et mises en valeur de votre site sont-ils utilisés pour leur sens, pas uniquement pour leur apparence visuelle ?
Critère officiel 8.9 — 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 ?
Pourquoi c'est important
Un logiciel de lecture utilise la structure du code pour naviguer : il peut sauter de titre en titre, lister tous les liens, parcourir les listes. Si un texte est visuellement mis en forme comme un titre — gros et gras — mais techniquement déclaré comme simple paragraphe, cette navigation structurée est impossible.
Exemples concrets
Ce qui est conforme
Les sections « Recettes », « Dépenses » et « Investissements » du compte-rendu budgétaire sont de vrais titres de niveau 2 dans WordPress. Le logiciel de lecture propose : « Page contenant 3 titres. » L'utilisateur saute directement à la section qui l'intéresse.
Ce qui pose problème
L'agent a créé un sous-titre visuel en sélectionnant un paragraphe et en augmentant sa taille en gras. Visuellement identique à un titre, mais le logiciel de lecture l'ignore dans la navigation par titres — comme s'il n'existait pas.
Comment agir
Dans WordPress, utilisez toujours les vrais blocs de titre (Titre 2, Titre 3) pour structurer vos pages — jamais un paragraphe mis en gras ou agrandi. Utilisez le bloc Liste pour les listes à puces — pas des tirets tapés manuellement. Le bloc Citation pour les citations — pas du texte en italique. La règle : chaque bloc doit correspondre à ce qu'il est réellement.
Règles clés
- Utiliser les éléments HTML selon leur sémantique, pas leur rendu visuel par défaut.
- <blockquote> uniquement pour les citations de sources externes. Indenter avec CSS padding ou margin.
- Les listes <ul>/<ol> pour des éléments réellement liés en liste. L'espacement entre paragraphes se gère avec CSS.
- <b> et <i> ont une sémantique propre (emphase faible) — pour un effet purement visuel, utiliser CSS font-weight/font-style sur un <span>.
- <br> pour les sauts de ligne dans un même paragraphe (adresses, poèmes), pas pour créer des espaces entre paragraphes.
- Exception : <div>, <span> et <table> (ce dernier uniquement pour les tableaux de mise en forme avec role="presentation") sont exemptés car ils n'ont pas de sémantique propre.
Erreurs fréquentes
- <blockquote> utilisé pour indenter visuellement un texte qui n'est pas une citation
- <ul> ou <ol> utilisés pour créer un espacement vertical entre des éléments non liés en liste
- <table> utilisé pour une mise en page côte à côte (hors emails HTML où c'est parfois inévitable)
- <br><br> utilisé pour créer des espaces entre paragraphes à la place de marges CSS
- <b> ou <i> utilisés pour leur effet visuel sans valeur sémantique (préférer <strong>, <em>, ou CSS)
- <h1>–<h6> choisis pour leur taille de rendu par défaut plutôt que pour leur niveau dans la hiérarchie
Exemples de code
blockquote décoratif
✗ Non conforme<!-- Texte indenté visuellement avec blockquote -->
<blockquote>
<p>Pour vous inscrire, rendez-vous sur notre
espace membre et créez votre compte.</p>
</blockquote>Ce n'est pas une citation — c'est du texte courant mis en retrait pour une raison visuelle. Un lecteur d'écran annoncera 'citation' — information erronée qui perturbe la compréhension.
indentation via CSS
✓ Conforme<!-- CSS pour l'indentation visuelle -->
<p class="indented">
Pour vous inscrire, rendez-vous sur notre
espace membre et créez votre compte.
</p>
<style>
.indented {
padding-left: 2rem;
border-left: 3px solid #cccccc;
}
</style>L'effet visuel d'indentation est obtenu par CSS. L'élément <p> a la sémantique correcte. Aucun faux signal envoyé aux AT.
titre choisi pour sa taille visuelle
✗ Non conforme<!-- H3 choisi parce qu'il a la taille souhaitée,
pas parce que c'est un titre de niveau 3 -->
<h3 class="tagline">Votre partenaire de confiance</h3>
<p>Nous accompagnons les collectivités depuis 2005.</p>Si 'Votre partenaire de confiance' n'est pas un titre de section dans la hiérarchie logique de la page, utiliser <h3> envoie un faux signal. Un utilisateur naviguant par titres trouvera ce texte dans la liste des titres de niveau 3.
texte mis en avant avec CSS
✓ Conforme<!-- Texte mis en avant sans valeur sémantique de titre -->
<p class="tagline">Votre partenaire de confiance</p>
<style>
.tagline {
font-size: 1.5rem;
font-weight: 600;
color: #1a1a1a;
}
</style>L'apparence visuelle de 'grand titre' est obtenue par CSS sur un <p>. Le plan de la page n'est pas pollué par un faux titre.
Référence WCAG : 1.3.1