Les abréviations et les contenus cryptiques

Essayez-le

Les deux paragraphes se lisent pareil à la souris : survolez une abréviation à gauche, l’explication apparaît. Cochez maintenant la case — c’est la situation de qui navigue au clavier ou au doigt, où l’infobulle du navigateur ne s’affiche jamais — et regardez le relevé : la colonne de gauche tombe à zéro explication, celle de droite n’en perd aucune. Tabulez enfin dans les deux paragraphes : le focus ne s’arrête nulle part, parce qu’aucune touche ne révèle un title.

Cette démo existe aussi en page autonome.

L’erreur courante

Croire qu’abbr règle la question.

<!-- À ne pas faire, du moins pas tout seul -->
<p>
	Le <abbr title="Référentiel général d'amélioration de l'accessibilité">RGAA</abbr>
	compte 106 critères.
</p>

Ce balisage a l’air complet : il y a un mot court, il y a sa signification, le navigateur souligne même le mot en pointillés pour dire qu’il y a quelque chose à savoir. Le problème est qu’il ne dit pas comment l’obtenir, et que pour beaucoup de monde il n’y a aucun moyen de l’obtenir.

L’infobulle du navigateur est liée au pointeur. Elle n’apparaît pas à la prise de focus, et un abbr n’est de toute façon pas focalisable : au clavier, le contenu du title est inatteignable. Sur un écran tactile, il n’y a pas de survol, donc rien non plus. Et sa restitution par une synthèse vocale dépend d’un réglage du lecteur d’écran, réglage que vous ne pouvez pas décider à la place de vos lecteurs.

Reste que le référentiel, lui, accepte le title : pour un contenu cryptique, c’est l’une des deux conditions du critère 13.5. Un texte peut donc être conforme sur ce point et rester incompris — c’est exactement le genre d’écart qu’une fiche de conformité ne montre pas.

Trois variantes, dans l’ordre de fréquence :

• Le développement donné une seule fois, à la fin. Un glossaire en pied de page oblige à quitter le paragraphe, à chercher, puis à retrouver sa ligne. Personne ne le fait deux fois.
• Le title qui répète l’abréviation (title="RGAA"), laissé par un gabarit ou un export. Aucun critère ne le sanctionne — un sigle n’est pas un contenu cryptique —, mais le soulignement pointillé promet une explication que personne n’obtiendra. Le même geste sur un vrai contenu cryptique (<span title="+1">+1</span>) relève en revanche du critère 13.6 : l’alternative répète le signe au lieu d’en donner le sens.
• Le « +1 », le « asap », le « ^^ » laissés nus dans un commentaire ou un message. Le premier s’entend « plus un », le dernier « accent circonflexe, accent circonflexe ».

Le code, pas à pas

1. Ce que le référentiel demande — et ce qu’il ne demande pas

Il n’y a pas de critère RGAA sur les abréviations. Développer un sigle relève du critère WCAG 3.1.4, de niveau AAA, et le RGAA ne reprend que les niveaux A et AA : sur « RGAA » ou « SNCF », aucun audit ne vous demandera rien.

Deux critères s’appliquent en revanche, et il faut savoir lequel :

• 13.5 et 13.6 visent les contenus cryptiques. Le référentiel ne nomme que l’art ASCII, l’émoticône et la syntaxe cryptique, et n’en donne pas de définition au glossaire. Notre lecture : « +1 » et « ^^ » sont des syntaxes cryptiques ; « asap » est une abréviation ordinaire, qu’un audit ne vous demandera pas d’expliquer — mais qui reste illisible pour qui ne connaît pas le code.
• 8.7 vise le changement de langue. Un sigle dont le développement est anglais entraîne un passage en anglais, qu’il faut déclarer.

Écrire la forme longue est donc, pour un sigle ordinaire, une bonne pratique et non une obligation. C’est aussi la seule solution qui fonctionne partout, ce qui est un argument plus solide qu’une case à cocher.

2. La forme longue, écrite une fois, en toutes lettres

<p>
	Le Référentiel général d'amélioration de l'accessibilité (RGAA) compte
	106 critères. Le RGAA se décline en 13 thématiques.
</p>

La forme développée à la première occurrence, l’abréviation ensuite. Rien à survoler, rien à régler, rien à installer.

