Dans chaque page web, chaque citation est-elle correctement indiquée ?
Un lecteur d’écran qui rencontre une citation sans balisage sémantique la lit comme du texte ordinaire : l’utilisateur ne sait pas qu’il s’agit des mots de quelqu’un d’autre. Le balisage sémantique est le seul moyen de transmettre cette information.
Le RGAA distingue deux types de citations. Les citations courtes, insérées dans le fil d’un paragraphe, doivent utiliser l’élément <q>. Les blocs de citation, plus longs et visuellement détachés du reste, doivent utiliser <blockquote>. Deux éléments, deux usages.
L’élément <q> gère automatiquement les guillemets typographiques dans les navigateurs modernes, à condition que lang="fr" soit défini sur la page. Vous pouvez supprimer les guillemets manuels autour de vos citations courtes. Pour <blockquote>, l’élément <cite> peut préciser la source, mais il n’est pas obligatoire pour valider ce critère.
2 tests pour confirmer que les citations sont correctement balisées
Citation courte <q>
- Repérez toutes les citations courtes dans la page : texte entre guillemets inséré dans un paragraphe, fragment attribué à une source extérieure.
- Pour chaque citation courte, vérifiez qu’elle est entourée d’un élément
<q>. - Test validé si toutes les citations courtes utilisent
<q>. Test échoué si au moins une citation courte utilise des guillemets en texte brut sans<q>.
Bloc de citation <blockquote>
- Repérez tous les blocs de citation dans la page : passages longs visuellement détachés, extraits d’ouvrages, discours reportés.
- Pour chaque bloc de citation, vérifiez qu’il est contenu dans un élément
<blockquote>. - Test validé si tous les blocs utilisent
<blockquote>. Test échoué si un bloc est simulé par indentation CSS ou mise en forme visuelle sans balisage sémantique.
Exemples
❌ Non conforme : Citation courte sans balisage sémantique
<p>Comme le disait Antoine de Saint-Exupéry : « On ne voit bien qu'avec le cœur. L'essentiel est invisible pour les yeux. »</p>Les guillemets sont visuellement présents, mais aucun élément sémantique ne signale qu’il s’agit d’une citation. Un lecteur d’écran lit ce texte sans distinction, comme du contenu ordinaire.
✅ Conforme : Citation courte correctement balisée
<p>Comme le disait Antoine de Saint-Exupéry : <q>On ne voit bien qu’avec le cœur. L’essentiel est invisible pour les yeux.</q></p>L’élément <q> signale sémantiquement qu’il s’agit d’une citation. Le navigateur insère automatiquement les guillemets typographiques adaptés à la langue de la page, ce qui évite les doublons avec des guillemets manuels.
❌ Non conforme : Bloc de citation simulé par CSS
<p class="citation-bloc">Il est une vérité universellement reconnue qu'un homme célibataire possédant une belle fortune doit avoir envie de se marier.</p>
<p class="source">Jane Austen, <em>Orgueil et Préjugés</em></p>Ce bloc a l’apparence d’une citation grâce au CSS, mais la structure HTML ne transmet aucune information sémantique. Un lecteur d’écran ou un outil d’analyse ne peut pas identifier ce passage comme une citation.
✅ Conforme : Bloc de citation correctement balisé
<p>Le roman s’ouvre sur une affirmation célèbre :</p>
<blockquote>
<p>Il est une vérité universellement reconnue qu’un homme célibataire possédant une belle fortune doit avoir envie de se marier.</p>
</blockquote>
<p>Jane Austen, <cite>Orgueil et Préjugés</cite></p><blockquote> indique sémantiquement qu’il s’agit d’un extrait cité. L’élément <cite> identifie la source de manière programmatique. Les technologies d’assistance peuvent annoncer le début et la fin de la citation.
Astuces et pièges
⚠️ <blockquote> utilisé pour l’indentation, pas pour les citations
C’est l’erreur la plus fréquente en audit : <blockquote> utilisé pour créer un retrait visuel sur du texte qui n’est pas une citation. L’inverse existe aussi : une vraie citation balisée avec un <div class="blockquote"> purement décoratif. Le balisage doit refléter la nature du contenu, pas son apparence.
💡 <q> gère les guillemets automatiquement
En français, <q> génère automatiquement les guillemets « » si la langue de la page est définie avec lang="fr". Vous pouvez retirer les guillemets manuels autour de vos citations courtes. Si les guillemets s’affichent en double, c’est que vous avez laissé les deux.
⚠️ L’attribut cite n’est pas obligatoire pour le RGAA
L’attribut HTML cite (URL de la source) sur <blockquote cite="https://..."> n’est pas requis pour valider le critère 9.4. Il est recommandé par les bonnes pratiques HTML5, mais son absence ne constitue pas un échec RGAA. Ne confondez pas l’attribut cite et l’élément <cite> : ce sont deux choses distinctes.
⚠️ Témoignages clients et avis utilisateurs
Une section « Ils parlent de nous » contient des paroles attribuées à des personnes identifiées : ce sont des citations. Chaque témoignage devrait être enveloppé dans un <blockquote>. C’est une situation très courante sur les pages commerciales et rarement balisée correctement.
⚠️ Ne pas confondre <cite> et <blockquote>
<cite> identifie un titre d’œuvre ou le nom d’un auteur : <cite>Orgueil et Préjugés</cite>. Il ne structure pas la citation elle-même. <blockquote> encadre le contenu cité. Les deux peuvent coexister, mais aucun ne remplace l’autre.
Questions fréquentes
Quelle différence entre <q> et des guillemets manuels pour baliser une citation courte ?
Vous devez utiliser <q> pour valider le test 9.4.1. Les guillemets manuels, qu’ils soient typographiques (« ») ou ASCII ("), sont purement visuels et n’apportent aucune information sémantique aux technologies d’assistance. <q> est la seule balise acceptée par le RGAA pour les citations courtes.
Comment repérer les citations non balisées lors d'un audit RGAA ?
Cherchez les passages visuellement présentés comme des citations dans la page : guillemets, indentation, italique, fond coloré. Vérifiez ensuite dans le DOM si ces passages utilisent <q> ou <blockquote>. Dans la console, document.querySelectorAll('blockquote, q') liste tous les éléments déjà balisés : les citations manquantes s’identifient par différence.
Quand utiliser <blockquote> pour un tweet intégré dans une page selon le RGAA ?
Oui. Le code d’intégration officiel de X (ex-Twitter) utilise d’ailleurs <blockquote class="twitter-tweet"> par défaut. Si votre implémentation personnalisée supprime cet élément, le test 9.4.2 échoue.
Comment traiter une épigraphe ou citation décorative en tête d'article selon le RGAA ?
Oui. Une épigraphe cite les mots de quelqu’un : c’est une citation, quel que soit son rôle stylistique. Le balisage <blockquote> s’impose même si l’intention est purement décorative.
Comment baliser les paroles de dialogue dans un article selon le RGAA ?
Non. Les dialogues fictifs ou les paroles rapportées dans un récit ne sont pas des citations au sens du RGAA. Le critère 9.4 vise les citations de sources extérieures attribuées à un auteur ou un document identifié.