Après avoir passé du temps à explorer les liens et la navigation, je me concentre sur l’accessibilité des contenus rédigés en ligne. Premier focus sur les abréviations.

Ce que j’ai fait :

• lire l’article Comment utiliser abbr en HTML?(lien externe) de Florens Verschelde
• lire la notice sur l’élément abbr(lien externe) de Mozilla

Ce que j’ai appris

Vocabulaire

La langue française distingue trois notions proches et imbriquées :

• les abréviations
• les sigles
• les acronymes

Une abréviation est le raccourcissement d’un mot ou d’un groupe de mots. L’abréviation consiste donc toujours en une suppression de lettre, plus ou moins importante. Exemple : etc pour et cætera.

Un sigle est l’abréviation d’un terme qui n’en garde que les initiales. Ces lettres sont écrites en majuscule et épelées, parfois suivies d’un point. Exemple : J.O. pour les Jeux Olympiques, TVA pour Taxe sur la Valeur Ajoutée.

Un acronyme est un sigle dont l’enchaînement des lettres se lit comme un mot simple, sans être épelé. Parfois ces acronymes deviennent des noms communs : ONU pour Organisation des Nations Unies, sida pour syndrome d’immunodéficience acquise.

Donc si l’on résume, un acronyme est un type de sigle qui est lui même un type d’abréviation. Quand je parlerai d’abréviation dans cet article, je me réferrerai donc à ces trois termes à la fois.

Code et abréviation

On peut utiliser l’élément <abbr> pour désigner sémantiquement une abréviation. Son attribut title permet également de fournir de manière optionnelle la signification de l’abréviation. On peut donc écrire :

<p>Je code régulièrement en <abbr>HTML</abbr>.</p>

Il y a assez peu d’intérêt à utiliser la balise seule sans attribut car elle ne fournira pas d’information à l’internaute ou au navigateur. En revanche, <abbr> peut être utile lorsque l’on souhaite identifier spécifiquement les abréviations pour les manipuler en script ou les mettre en forme avec des feuilles de style.

On peut aussi écrire :

<p>Je code régulièrement en <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Le title s’affichera au passage de la souris sur le mot HTML, comme c’est le cas dans cette phrase.

Note : certains termes sont plus utilisés sous leur forme abrégée que complètes, il n’est alors pas recommandé de renseigner leur forme déployée. Par exemple : SNCF, SMS. Bien sûr cela dépend également du contexte et du public auquel l’on s’adresse.

Accessibilité et abréviation

Les abréviations sont traitées ainsi dans les WCAG :

3.1.4 Abréviations : un mécanisme est disponible pour identifier la forme complète ou la signification d’une abréviation. (Niveau AAA)

S’agissant d’un critère de niveau AAA il n’est plus présent dans le RGAA 4, le niveau de conformité demandé étant le AA. Vous n’êtes donc pas tenu légalement de mettre en place une solution accessible pour expliciter les abréviations que vous employez. Cependant, prendre cette habitude est une bonne pratique pour tous vos lecteurs et lectrices qui se sentiront moins perdus face à des abréviations dont le sens leur échappe.

Quelles solutions peuvent alors être mises en place ?

Expliciter directement dans le texte

Comme souvent en accessibilité, les méthodes les plus simples sont les plus efficaces. A la première occurrence d’une abréviation dans une page, on peut ainsi écrire directement sa forme complète. Par exemple :

<p>Pour l'Institut national de la statistique et des études économiques (INSEE), le mois de novembre devient aussi important que décembre pour la vente à distance.<p>

Dans le reste de la page, l’abréviation INSEE pourra être utilisée seule.

Utiliser une balise <abbr> possédant un attribut title

Comme nous l’avons vu précédemment, cette technique permet d’afficher la signification de l’abréviation au survol de la souris. Mais comme nous l’avons déjà évoqué dans de précédents articles, le contenu de l’attribut title n’est pas restitué par tous les lecteurs d’écran. Cela dépend du lecteur d’écran, de sa version ou des réglages de l’utilisateur (voir à ce sujet la discussion sur Accessiweb(lien externe)). A titre d’exemple, sur ce blog, où je balise généralement mes abréviations avec un élément <abbr> et un attribut title, le contenu de ce dernier n’est restitué ni par Talkback, ni par VoiceOver.

D’autre part, l’attribut title n’est pas exploitable sur les terminaux tactiles, tels que les téléphones portables, et certains internautes ne connaissent même pas la possibilité d’afficher la signification au survol.

Implémenter un lien vers une page ou un emplacement dans la page

L’abréviation peut être intégrée dans un élément <a> qui pointe vers une autre page (ou vers un emplacement dans la même page) qui donne accès à la signification détaillée. Par exemple :

<p>La <a href="https://fr.wikipedia.org/wiki/Web_Accessibility_Initiative" lang="en">WAI</a> du W3C fut lancée en avril 1997.</p>

Le fait de recourir à un lien permet également de profiter de l’attribut title, mais son utilisation présente les mêmes problèmes que ceux cités précédemment avec la balise <abbr>. On pourrait donc plutôt se servir de l’attribut aria-label. Par exemple :

<p>La <a href="https://fr.wikipedia.org/wiki/Web_Accessibility_Initiative" lang="en" aria-label="WAI : Web Accessibility Initiative">WAI</a> du W3C fut lancée en avril 1997.</p>

Mettre en place un glossaire

Un glossaire présent dans le site permet d’expliciter chaque abréviation.

Conclusion

J’utilise personnellement énormément la balise <abbr>et son attribut title, particulièrement dans ce blog où les abréviations sont nombreuses. Ecrire cet article m’a permis de prendre conscience que la portée de cet élément est limité et que ce n’est pas forcément la meilleure manière de faire. Je vais désormais faire attention à expliciter systématiquement directement dans le texte la première occurrence d’une abréviation. Je me pose en revanche la question de garder ou non la balise <abbr> et son attribut title pour les autres occurrences de la page.