Abrégez votre code avec la balise HTML abbr

Le HTML sémantique est un excellent moyen de transmettre le sens de votre page. Marquez le contenu abrégé avec la balise <abbr> . Et lorsque vous passez un titre, une info-bulle est créée au survol de celui-ci. Joli !

<abbr title="Today I learned">TIL</abbr> something awesome!

Style par défaut

Le style par défaut de <abbr> varie un peu d’un navigateur à l’autre. Dans Chrome et Firefox, elle est soulignée et, lorsqu’elle est survolée, une info-bulle de l’adresse suivante apparaît title que vous avez transmise.

TIL quelque chose d’impressionnant !

Styling abbr Tag

Avec sa balise unique, il rend également la personnalisation du style très facile. Vous pouvez faire quelque chose comme ceci

abbr {
  text-decoration: underline blue dotted;
  color: blue;
}

abbr:hover {
  cursor: help;
}

Survol moi pour voir mon curseur d’aide personnalisé ( ?)

En raison des variations inter-navigateurs, je vous recommande d’imposer un style personnalisé pour votre <abbr> . De cette façon, vous aurez un aspect cohérent entre les navigateurs.

abbr VS acronym

En 1997, il y avait un débat houleux sur acronym vs abbr. La guerre a commencé quand Netscape a créé le <abbr> et que Microsoft avait la balise <acronym>. Aucune des parties ne voulait bouger ! Et notre médiateur, W3Ca refusé d’intervenir et de prendre position. La bataille s’est poursuivie pendant de nombreuses années, semant la confusion chez de nombreux développeurs qui ne savaient pas trop quoi utiliser. Microsoft semble avoir un avantage avec sa présence dominante sur Internet Explorer. Mais voilà que le HTML5 débarque…

Le W3C a finalement décidé d’intervenir et a dit , « Personne ne gagne quand la famille se dispute, Nous perdons tous quand la famille se dispute, Qu’est-ce qui est mieux qu’un milliardaire ? Deux » 

Bref, pour faire court ! <acronym> est obsolète, utilisez donc <abbr>

Encapsuler abbr avec dfn

Lorsque vous définissez un terme, vous pouvez l’entourer de la balise <dfn> . Ainsi, si vous utilisez une abréviation et que vous l’expliquez, vous pouvez mélanger ces balises comme ceci :

<p>
  <dfn>
    <abbr title="Hypertext Markup Language">HTML</abbr>
  </dfn>
  is the standard markup language for documents designed to be displayed in a
  web browser.
</p>

HTML

est le langage de balisage standard pour les documents conçus pour être affichés dans un navigateur web.

Pourquoi le HTML sémantique est important

Le HTML sémantique est important car il vous permet de transmettre le sens de votre code. Je me souviens que lorsque j’ai commencé à apprendre la programmation, j’enveloppais tout mon texte dans du <div> puis j’utilisais CSS pour appliquer le style correct. Pour une personne visuelle, cela ne faisait aucune différence. L’utilisateur verrait ce que je veux qu’il voie.

Mais tout emballer dans un <div> même avec du style, ne signifie rien pour une machine. Cela signifie donc qu’une machine telle qu’un lecteur d’écran ne saurait pas comment prendre votre texte et communiquer correctement votre contenu pour une personne malvoyante. Pas plus qu’un robot de moteur de recherche, qui pense SEO savent comment explorer votre contenu et classer correctement votre site. Au fait, vous avez remarqué ce que j’ai fait là, j’ai enveloppé mon référencement dans un… <abbr>. C’est ça ! Il faut toujours appliquer ces connaissances.

En tant que développeurs, c’est notre travail de nous assurer que notre site Web ou notre application est inclusif pour tout le monde. Et la façon de le faire est d’utiliser la balise HTML sémantique appropriée. Tout comme si vous étiez un restaurant, vous ne refuseriez pas les clients qui paient (c’est vrai, c’est une question d’argent ! Les services publics ne se paient pas eux-mêmes ).

Afficher l’abréviation HTML sur les mobiles

Jusqu’à présent, je vous ai convaincu d’utiliser l’abréviation HTML <abbr>. C’est sémantique et il y a une belle infobulle quand on le survole. Avant de sabrer le champagne…il y a un petit problème.

Le problème vient du mobile. Le survol fonctionne très bien sur le bureau où il y a un dispositif de pointage. Mais une fois que vous passez à un appareil mobile, l’info-bulle du survol ne fonctionne pas. Mais ne vous inquiétez pas ! J’ai trouvé quelques solutions créatives.

Solution 1 : Afficher le terme non abrégé

Voici une solution très simple. Il suffit d’afficher le terme complet non abrégé lorsque l’écran est de taille réduite.

<abbr title="Today I learned">TIL</abbr>

Et avec CSS, nous prenons le terme non-abrégé indiqué dans la balise title et nous l’affichons sur notre page entre parenthèses.

abbr[title]::after {
  content: ' (' attr(title) ')';
}

TIL  La non-abréviation est affichée

Et nous pouvons également utiliser les requêtes médias pour nous débarrasser du terme non abrégé une fois qu’il atteint une taille d’écran plus grande.

@media screen and (min-width: 992px) {
  abbr[title]::after {
    content: '';
  }
}

Solution 2 : Affichez le terme non abrégé en tapant dessus

C’est bien d’afficher le terme non abrégé sur les écrans de petite taille. Mais nous savons tous que l’espace disponible est encore plus limité sur les appareils mobiles, et nous ne voulons pas encombrer notre écran avec du texte inutile. Dans ce cas, nous pouvons utiliser notre hover pour n’afficher le terme non abrégé que lorsqu’on le touche.

abbr[title]:hover::after {
  content: ' (' attr(title) ')';
}

TIL

Desktop : survoler pour voir la non-abréviation

Mobile : tapez pour voir la non-abréviation.

Nous pouvons encore améliorer ce point en incluant la prise en charge du clavier. Nous pouvons indiquer le abbr est focalisable dans la navigation séquentielle au clavier avec la balise tabindex="0" et déclenche ensuite notre contenu non abrégé lorsqu’il est ciblé.

<abbr title="Today I learned" tabindex="0">TIL</abbr>

abbr[title]:focus::after {
  content: ' (' attr(title) ')';
}

TIL

Utiliser la fonction onglet touche OU clic pour déclencher le focus

Solution 3 : Tooltip JavaScript

Au lieu d’utiliser les CSS, vous pouvez aussi simplement utiliser JavaScript pour déclencher une infobulle. Si vous utilisez Bootstrap, vous pouvez utiliser la fonction Info-bulles composant.

Ce serait vraiment bien s’il existait une solution native pour résoudre le problème de l’utilisation de l’ordinateur. <abbr> problèmes dans les appareils mobiles ou non pointus. Malheureusement, à l’heure actuelle, il n’y en a pas. Mais le HTML sémantique reste très important et en tant que développeurs, nous devons faire de notre mieux pour l’utiliser chaque fois que possible. Pour l’instant, nous devons simplement comprendre les problèmes et utiliser notre créativité pour les contourner. Du HTML sémantique à revendre !

Support des navigateurs