Lien composite

Un lien composite regroupe une image et du texte dans une seule balise <a>. Le navigateur calcule le nom accessible du lien en concaténant l'alternative de l'image et le texte visible. Quand l'image et le texte sont séparés en deux liens distincts, les lecteurs d'écran annoncent deux liens identiques consécutifs.

Ouvrez n'importe quel site e-commerce. Chaque fiche produit affiche une photo et un nom, tous deux cliquables vers la même page. Si la photo et le nom sont dans deux balises <a> séparées, un utilisateur de lecteur d'écran entend le même lien deux fois. Un utilisateur au clavier doit appuyer deux fois sur Tab pour traverser ce qui ressemble visuellement à un seul élément.

#Un seul <a>, plusieurs contenus

Le lien composite résout ce problème en englobant l'image et le texte dans une seule balise <a>. Le RGAA utilise ce terme pour décrire tout lien dont le contenu mêle image et texte. Côté W3C, la technique H2 recommande exactement cette approche.

Le nom accessible du lien est calculé selon l'algorithme de calcul du nom accessible : le navigateur concatène l'attribut alt de l'image et le contenu textuel du lien.

Conséquence directe : si le texte visible suffit à décrire la destination, l'image doit porter un alt vide.

<!-- Correct : un seul lien, alt vide car le texte suffit -->
<a href="/produit/chaise-ergonomique">
  <img src="chaise.jpg" alt="">
  Chaise ergonomique Modèle S3
</a>
 
<!-- Incorrect : deux liens séparés pour la même destination -->
<a href="/produit/chaise-ergonomique">
  <img src="chaise.jpg" alt="Chaise ergonomique">
</a>
<a href="/produit/chaise-ergonomique">
  Chaise ergonomique Modèle S3
</a>

Dans le premier cas, le lecteur d'écran annonce un seul lien : « Chaise ergonomique Modèle S3 ». Dans le second, il annonce deux liens distincts avec des intitulés proches. L'utilisateur au clavier subit un arrêt de tabulation supplémentaire.

#L'erreur du alt bavard

Le piège le plus courant : remplir le alt de l'image alors que le texte adjacent porte déjà l'intitulé. Le nom accessible devient alors la concaténation des deux.

<!-- Résultat annoncé : "Photo d'une chaise Chaise ergonomique Modèle S3" -->
<a href="/produit/chaise-ergonomique">
  <img src="chaise.jpg" alt="Photo d'une chaise">
  Chaise ergonomique Modèle S3
</a>

Le lecteur d'écran lit « Photo d'une chaise Chaise ergonomique Modèle S3 ». L'information utile se noie dans le bruit. Le alt ne doit pas décrire l'image en tant que telle, mais contribuer au nom accessible du lien. Si le texte visible est suffisant, alt="" est la bonne réponse.

Cas où le alt apporte une information : une icône de téléchargement suivie du texte « Rapport annuel 2025 ». L'icône peut porter alt="PDF" pour préciser le format, ce que le texte seul ne dit pas.

#En résumé

Englobez image et texte dans un seul <a>. Laissez le alt vide quand le texte visible décrit la destination. Vérifiez le nom accessible réel dans les outils de développement de votre navigateur, onglet Accessibilité : c'est ce que les technologies d'assistance restitueront.