Signaler les abréviations

30 mars 2011,
par Romy Têtue

Mots-clefs associés à cet article :

Comment bien styler <abbr>, balise explicitant les abréviations, afin de signaler l’existence de l’information qui s’y cache ?

Cette balise permet d’expliciter le sens des sigles et abréviations. Son usage améliore la compréhension des textes, ce qui les rend plus un peu accessibles [1] et améliore leur indexation.

Exemple d’abréviation :

Les pages Web sont écrites en <abbr title="HyperText Markup Language" lang="en">HTML</abbr>.

Ce qui s’affiche ici de la sorte :

Les pages Web sont écrites en HTML.

Encore trop peu de navigateurs se préoccupent du rendu de cette balise, omettant de signaler aux internautes qu’une info se cache sous les mots qu’elle encapsule. Pour qu’elle soit perçue, il ne faut pas négliger de la styler.

Comment styler les abréviations ?

Sur le Web, les abréviations sont souvent signalées par un soulignement en pointillé qui les distingue des hyperliens. Cette signalétique est devenue conventionnelle.

abbr[title] {
  border-bottom: .1em dotted;
  cursor: help;
}

Quelques remarques pour un CSS simple et efficace :

  • Inutile de spécifier la couleur de la bordure : en l’absence c’est celle du texte qui sera appliquée. Cela signifie que la couleur de la bordure sera toujours la même que celle du texte. En hériter ainsi permet d’employer abbr en toutes circonstances, sans devoir se préoccuper de redéfinir la couleur dans chacun des cas où le texte en change.
  • Utiliser une valeur spécifiée en em — ici .1em — permettra à l’épaisseur de la bordure d’être proportionnelle à la taille de la police, petite ou grande, ce qui aidera celles et ceux qui ont une mauvaise vue.
  • Fixer la valeur du curseur à help [2] indique à l’utilisateur qu’il peut interagir avec la balise, et qu’à la différence du lien hypertexte standard, il n’est pas nécessaire de cliquer pour accéder à l’information, qui se déploie en infobulle au survol.
  • Pour ne pas signaler toutes les abréviations, mais seulement celles dûment pourvues d’une information complémentaire, utilisez un sélecteur d’attribut [title] (qui n’est pas supporté par IE6 mais ça tombe bien).

Pour faire encore mieux (ou pas)

  • Certains ajoutent text-decoration: none; pour éviter le soulignement en plus de la bordure pointillée... Il n’y a pas de raison de faire cela.
  • Ne forcez pas l’affichage en small-caps, très joli, mais abusif, car peu d’abréviations doivent s’écrire en capitales.
  • La balise <abbr> est ignorée dans les vieux navigateurs comme Internet Explorer 6, pour lesquels il faut prévoir une rustine [3]. Dans ce cas, souvenez-vous que la valeur dotted n’est pas comprise par IE6, qui l’interprète comme dashed. Mais est-ce vraiment une raison pour coller dashed partout par défaut ?
  • Il n’est pas possible de modifier l’apparence de l’infobulle générée par l’attribut title via CSS.

- N’oubliez pas l’impression et les écrans tactiles qui n’affichent pas d’infobulle au survol. Pour eux, explicitez éventuellement l’abréviation en affichant le title à sa suite, par exemple comme ceci [4] :

@media print, handheld, only screen and (max-device-width:480px) {
  abbr[title]:after { content: " ("attr(title)")"; }
  abbr {  border-bottom: 0; }
}

Attention, le résultat peut être très, voire trop verbeux !
Utilisez ce balisage avec parcimonie.

