Guide 2022 complet des liens (links)

2 Mar 2022 | Tutoriel, Web

Il y a beaucoup à apprendre sur les liens en HTML.
De l’implémentation du balisage et les attributs associés, les meilleures pratiques de style aux choses à éviter, et aux parents encore plus sophistiqués du lien : les boutons (consulter l’article dédié ici) et ce qui tout ce qui y ressemble.

Regardons de plus prêt le monde des liens et des boutons, ainsi que toutes les interactions relatives au HTML, CSS, à la conception et à l’accessibilité qui les accompagnent. Il existe de nombreux pièges et mauvaises pratiques à éviter en cours de route. En les parcourant, nous aurons une bonne mise en œuvre UX complète des deux éléments.

Les liens (Links)

Les liens (ou hyperliens) sont l’un des éléments de base les plus communs, mais aussi les plus fondamentaux et essentiels du Web. En cliquant sur un lien, vous passez à une autre page ou vous êtes déplacé à un autre endroit de la même page.

Implémentation HTML

Un lien basique

<a href="https://www.openmydiv.fr">
  OpenMyDiv
</a>

Rendu : OpenMyDiv

C’est un lien vers une URL « pleinement qualifiée » ou « absolue ».

Un lien relatif

<a href="/maintenance-informatique-site-internet/maintenance-preventive/">
  Maintenance préventive
</a>

Rendu : Maintenance préventive

Cela peut être utile, dans le cadre d’un développement par exemple, où le nom de domaine n’est pas le même qu’en production. Les URL relatives sont très utiles pour des choses comme la navigation, mais faites attention à ne pas les utiliser dans du contenu – comme des articles de blog – lorsque ce contenu peut être lu hors site, comme dans une application ou un flux RSS.

Un lien ancre

<a href="#rel-attribut">
  Section rel
</a>

Rendu : Section rel

Lien appelé aussi bien « ancre » que « lien d’évitement » ou « liens de navigation interne » comme « Aller au menu », « Accéder à la section », « Retour en haut de page ». Permettant d’accéder au premier élément dont l’ID correspond.

Commence toujours par un #. Fonctionne uniquement si l’ID correspondante existe sur la page.

Il est assez courant, d’un point de vue UI/UX, de voir un lien « Retour au début » sur les sites, en particulier lorsque les boutons de navigation et menu sont en haut de la page, mais qu’il y a beaucoup de contenu à faire défiler (ou à parcourir).
Pour créer l’ancre, créez un lien vers l’ID d’un élément en haut de votre page vers lequel il est logique de renvoyer l’attention.

Un lien désactivé

<a href="">
  Commandez ici
</a>

a:not([href]) {
  /* stylisez un lien "désactivé" */
}

Rendu : Commandez ici

Un lien sans attribut href est le seul moyen pratique de désactiver un lien. Vous avez peut-être besoin que votre lien ne devient actif qu’après la connexion ou l’inscription de l’utilisateur.
Le lien a alors aucun rôle, ne peut pas être focus et ne peut réagir avec le clavier. Il représente un emplacement où un lien aurait pu être placé, s’il avait été pertinent.

C’est une bonne pratique, pouvant éviter l’usage d’un <span> inutile.

Le lien doit-il s’ouvrir dans une nouvelle fenêtre séparée ou un nouvel onglet ?

<a href="https://www.openmydiv.fr" target="_blank" rel="noopener noreferrer">
  OpenMyDiv
</a>

Rendu : OpenMyDiv

Vous pouvez utiliser l’attribut target=“_blank“ tout seul, mais c’est vivement déconseillé. L’ajout de l’attribut rel permet de rendre plus sûr et plus rapide la navigation.
D’un point de vue accessibilité et UX, l’ouverture dans un autre onglet provoque sur mobile, une navigation contraignante et un comportement auquel l’utilisateur n’est pas prévenu.

Vous avez besoin d’un lien pour déclencher un téléchargement ?

<a href="/files/file.pdf" download>
  Download PDF
</a>

L’attribut « download » d’un lien indique au navigateur de télécharger le fichier lié plutôt que de l’ouvrir dans la page ou l’onglet en cours. C’est une bonne pratique UX.

L’attribut rel

Cet attribut sert à indiquer la relation entre le lien et la cible.

<a href="/page/3" rel="next">Next</a>
<a href="/page/1" rel="prev">Previous</a>

<a href="/topics/" rel="directory">All Topics</a>

Voici quelques exemple de son utilisation

rel=“alternate“ : Version alternative du document.
rel=“author“ : Auteur du document.
rel=“help“ : Une ressource pour aider le document.
rel=“licence“ : Licence et informations légales.
rel=“manifest“ : Document Web App Manifeste.
rel=“next“ : Document suivant dans la série.
rel=“prev“ : Document précédent dans la série.
rel=“search“ : Un document destiné à effectuer une recherche dans le document actuel.

Il existe également certains attributs rel destinés à informer les moteurs de recherche :

