Lien image

Un lien image est un lien dont le seul contenu cliquable est une image. Son alternative textuelle (l'attribut alt) devient l'intitulé du lien pour les lecteurs d'écran. Si le alt est absent ou décrit l'apparence au lieu de la destination, le lien devient inutilisable.

L'icône du panier qui ouvre la boutique, le logo qui ramène à l'accueil : dès qu'un lien ne contient qu'une image, c'est un lien image. Et c'est le type de lien le plus souvent mal codé. Le rapport WebAIM Million 2025 classe les images sans alt parmi les défauts d'accessibilité les plus fréquents sur le web.

#Le alt ne décrit pas l'image, il décrit le lien

Quand une image est seule à l'intérieur d'un <a>, son attribut alt devient l'intitulé du lien. Le tutoriel du W3C sur les images fonctionnelles pose la règle : le alt doit indiquer où mène le lien ou quelle action il déclenche. Pas à quoi ressemble l'image.

<!-- Correct : le alt décrit la destination -->
<a href="/"><img src="logo.svg" alt="Accueil"></a>
 
<!-- Incorrect : le alt décrit l'image -->
<a href="/"><img src="logo.svg" alt="Logo de l'entreprise"></a>

Un lecteur d'écran annonce « lien, Accueil » dans le premier cas. « lien, Logo de l'entreprise » dans le second. L'utilisateur sait où il va dans un cas. Pas dans l'autre.

Même logique pour une icône d'impression : le alt sera « Imprimer cette page » et non « Icône d'imprimante ».

#Et les icônes SVG ?

Les icônes SVG inline n'ont pas d'attribut alt. Un <svg> seul dans un <a> produit un lien sans nom accessible. Deux options : poser un aria-label sur le lien, ou insérer du texte masqué visuellement.

<a href="/profil" aria-label="Mon profil">
  <svg aria-hidden="true"><!-- icône --></svg>
</a>

Quand un lien contient à la fois une image et du texte, c'est un lien composite : les règles changent et le alt de l'image est souvent laissé vide pour éviter la redondance.

#Trois erreurs qui rendent un lien invisible

alt absent. Le lien existe, mais personne ne sait où il mène. Les lecteurs d'écran se rabattent sur le nom du fichier (logo_v3_final_crop.png) ou l'URL de destination.

alt descriptif au lieu de fonctionnel. « Icône de loupe » au lieu de « Rechercher ». La technique H30 des WCAG exige que l'intitulé décrive la destination, pas l'apparence.

alt en double dans un lien mixte. L'image et le texte disent la même chose. Le lecteur d'écran répète l'information.

#En résumé

Le alt d'un lien image répond à « où mène ce lien ? », pas à « à quoi ressemble cette image ? ». Seul contenu du lien, il porte toute la charge d'intitulé. Si le lien contient aussi du texte, l'image prend un alt vide.