Créer un hyperlien

Dans cet article, nous verrons comment créer des liens accessibles et utiles au référencement.

Prérequis :	Vous devriez, au préalable, savoir comment créer un document HTML simple. Il peut également être judicieux de se familiariser avec les URL et la notion d'hyperliens.
Objectifs :	Savoir comment mettre en place des liens accessibles et utiles au référencement.

La création de liens est une compétence clé sur le web. Dans cet article, nous verrons en détails l'élément <a> et comment l'utiliser pour créer des liens forts.

Comment créer un lien

Pour fabriquer un lien, vous aurez a minima besoin d'une cible et d'un texte :

cible: L'URL de la destination du lien (par exemple, "https://www.mozilla.org/firefox/products/")
texte: Le texte qui décrit la destination offerte par le lien (dans le cas de l'exemple précédent, on pourrait écrire « Cette page présente les différents produits Firefox !")

Le texte sera placé entre les balises <a> et la cible sera la valeur de l'attribut href. Mis bout à bout, on obtient ce code :

<a href="https://www.mozilla.org/firefox/products/">
  Cette page présente les différents produits Firefox !
</a>

Cela affichera, sur la page web, le lien suivant :

Cette page présente les différents produits Firefox !

Astuce : Pour transformer une image en un lien, il suffit de placer l'élément de l'image entre les balises <a>.

L'attribut alt de l'image ne doit pas seulement décrire l'image (« c'est une flèche vers la droite »), mais doit également indiquer aux visiteurs ce qui se produit en suivant le lien (« lire le prochain billet »). Ce tutoriel explique comment insérer des images dans une page web.

Les ancres d'une page

Il est également possible de créer un lien qui pointe vers un endroit spécifique d'un document. Cet endroit est appelé une ancre.

Ajoutez un attribut id à l'élément cible. Par exemple, changez <h2> en <h2 id="les-ancres">.
Dans l'URL du lien, placée dans l'attribut href, ajoutez l'identifiant précédé d'un dièse (#) : <a href="https://www.exemple.com/index.html#les-ancres">

Astuce : La plupart du temps, les visiteurs d'un site s'attendent à ce qu'un lien ouvre une nouvelle page au début de celle-ci (plutôt qu'à un endroit donné, au sein de la page). Certains visiteurs peuvent donc être désorientés lorsqu'ils suivent un lien avec une ancre.

Si vous utilisez des liens avec des ancres, essayez de les mettre en forme afin que les visiteurs du site puissent les reconnaître. Si vous utilisez des ancres entre les pages d'un de vos sites, vous pouvez utiliser JavaScript pour créer un effet de défilement doux.

Créer un lien vers une ressource à télécharger

Il peut arriver qu'un lien soit utilisé pour télécharger un fichier plutôt que d'ouvrir une nouvelle page. L'attribut download peut être utilisé pour fournir un nom par défaut, à donner au fichier. Voici un exemple de lien de téléchargement pour télécharger Firefox 39 pour Windows :

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=fr"
   download="installateur-firefox-39.exe">
  Téléchargez Firefox
</a>

Écrire des liens accessibles

Ajouter des liens à une page est plutôt facile mais ce n'est pas tout. Les liens de vos pages doivent être accessibles à tous vos lecteurs, quel que soit le contexte de lecture et les outils qu'ils utilisent. Les visiteurs qui utilisent des lecteurs d'écran peuvent vouloir sauter de lien en lien, le texte d'un lien doit donc être compréhensible. Voici quelques règles et bonnes pratiques à mettre en œuvre.

Le texte d'un lien doit être compréhensible seul

Les visiteurs qui utilisent des lecteurs d'écran passent de lien en lien. Les moteurs de recherche utilisent le texte des liens pour indexer les pages ciblées. Certains visiteurs regardent les liens plutôt que les autres textes. Pour ces raisons, le texte d'un lien doit avoir un sens sans aucun autre contexte.

Note : Dans notre exemple, le texte du lien commence par un verbe d'action. Cela permet au lecteur de sentir une progression dans ces actions et plus généralement de préciser le rôle du lien.

Texte compréhensible : Télécharger Firefox

<a href="https://firefox.com/">
  Télécharger Firefox
</a>

Mauvais exemple : Cliquez ici pour télécharger Firefox

<a href="https://firefox.com/">
  Cliquez ici
</a>
pour télécharger Firefox

N'ajoutez pas « lien vers » dans le texte du lien

