RGAA Lab

Composants accessibles

Les citations et le texte enrichi

Le gras et l'italique ne disent rien à personne ; em, strong, q et blockquote disent quelque chose à tout le monde. Ce que ce balisage sert vraiment, et pourquoi ce n'est pas d'abord le lecteur d'écran.

4 critères RGAA en jeu

Essayez-les

Balisé pour l’œil

Un rapport d'audit se relit des mois plus tard : chaque non-conformité doit porter une preuve. Le référentiel appelle échantillon l'ensemble des pages retenues, et notre règle interne tient en trois mots : « pas de capture, pas de constat ».

Utilisation de la balise blockquote à seule fin de mettre un paragraphe en retrait.

— RGAA 4.1, glossaire

Balisé pour le sens

Un rapport d'audit se relit des mois plus tard : chaque non-conformité doit porter une preuve. Le référentiel appelle échantillon l'ensemble des pages retenues, et notre règle interne tient en trois mots : pas de capture, pas de constat.

Utilisation de la balise blockquote à seule fin de mettre un paragraphe en retrait.

— RGAA 4.1, glossaire du référentiel

Les deux colonnes se ressemblent : même gras, même italique, même retrait. À gauche, tout vient de classes CSS et de guillemets tapés ; à droite, des éléments. Cochez la case : une feuille de styles utilisateur — celle d’un lecteur qui n’a pas écrit la page, et ne connaît donc aucun nom de classe — n’atteint que la colonne de droite. Le décompte annoncé est relevé sur le balisage réel.

Cette démo existe aussi en page autonome.

Ce que ce balisage sert vraiment

Il faut le dire d’emblée, parce que la promesse habituelle est fausse : par défaut, un lecteur d’écran ne change pas de voix sur un <strong> ni sur un <em>. L’annonce du gras et de l’italique dépend d’une option de mise en forme du document, que NVDA laisse désactivée dans sa configuration par défaut.

Alors pourquoi baliser ? Parce que le lecteur d’écran n’est pas le seul lecteur du code.

  • Une feuille de styles utilisateur ne connaît que des noms d’éléments. Elle peut viser strong ; elle ne peut rien contre un gras obtenu par une classe CSS, dont elle ignore le nom.
  • Le mode lecture d’un navigateur, un moteur de recherche, un traducteur automatique et un convertisseur (EPUB, Word, texte brut) lisent la même chose : les éléments, jamais les classes.
  • Une citation, elle, est restituée : <blockquote> porte un rôle, annoncé à l’entrée du bloc, et sert de point d’arrêt à la navigation rapide.

Le balisage sémantique du texte courant est donc moins un service rendu à une technologie d’assistance qu’une information écrite une fois et lisible par toutes. C’est aussi ce que le RGAA vérifie : le critère 9.4 impose le balisage des citations, et le 8.9 interdit d’employer ces mêmes balises pour leur rendu.

L’erreur courante

Le passage sorti d’un éditeur de texte riche, où tout est vrai à l’œil et faux au code.

<!-- À ne pas faire -->
<p>
	Chaque non-conformité <b>doit</b> porter une preuve. Le référentiel appelle
	<i>échantillon</i> l'ensemble des pages retenues.
</p>

<blockquote>
	<p>Un encadré que l'on voulait simplement mettre en retrait.</p>
</blockquote>

Deux fautes de nature différente, et une seule est une non-conformité.

Le <blockquote> employé pour le retrait annonce une citation qui n’existe pas. Le glossaire du référentiel le donne mot pour mot comme exemple de balise utilisée « uniquement à des fins de présentation » — c’est le critère 8.9, et il tombe.

Le <b> et le <i>, eux, ne sont pas des balises de présentation au sens du RGAA : la liste du glossaire est limitative, et elle ne les contient pas. Les employer ne fait échouer aucun critère. Ce qu’on y perd n’est pas un point d’audit, c’est une information : <b> demande une épaisseur de trait, <strong> déclare une importance. Écrivez le second quand c’est le second que vous voulez dire — c’est une bonne pratique, pas une exigence.

Trois variantes secondaires, plus discrètes :

  • Les guillemets tapés à la main dans le fil du texte. Ils s’affichent, et c’est tout : aucune citation n’est déclarée, et une recherche de citations dans la page ne les trouve pas.
  • Le <q> doublé de ses propres guillemets. Le navigateur en ajoute les siens : le lecteur en entend et en voit deux paires.
  • L’<em> posé pour obtenir de l’italique — un nom de bateau, un mot étranger. C’est le 8.9 dans l’autre sens : une emphase annoncée là où il n’y a qu’une convention typographique.

Le code, pas à pas

1. strong et em : l’importance et l’accent

<p>
	Chaque non-conformité <strong>doit</strong> porter une preuve.
	Le référentiel appelle <em>échantillon</em> l'ensemble des pages retenues.
</p>

<strong> marque une importance : ce qu’on ne peut pas sauter sans se tromper. <em> marque un accent : le mot sur lequel la phrase porte, et qui changerait de sens ailleurs — « je n’ai jamais dit ça » n’est pas « je n’ai jamais dit ça ».

Le test est simple : si votre phrase lue à voix haute ne change pas selon l’endroit où vous placez la balise, c’est que vous vouliez de l’italique, pas de l’emphase. Un CSS suffit alors.

2. q : la citation dans le fil

<p>Notre règle interne tient en trois mots : <q>pas de capture, pas de constat</q>.</p>