rel=“sponsored“ : Marquer les liens qui sont des publicités ou des placements payants (communément appelés liens payants) comme étant sponsorisés.
rel=“ugc“ : Pour le contenu généré par l’utilisateur qui n’est pas particulièrement fiable, comme les commentaires et les messages de forum.
rel=“nofollow“ : Indique au moteur de recherche d’ignorer ce lien et de ne pas associer ce site à l’emplacement vers lequel il pointe.

Et aussi quelques attributs rel qui sont plus orientés vers la sécurité :

rel=“noopener“ : Empêche un nouvel onglet d’utiliser la fonction JavaScript window.opener, qui pourrait potentiellement accéder à la page contenant le lien (votre site) pour effectuer des actions malveillantes, comme le vol d’informations ou le partage de code infecté. L’utilisation de cette option avec target=“_blank“ est souvent une bonne idée.
rel=“noreferrer“ : Empêche d’autres sites ou services de suivi (par exemple, Google Analytics) d’identifier votre page comme la source du lien cliqué.

Vous pouvez utiliser plusieurs valeurs séparées par des espaces si nécessaire (par exemple, rel=“noopener noreferrer“). Enfin, certains attributs rel proviennent de la norme microformats ou de l’indieweb, par exemple :

rel=“directory“ : Indique que la destination de l’hyperlien est une liste de répertoire contenant une entrée pour la page actuelle.
rel=“tag“ : Indique que la destination de cet hyperlien est un “tag“ (ou mot-clé/sujet) désigné par l’auteur pour la page actuelle.
rel=“paiement“ : Indique que la destination de cet hyperlien est de montrer ou de soutenir la page actuelle.
rel=“help“ : Indique que la ressource à laquelle renvoie le lien est un fichier d’aide ou une FAQ pour le document en cours.
rel=“me“ : Indique que sa destination représente la même personne ou entité que la page actuelle.

Les rôles ARIA

Le rôle par défaut d’un lien est le lien, donc vous n’avez pas besoin de faire :

<a role="link" href="/">  Lien </a>

Rendu : Lien

Devriez-vous utiliser l’attribut title ?

Pas vraiment, cela pose de gros problèmes d’accessibilité, difficilement personnalisable car lié au terminal et OS utilisé. Même pas affiché sur mobile.

Lien avec juste une icône

Si un lien a uniquement une icône à l’intérieur, il peut se présenter de cette manière :

<a href="/">😃</a>

<a href="/">
  <svg> ... </svg>
</a>

rendu : 😃
Cela ne constitue pas une information contextuelle suffisante sur le lien, en particulier pour des raisons d’accessibilité, mais potentiellement pour tout le monde.

<a href="/">
  <!-- cache l'icon des logiciels de reconnaissance visuel -->
  <svg aria-hidden="true" focusable="false"> ... </svg>
  <!-- Agis comme un label caché de la vue -->
  <span class="visu-cache">Texte utile du lien</span>
</a>

visu-cache est une classe qui permet de cacher le texte avec du CSS :

.visu-cache {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Lien autour d’une image

Une image peut être cliquable si vous l’enveloppez autour d’un lien.

<a href="https://www.openmydiv.fr/">
  <img src="/wp-content/uploads/2022/01/LOGO-full-openmydiv-agence-web-paris.webp" alt="Logo openmydiv">
</a>

rendu :

Stylisation et considérations CSS

Voici un exemple de lien brut, sans style personnalisé :

Vous pouvez donc personnaliser entièrement vos liens, la couleur, taille, forme, effet au survol, au clic…
Voici comment transformer tous vos liens en rouge :

a {
  color: red;
}
<a href="/"> Lien </a>

rendu : Lien

Cibler certain lien :

nav a { ... }

article a { .. }

États des liens

Les liens peuvent être focus. En d’autres termes, ils peuvent être sélectionnés à l’aide de la touche Tab du clavier. Les liens sont peut-être l’élément le plus courant pour lequel vous concevrez très consciemment les différents états, y compris l’état :focus.

:hover : Pour le style lorsque le pointeur de la souris se trouve sur le lien.
:visited : Pour le style lorsque le lien a été suivi, dans la mesure où le navigateur s’en souvient. La capacité de stylisation est limitée pour des raisons de sécurité.
:link : Pour le style lorsqu’un lien n’a pas été visité.
:active : Pour le style lorsque le lien est enfoncé (par exemple, lorsque le bouton de la souris est enfoncé ou que l’élément est touché sur un écran tactile).
:focus : Très important ! Les liens doivent toujours avoir un style focus. Si vous choisissez de supprimer le contour bleu par défaut que la plupart des navigateurs appliquent, utilisez également ce sélecteur pour réappliquer un style de mise au point visuellement évident.

Les états sont cumulables et vous pourriez vous retrouver avec :

a:focus:hover { ... }

Exemple de style sur le hover

a {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 120px 0 0 0 #54b3d6;
  color: white;
}

rendu : Hover ce lien