Différence entre alt, aria-label et title

Trois attributs, trois usages, beaucoup de confusion. alt, aria-label et title ont chacun une fonction précise. Les mélanger dégrade l’accessibilité, n’apporte rien en SEO et complique inutilement le code. Décryptage clair et concentré.

Dans la vaste famille des attributs HTML, certains jouent les utilitaires discrets mais essentiels. Parmi eux, alt, aria-label et title constituent un trio souvent assez mal compris et mal utilisé, chacun répond à une intention différente.

alt est spécifié à l’origine même des premières pages web : dès le brouillon HTML 1.2 en 1993, il a été introduit pour permettre aux navigateurs textuels (ou aux connexions très lentes de l’époque) de substituer une description textuelle à une image.
aria-label arrive bien plus tard, avec l’apparition des interfaces dynamiques et d’éléments interactifs Javascript. Il émane de la spécification WAI-ARIA, dont la première version publique date de 2006.
title, lui, se place dans un entre-deux, héritier d’un web plus visuel, souvent utilisé pour ajouter de l’information au survol, mais sans vraies garanties pour l’accessibilité.

Comprendre leurs origines, leurs intentions et leurs limites, c’est poser les bases d’un HTML plus clair, plus accessible. Petit décryptage de ce trio : pour savoir quand et comment bien les utiliser.

`alt` : l’alternative textuelle à l’image

alt sert uniquement à remplacer une image quand elle ne peut pas être vue . Un lecteur d’écran le lit. Google et les agents des moteurs de recherche l’utilisent pour comprendre le contenu, le sens de l’image.

Quelques règles simples :

Une image porteuse d’information et de sens doit avoir un alt descriptif.
Une image strictement décorative doit avoir une valeur vide alt="".
Pas besoin de surcharger l’explication du rôle de l’image : “image de”, “photo de”.

Exemples :

<img src="icone-boussole.svg" alt="Boussole de navigation">
<img src="pattern.svg" alt="">

`aria-label` : nommer un élément lorsque rien n’est visible

aria-label donne un nom accessible à un élément interactif qui n’a pas de texte visible. Bouton icône, lien réduit à un pictogramme, toggle… C’est sa zone d’action.

Points importants :

S’applique avant tout aux éléments interactifs .
Utile quand il n’existe aucun texte visible ou que ce texte est ambigu.
Si un label visible existe déjà, inutile de le doubler.

Exemple :

<button aria-label="Ouvrir le menu">
  <svg ...></svg>
</button>

`title` : une info secondaire, pas un attribut d’accessibilité

title affiche une infobulle au survol souris . C’est sa seule vraie fonction. Il est ignoré ou lu de manière très inégale par les lecteurs d’écran. Il n’améliore pas le SEO. Il n’est pas fiable.

Bref : un attribut à usage secondaire, jamais obligatoire.

Exemple :

<a href="/tarifs" title="Voir les tarifs en détail">Tarifs</a>

Comparaison rapide

Attribut	Rôle réel	Accessibilité	SEO	Cas d’usage
`alt`	Remplacer l’image	Oui	Oui	Image informative
`aria-label`	Nommer un élément sans texte	Oui	Non	Icônes interactives
`title`	Infobulle	Faible	Non	Info complémentaire

Les pièges courants

Ajouter aria-label partout “pour faire accessible et propre”.
Ajouter title dans l’idée d’améliorer le SEO.
Doubler un texte visible avec un aria-label.
Écrire un alt trop long ou sans lien avec le contexte.
Laisser un alt vide sur une image utile (ou inversement).

Exemples concrets

Image purement décorative

<img src="bg-texture.png" alt="">

Bouton icône

<button aria-label="Fermer la fenêtre">
  <svg ...></svg>
</button>

Lien icône seul

<a href="/recherche" aria-label="Rechercher">
  <svg ...></svg>
</a>

Lorsque les trois cohabitent

<a href="/profil" aria-label="Ouvrir votre profil" title="Profil">
  <img src="avatar.webp" alt="">
</a>

Dans cet exemple :

alt="" → image décorative.
aria-label → nom réel du lien.
title → info secondaire, qui permet affichage infobulle navigateur (mais non essentielle).

En bref

alt décrit un visuel.
aria-label compense l’absence de texte visible.
title ajoute une info non essentielle, pour afficher une info au survol sur l’élément.

Ces attributs, bien réglés, et maitrisés permettent : code cohérent et une interface plus claire.