Ce que cette solution donne et qu’aucune autre ne donne : le texte est lu par toutes les synthèses vocales sans exception, il se copie, il s’indexe, il se traduit, il s’imprime, et il reste lisible dans un flux RSS ou un courriel qui aura mangé le balisage.

« La première occurrence » se compte par page, pas par site : quelqu’un peut arriver directement sur la page 12.

3. <abbr>, si vous y tenez, mais en plus

<p>
	Le Référentiel général d'amélioration de l'accessibilité
	(<abbr title="Référentiel général d'amélioration de l'accessibilité">RGAA</abbr>)
	compte 106 critères.
</p>

L’élément garde son intérêt : il marque sémantiquement l’abréviation, et le title reste disponible pour qui survole. Employé en plus du texte développé, il n’a aucun défaut ; employé à la place, il porte toute l’explication sur le seul canal qui n’est pas garanti.

Un réflexe à ne pas avoir : ajouter tabindex="0" sur l’abbr pour « le rendre atteignable au clavier ». L’infobulle native ne s’affiche pas davantage à la prise de focus, et vous aurez ajouté un arrêt de tabulation qui ne fait rien — un arrêt de plus dans chaque paragraphe, pour rien.

Si vous voulez vraiment une explication qui s’affiche au focus, ce n’est plus un title qu’il vous faut, c’est une infobulle — et elle vient avec ses propres obligations.

4. La langue du développement

<p>
	L'<abbr>ARIA</abbr>, pour
	<span lang="en">Accessible Rich Internet Applications</span>, ne couvre que
	la part scriptée.
</p>

Le développement anglais porte son lang : sans lui, une voix française prononce « accessible rich internet applications » avec les règles du français, et le résultat n’est reconnaissable dans aucune des deux langues. C’est ce que demande le critère 8.7 pour un passage étranger ordinaire — une citation, un slogan, un titre d’ouvrage. Ce développement-ci est le nom d’une spécification, et il peut à ce titre relever du cas particulier « nom propre » du 8.7, où le critère est non applicable : le lang reste utile pour la prononciation, il n’est simplement pas exigible ici.

Attention à la portée : le lang va sur le passage étranger, pas sur la phrase entière — sinon c’est le texte français qui bascule. Le critère 8.7 prévoit par ailleurs ses propres exceptions : il est non applicable pour un nom propre, pour un nom commun étranger présent dans le dictionnaire officiel de la langue de la page, pour un terme étranger soumis par un formulaire et rappelé dans la page, pour un passage dont la langue ne peut pas être déterminée, et pour une langue morte ou imaginaire sans interprétation vocale. Le texte exact est sur la fiche du critère 8.7 ; la notion de changement de langue, elle, est définie au glossaire.

5. Les contenus cryptiques : deux conditions, une seule utile

<!-- Conforme au 13.5 : une définition donnée par le contexte adjacent -->
<p>Je suis d'accord (+1) pour joindre la capture au rapport.</p>

<!-- Conforme aussi : un title. Mais invisible au clavier et au doigt. -->
<p><span title="je suis d'accord">+1</span> pour joindre la capture au rapport.</p>

Le critère 13.5 accepte les deux : un attribut title, ou une définition donnée par le contexte adjacent. Le critère 13.6 ajoute la seule exigence qui compte vraiment — l’alternative doit dire le sens, pas la composition du signe. « Deux points, tiret, parenthèse fermante » décrit ce qu’on voit ; « sourire » dit ce que ça veut dire.

Deux cas particuliers valent d’être connus :

• L’art ASCII se lit caractère par caractère : une signature décorative de six lignes fait plusieurs minutes de bruit. Notre lecture : le plus sûr est de ne pas en publier dans le fil du texte ; si vous y tenez, une image avec son alternative textuelle règle le problème d’un coup.
• L’émoji Unicode porte un nom dans la table de caractères du système, et les lecteurs d’écran qui l’ont dans leur table le prononcent. Notre lecture : cela dépend du lecteur, de sa langue et de son niveau de verbosité, comme pour le title — un émoji absent de la table est passé sous silence ou lu « caractère inconnu ». Le critère 13.5 nomme l’émoticône sans distinguer « 🙂 » de « :-) » : dans le doute, une alternative ne coûte rien.

6. Avez-vous besoin de cette abréviation ?

Un sigle abrège l’écriture, pas la lecture. S’il n’apparaît qu’une ou deux fois dans la page, écrivez-le en clair les deux fois : vous économisez une explication, un title, une ligne de glossaire, et vous ne devez plus rien à personne sur ce point.