Le navigateur ajoute lui-même les guillemets, et il choisit leur forme d’après la langue déclarée : des guillemets français en lang="fr", des guillemets anglais en lang="en". N’en tapez donc aucun autour d’un <q>.

C’est le test 9.4.1 du référentiel : une citation courte, dans le fil du texte, utilise <q>.

3. blockquote : le bloc, et son attribution ailleurs

<figure>
	<blockquote cite="/glossaire/uniquement-a-des-fins-de-presentation">
		<p>Utilisation de la balise blockquote à seule fin de mettre un paragraphe en retrait.</p>
	</blockquote>
	<figcaption>— RGAA 4.1, <cite>glossaire du référentiel</cite></figcaption>
</figure>

Trois points, dont deux se ratent presque toujours.

L’attribution se place hors du <blockquote> : la source n’est pas ce qui a été dit. Mettre « — RGAA 4.1 » dans le bloc revient à prétendre que la citation contient son propre nom d’auteur. <figure> réunit les deux, et <figcaption> porte le crédit.

<cite> désigne le titre d’une œuvre — un livre, un référentiel, un film — et non le nom de la personne qui parle. C’est un contresens fréquent, entretenu par le nom de la balise.

L’attribut cite prend l’URL de la source. Aucun navigateur ne l’expose à l’utilisateur : il est lisible par les machines seules. Il ne remplace donc jamais un lien visible vers la source, quand cette source doit être atteignable.

4. La langue de ce qui est cité

<blockquote lang="en">
	<p>Accessibility is not a feature.</p>
</blockquote>

Une citation est le cas type du changement de langue : le passage est repris tel quel, souvent dans la langue de son auteur. Sans lang, la synthèse vocale applique les règles de la langue par défaut de la page, et le résultat n’est plus reconnaissable. C’est le critère 8.7.

5. Les balises que le référentiel interdit, elles, vraiment

<s>, <strike>, <tt>, <big>, <font>, <center>, <basefont>, <blink>, <marquee> : celles-là figurent nommément au glossaire, et le critère 10.1 les proscrit. Elles survivent surtout dans les contenus saisis par les rédacteurs, qui échappent aux gabarits.

Le cas piégeux est le texte barré. <s> est interdit — même si HTML5 lui donne un sens — alors que <del> et <ins>, qui marquent une suppression et un ajout dans un texte révisé, sont les balises légitimes. Si le barré est décoratif, il relève du CSS ; s’il porte du sens (un tarif remplacé), ce sens doit être écrit en toutes lettres, car aucune de ces balises n’est annoncée par défaut.

Une exception à retenir : <u> n’est interdit que hors HTML5. En HTML5, il reste permis — mais souligner du texte qui n’est pas un lien reste une mauvaise idée.

6. En avez-vous besoin ?

La question vaut d’être posée pour chaque balise ajoutée.

Un intertitre en gras est un titre : <h3>, pas <strong>. Un terme défini se balise <dfn> la première fois, pas en italique. Une mise en valeur purement graphique — une accroche, un chiffre-clé — n’est ni une emphase ni une citation : c’est du CSS sur un <span> ou un <p>, et personne ne perd rien.

Au clavier

Ni l’emphase ni une citation ne sont interactives : rien de tout cela n’entre dans l’ordre de tabulation. La navigation appartient au lecteur d’écran.

ToucheEffet
TabNe s’arrête sur rien ici. Seuls les liens contenus dans une citation sont focalisables.
QVa à la citation suivante — un blockquote (mode navigation rapide, NVDA et JAWS).
NVDA+F / Insertion+FDécrit la mise en forme du texte sous le curseur : c’est là qu’apparaissent « gras » et « italique ».

Ce que le lecteur d’écran restitue

À l’entrée d’un bloc cité : sa nature, puis son contenu — de l’ordre de « citation, Utilisation de la balise blockquote à seule fin de mettre un paragraphe en retrait », la sortie du bloc étant signalée à son tour. La formulation varie d’un lecteur à l’autre ; l’information, non.

Sur une citation courte, ce sont les guillemets insérés par le navigateur qui sont lus, comme du texte ordinaire. Sur un <strong> ou un <em>, en configuration par défaut : rien de particulier.

Si vous ne rencontrez jamais « citation » en parcourant vos blocs en retrait, ce sont des <div> — le 9.4 n’est pas satisfait. Si vous l’entendez sur un encadré qui ne cite personne, c’est un <blockquote> posé pour le retrait, et c’est le 8.9 qui tombe. Si vous entendez deux paires de guillemets autour d’une citation courte, vous avez tapé les vôtres en plus de ceux du navigateur.

Checklist

  • Une citation courte dans le fil : <q>. Un bloc cité : <blockquote>.
  • Aucun guillemet tapé autour d’un <q> — le navigateur les fournit.
  • L’attribution hors du blockquote, en <figcaption>, <cite> réservé au titre de l’œuvre.
  • lang sur toute citation reprise dans une autre langue.
  • <em> et <strong> seulement quand un accent ou une importance est en jeu ; le reste est du CSS.
  • Aucun blockquote pour obtenir un retrait, aucun hx pour obtenir une taille.
  • Ni <s>, ni <strike>, ni <tt>, ni <big>, ni <font> : la liste du glossaire est limitative.

Les critères RGAA en jeu

Vérifiez votre composant avec l'extension

Pour aller plus loin

Sources