Cela n'apporte aucune plus-value. Les lecteurs d'écran indiquent que l'élément est un lien. Les visiteurs qui utilisent directement un navigateur voient que c'est un lien grâce au soulignement et à sa couleur distinctive (et c'est également pour cette raison qu'il ne faut pas retirer la mise en forme d'un lien).

Bon exemple : En savoir plus sur Firefox OS

<a href="https://developer.mozilla.org/Firefox_OS">
  En savoir plus sur Firefox OS
</a>

Mauvais exemple : Voici un lien sur Firefox OS

Voici un
<a href="https://developer.mozilla.org/Firefox_OS">
  lien sur Firefox OS
</a>

Indiquez la cible du lien plutôt que de copier-coller une URL

Les URL sont illisibles, encore plus lorsqu'elles sont lues par un lecteur d'écran, lettre par lettre.

Bon exemple : Candidatez pour un stage chez Mozilla

<a href="https://careers.mozilla.org/university/">
  Candidatez pour un stage chez Mozilla
</a>

Mauvais exemple : https://careers.mozilla.org/university/

<a href="https://careers.mozilla.org/university/">
  https://careers.mozilla.org/university/
</a>

Le texte d'un lien doit être concis

Les longs textes de lien font perdre en lisibilité et ralentissent la navigation avec les lecteurs d'écrans.

Bon exemple : Voici une page où vous pouvez télécharger Firefox

Voici une page où vous pouvez
<a href="https://www.mozilla.org/firefox/all/">
  télécharger Firefox
</a>

Mauvais exemple : Voici une page où vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents

Voici une page où
<a href="https://www.mozilla.org/firefox/all/">
  vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents
</a>

Indiquez à quoi correspond la cible du lien

Cela peut paraître évident mais on rencontre parfois des liens dont les textes n'ont rien à voir avec la destination. Soyez explicite, cela simplifiera la navigation pour vos lecteurs et améliorera votre référencement.

Bon exemple : Téléchargez Firefox, le navigateur développé par Mozilla : stable, sûr et rapide.

Mauvais exemple : Voici une autre application qui améliorera votre navigation sur le Web.

Perfectionner ses liens

Faites attention à l'ordre de navigation grâce aux tabulations: De nombreuses personnes utilisent le clavier pour naviguer sur une page web. La touche de tabulation est une des seules méthodes permettant de passer d'un lien à un autre. Par défaut, l'ordre de cette navigation correspondra à celui du document HTML. Toutefois, il est possible de surcharger cet ordre grâce à l'attribut tabindex. Attention toutefois à bien utiliser CSS pour que l'ordre visuel (ou celui déterminé par un lecteur d'écran) soit logique pour le lecteur.
Gardez des liens suffisamment grands: Assurez-vous que vos liens puissent être déclenchés facilement, à la souris ou au toucher. CSS peut être utilisé pour cela. Une recherche basée sur l'expérience des utilisateurs indique que les liens devraient mesurer 72 pixels (45px étant la taille minimale). Attention à ne pas oublier ce point, notamment si vous utilisez une souris ou un pad sur votre poste de travail.
Soulignez les liens et uniquement les liens: Lorsque les visiteurs d'un site voient un texte souligné, ils s'attendent à ce que ce texte soit un lien. Pour cette raison, ne soulignez que les liens. Il n'est pas strictement nécessaire de souligner les liens mais la couleur ne suffira pas pour indiquer qu'un texte est un lien.
Utilisez une couleur distincte et identifiable pour vos liens: Le bleu est utilisé par défaut pour les liens. Vous pouvez utiliser une autre couleur mais celle-ci doit former un contraste suffisant avec l'arrière-plan.
Utilisez une mise en forme distincte pour les liens inhabituels: Utilisez CSS pour indiquer aux visiteurs que le lien a un comportement spécifique (un lien externe, un lien qui ouvre une page dans un nouvel onglet, un lien qui ouvre une page dans une autre langue). Voir également hreflang). Sur MDN, par exemple, on ajoute un symbole devant les liens externes (par exemple l'article de Wikipédia sur Firefox OS).
Fournissez des cibles et des textes pour tous les liens: S'il n'y a pas de texte, il ne sera pas possible de voir le lien et les lecteurs d'écran diront juste « lien fin lien ». S'il n'y a pas de cible (pas de href ou un href vide ou href="#"), le lien ne mènera nulle part.

En savoir plus

La documentation sur l'élément <a> dans la référence HTML.