Au clavier

Ce contenu n’est pas interactif : il n’y a rien à actionner, et c’est précisément le problème d’une explication rangée dans un title.

Touche	Effet
Tab	Ne s’arrête pas sur une abréviation : l’élément abbr n’est pas focalisable.
Aucune	Aucune combinaison n’affiche l’infobulle du navigateur : elle est liée au pointeur.
↓ / ↑ en mode navigation	Lecteur d’écran : parcourt le texte ligne à ligne. C’est là que la forme longue est lue — si elle est dans le texte.
Ctrl + flèches	Lecture mot à mot, pour vérifier ce qui est réellement prononcé sur le sigle.

Ce que le lecteur d’écran restitue

Sur la version développée : le texte, simplement — « Le Référentiel général d’amélioration de l’accessibilité, R G A A, compte 106 critères ». Le sigle est épelé ou prononcé comme un mot selon la voix ; l’information, elle, a déjà été donnée juste avant. La formulation varie d’un lecteur à l’autre, pas ce qui est dit.

Le diagnostic tient en trois écoutes :

• Si vous n’entendez que « R G A A » et rien d’autre, le title n’est pas restitué par cette configuration. C’est un résultat, pas une panne : vous ne choisissez pas les réglages de vos lecteurs.
• Si vous entendez « plus un » ou « accent circonflexe, accent circonflexe » au milieu d’une phrase, l’alternative du critère 13.5 manque.
• Si vous entendez le développement anglais prononcé à la française, le lang du critère 8.7 manque — ou il est posé sur un conteneur trop large.

Checklist

• Écrire la forme longue à la première occurrence de la page, en toutes lettres.
• Employer abbr et son title en plus du texte développé, jamais à la place.
• Ne pas rendre un abbr focalisable : l’infobulle ne s’affiche pas pour autant.
• Déclarer avec lang le développement écrit dans une autre langue, sur le passage seul.
• Donner une alternative à chaque contenu cryptique : art ASCII, émoticône en ponctuation, « +1 », « ^^ ».
• Vérifier que l’alternative dit le sens du signe, pas sa composition.
• Se demander si l’abréviation est utile avant de chercher comment l’expliquer.

Les critères RGAA en jeu

• Critère 13.5 — Alternative aux contenus cryptiques

  Un « +1 », un « ^^ », un émoticône en ponctuation ou une signature en art ASCII sont des contenus cryptiques : sans alternative, il ne reste qu'un bruit au milieu de la phrase.

• Critère 13.6 — Pertinence de l’alternative cryptique

  L'alternative doit dire le sens et non la composition du signe : « deux points, parenthèse fermante » décrit ce qu'on voit, et n'apprend rien à qui ne le voit pas.

• Critère 8.7 — Changements de langue indiqués

  Le développement d'un sigle est souvent dans une autre langue que la page : une locution comme « the quick brown fox » au milieu d'un texte français est prononcée avec les règles du français si rien ne déclare l'anglais. Les noms propres, eux, relèvent d'un cas particulier où le critère est non applicable.

Vérifiez votre composant avec l'extension

Pour aller plus loin

• Critère 13.5 — Alternative aux contenus cryptiques et 13.6 — Pertinence de l’alternative : ce qu’un audit vérifie, et pourquoi il faut le lire pour le juger.
• La langue de la page : où se pose lang, et les cas que le référentiel écarte.
• L’infobulle : ce qu’il faut construire quand une explication doit vraiment s’afficher au focus.
• « Changement de langue » au glossaire : la notion telle que le référentiel la définit, et le sort des valeurs d’attribut.
• Critère 8.7 — Changement de langue : ses cinq cas particuliers, là où ils sont réellement écrits.

Sources

• MDN — <abbr> — l’élément, et ce que son title fait exactement
• MDN — l’attribut global title — ses limites d’accès, énoncées par la référence elle-même
• WCAG — Understanding 3.1.4 Abbreviations — l’exigence de niveau AAA que le RGAA ne reprend pas
• WCAG — Technique H86 : alternatives à l’art ASCII, aux émoticônes et au leet speak — la technique que cite le critère 13.5
• WCAG — Échec F71 : représenter du texte par des sosies typographiques — l’échec correspondant, avec ses exemples