HTML abbr : expliquer les abréviations et utiliser l’attribut title

HTML <abbr> identifie une abréviation ou un acronyme. Son attribut optionnel title peut fournir le terme complet, mais les explications essentielles doivent également apparaître dans le texte visible afin que les lecteurs puissent les comprendre sans souris.

Marquer une abréviation et expliquer son terme complet

Lorsqu’un terme technique apparaît pour la première fois, écrire le terme complet à côté de son abréviation aide les lecteurs à le comprendre. L'élément abbr identifie le texte comme une abréviation ; il ne recherche ni ne traduit automatiquement le terme complet. Vous n'avez pas besoin d'entourer chaque abréviation que votre public connaît déjà avec cet élément.

Enregistrez le document suivant sous le nom abbreviation.html et ouvrez-le dans un navigateur. La première phrase maintient l'explication visible, tandis que la seconde illustre l'attribut title.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Abréviations et termes complets</title>
</head>
<body>
  <p>Les documents web utilisent le langage HyperText Markup Language
    (<abbr>HTML</abbr>) pour définir leur structure.</p>
  <p>Autre abréviation: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

La première phrase affiche le terme complet à côté de HTML. Selon le navigateur, WWW dans la deuxième phrase peut avoir un soulignement pointillé, et le survoler peut afficher World Wide Web dans une info-bulle. Le navigateur détermine l'apparence par défaut du soulignement et de l'info-bulle, donc ce n'est pas une fonctionnalité de conception qui garantit un résultat visuel cohérent.

Que doit contenir l'attribut title ?

L'attribut title sur abbr est facultatif. Si vous l'utilisez, incluez le terme complet représenté par cette abréviation, sans texte promotionnel ni explications non liées. Une valeur de title sur un élément abbr ne s'applique pas automatiquement aux autres éléments abbr dans le même article. Si vous supprimez title de l'exemple, l'abréviation visible WWW reste.

Ne confondez pas l'attribut global title avec l'élément title du document. L'attribut title sur abbr fournit des informations supplémentaires sur cette abréviation ; l'élément title dans l’élément head du document fournit le titre de la page.

Ne vous fiez pas uniquement à une info-bulle

Les écrans tactiles ne permettent pas de survol de la souris, et l'accès aux informations de title varie également avec la navigation au clavier et les technologies d'assistance. Si une explication est nécessaire pour comprendre une abréviation, rendez-la visible dans le texte, comme dans la première phrase de l'exemple. Rendez le contenu lui-même lisible plutôt que de transformer abbr en un arrêt de tabulation ou un bouton inutile juste pour afficher une info-bulle.

Si l’explication est longue, rédigez-la près de la première occurrence ou ajoutez un lien vers une définition. Tenez compte de la fluidité de lecture avant de répéter le terme complet dans l’attribut title si le même paragraphe l’explique déjà. La référence MDN de l’élément abbr présente les conditions d’utilisation et les considérations d’accessibilité.