- Plus besoin de s’embêter à distinguer les acronymes des autres abréviations, puisque l’évolution du langage HTML simplifie tout cela : seul subsiste <abbr> en XHTML2 et HTML5. Si ça vous défrise la sémantique, rappelez-vous simplement, comme le dit Jeremy Keith dans HTML5 pour les web designers, que tous les acronymes sont des abréviations, mais que toutes les abréviations ne sont pas des acronymes. Cependant, pour rester compatible avec HTML4 et XHTML1, on continuera de définir de même l’élément acronym.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 30 mars 2011 à 10:09, par Nico En réponse à : Signaler les abréviations

    A noter, si l’on veut styler l’infobulle, il existe des options via Jquery, cherchez Jquery tooltip, tipsy, il y a des options intéressantes.

  • Le 30 mars 2011 à 10:21, par Stéphane Deschamps En réponse à : Signaler les abréviations

    J’ai une mauvaise nouvelle : je ne connais pas de revue d’écran qui tire parti du title du abbr.

    Donc un coup de JS sera plus utile qu’une CSS de :after si on intervient dans un contexte où l’accessibilité liée à la mal- et non-voyance est importante.

  • Le 30 mars 2011 à 10:22, par Stéphane Deschamps En réponse à : Signaler les abréviations

    PS : toujours aussi réjouissant de te voir faire tous ces articles de fond, j’adhère complètement à la démarche.

  • Le 30 mars 2011 à 16:21, par Florent Verschelde En réponse à : Signaler les abréviations

    Très bien pour la technique. Manque quelque éclairages sur les usages pertinents de ABBR. Ce n’est pas parce que la spec fournit un élément que c’est une bonne idée de l’utiliser partout, beaucoup, ou même tout court. :)

    Donc je me suis fendu d’un petit article en complément : Comment utiliser <abbr> en HTML Comment utiliser <abbr> en HTML. En résumé, je trouve tout à fait défendable de ne pas l’utiliser du tout (ou alors ponctuellement pour des abréviations peu communes qui ne peuvent pas être réécrites en un texte plus simple), et j’estime que l’utiliser beaucoup est une perte de temps et ouvre la porte à pas mal de fautes de rédaction.

  • Le 30 mars 2011 à 23:18, par Felipe En réponse à : Signaler les abréviations

    À propos du dernier point : si le langage HTML évolue bien avec une version 5, la version HTML 4.01 n’évolue PAS et <acronym> va continuer à exister aux côtés de <abbr>.

    Il va donc falloir continuer à s’embêter avec abbr vs acronym si l’on code en HTML 4.01 ou XHTML 1.0 ; autrement dit les changements entre HTML 4 et 5 ne concernent en rien la version 4. Pas de dépréciation envisagée.

  • Le 6 avril 2011 à 20:40, par gilcot En réponse à : Signaler les abréviations

    Le problème avec les JS est que tous les navigateurs ne l’interprètent pas... (Je ne sais pas ce qu’il en est avec les lecteurs d’écran, mais les navigateurs en mode texte —ou prfois pas— ne sont pas ECMAScript-compliant sans oublier certains anciens navigateurs qui ont leur implémentation propre —donc pas toujours compatible— de JS)
    La plupart des fureteurs web connaissant les CSS savent jouer à l’ :after

    Le balisage sémantique est toujours une perte de temps en apparence... Mais n’oublions pas que ça reste sémantique et qu’il ne faut pas se priver de respecter les règles avec des critères fallacieux :P J’estime que si on est amené à beaucoup/trop utlisiser la balise ABBR c’est surement qu’on a abusé des abréviations...

    Je pense que si : les ACRONYM sont dépréciés en HTML5. Mais je ne vois pas ce que ça change pour la norme précédente : on ne réécrit pas les DTD anciennes sous prétexte des nouvelles ! Ainsi, en HTML3.2 tu peux continuer à te battre avec les FONT si le coeur t’en dit

  • Le 6 avril 2011 à 21:30, par Romy Têtue En réponse à : Signaler les abréviations

    Oui, mon article ne traite pas du bon usage des abréviations et je remercie Florent d’avoir complété. Je suis plutôt d’avis de ne pas trop se reposer sur le balisage (abbr ou acronym) : mieux vaut prendre soin d’expliciter les abréviations dans le texte.

    Mais que faire quand on hérite d’une base de données de textes truffés de sigles abscons, dûment balisés d’abbr ou acronym, mais dont on ignore l’existence faute de signalétique ? Un coup de CSS tel que décrit ici me semble recommandable dans ce cas.

  • Le 29 novembre 2012 à 18:16, par Romy Têtue En réponse à : Signaler les abréviations

    Signalé par Véronique dans cette discussion, l’affichage sur écrans tactiles n’est pas satisfaisant : sur iPhone, le title du <abbr> ne s’affiche pas tandis que sur iPad, il s’ouvre au clic, mais impossible de le refermer… Quid des autres tablettes ?

    Pour que ça passe sur tous les supports (mobiles, lecteurs d’écran, visiteurs), la bonne pratique, recommandée par Geoffrey à la fin de son billet sur la spec HTML5 de <abbr>, reste d’expliciter l’abréviation dans le texte, en toutes lettres, comme suit :

    <p>Nous avons dernièrement beaucoup entendu parler de la Confédération française démocratique du travail (<abbr title="Confédération française démocratique du travail">CFDT</abbr>), mais pourquoi ?</p>

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom