Aria-label vs title : quelle différence et quand les utiliser

La confusion entre aria-label et l'attribut title est fréquente chez les développeurs. Bien qu'ils puissent sembler servir un objectif similaire, ils ont des comportements très différents en matière d'accessibilité. Ce guide clarifie quand et comment utiliser chacun.

La différence fondamentale

La distinction clé est simple :

• aria-label : Pour les technologies d'assistance (invisible à l'écran)
• title : Pour les utilisateurs voyants (infobulle au survol)

Ces deux attributs servent des publics différents et ne sont pas interchangeables.

L'attribut aria-label en détail

Ce qu'il fait

aria-label définit une chaîne de texte qui devient le nom accessible de l'élément. Ce texte est lu par les lecteurs d'écran mais n'apparaît pas visuellement.

<button aria-label="Fermer la fenêtre">
  <svg><!-- icône X --></svg>
</button>

Le lecteur d'écran annoncera : "Fermer la fenêtre, bouton"

Quand l'utiliser

• Boutons avec icônes seules : Quand aucun texte visible n'est présent
• Liens dont le texte est ambigu : "Cliquez ici", "En savoir plus"
• Éléments de navigation : Pour distinguer plusieurs navs
• Composants interactifs : Quand le contexte visuel n'est pas suffisant

Exemples corrects

<!-- Bouton avec icône seule -->
<button aria-label="Rechercher">
  <svg aria-hidden="true"><!-- loupe --></svg>
</button>

<!-- Navigation distincte -->
<nav aria-label="Navigation principale">...</nav>
<nav aria-label="Navigation secondaire">...</nav>

<!-- Lien ambigu -->
<a href="/produit/123" aria-label="En savoir plus sur le Produit XYZ">
  En savoir plus
</a>

Comportement important

aria-label remplace tout autre texte accessible de l'élément :

<!-- Le lecteur dira "Fermer" et non "X" -->
<button aria-label="Fermer">X</button>

[!NOTE] Si votre élément a déjà un texte visible adéquat, n'ajoutez pas aria-label. Il remplacerait ce texte au lieu de le compléter.

L'attribut title en détail

Ce qu'il fait

title affiche une infobulle (tooltip) quand l'utilisateur survole l'élément avec la souris. Certains lecteurs d'écran peuvent le lire, mais ce comportement est incohérent.

<button title="Sauvegarder vos modifications">
  Sauvegarder
</button>

Les problèmes du title

L'attribut title pose plusieurs problèmes d'accessibilité majeurs :

1. Pas d'accès clavier

L'infobulle n'apparaît qu'au survol souris. Les utilisateurs clavier ne la voient jamais.

2. Inaccessible sur mobile

Les écrans tactiles n'ont pas de concept de "survol". Le contenu du title est invisible.

3. Lecture incohérente par les lecteurs d'écran

Selon le lecteur et sa configuration :

• Certains ne lisent jamais title
• D'autres le lisent uniquement si aria-label est absent
• D'autres l'ignorent sur certains types d'éléments

4. Disparition rapide

L'infobulle disparaît après quelques secondes, insuffisant pour les utilisateurs qui lisent lentement.

Quand title peut être utilisé

Le title convient uniquement pour des informations supplémentaires non essentielles :

<!-- Information additionnelle, pas critique -->
<abbr title="Référentiel général d'amélioration de l'accessibilité">
  RGAA
</abbr>

Même ici, une alternative visible est souvent préférable.

Comparaison directe

La hiérarchie des noms accessibles

Les technologies d'assistance déterminent le nom accessible d'un élément selon cet ordre de priorité :

1. aria-labelledby (référence à un autre élément)
2. aria-label (chaîne directe)
3. Contenu texte de l'élément (pour les boutons, liens)
4. <label> associé (pour les champs de formulaire)
5. alt (pour les images)
6. title (dernier recours)

<!-- Ordre de priorité -->
<button aria-labelledby="autre-élément" aria-label="Label direct" title="Title">
  Texte visible
</button>
<!-- Le lecteur dira ce qui est dans l'élément #autre-élément -->

Le title n'est consulté que si aucune autre méthode n'a fourni de nom accessible.

Bonnes pratiques

Privilégiez le texte visible

La meilleure accessibilité vient du texte visible par tous :

<!-- Optimal -->
<button>
  <svg aria-hidden="true"><!-- icône --></svg>
  Rechercher
</button>

<!-- Moins bon (mais acceptable) -->
<button aria-label="Rechercher">
  <svg aria-hidden="true"><!-- icône --></svg>
</button>

Utilisez aria-labelledby pour référencer du texte existant

Si le texte existe déjà dans la page, référencez-le :

<h2 id="titre-section">Nos produits</h2>
<nav aria-labelledby="titre-section">
  <!-- Navigation des produits -->
</nav>

Réservez aria-label aux éléments interactifs

aria-label fonctionne principalement sur :

• Boutons
• Liens
• Champs de formulaire
• Landmarks (nav, main, aside...)
• Widgets ARIA

Il ne fonctionne pas ou mal sur les éléments non interactifs comme <div> ou <span>.

[!TIP] Consultez notre guide complet sur aria-label et aria-labelledby pour approfondir le sujet.

N'utilisez pas title pour les informations essentielles

Si l'information est importante, elle doit être accessible à tous :

<!-- Mauvais : information essentielle cachée dans title -->
<button title="Cette action supprimera définitivement vos données">
  Supprimer
</button>

<!-- Bon : information visible -->
<div>
  <button>Supprimer</button>
  <p class="warning">Cette action supprimera définitivement vos données.</p>
</div>

Cas spécifiques

iframe

Pour les iframes, title est effectivement utilisé pour le nom accessible :

<iframe
  src="/widget"
  title="Formulaire de contact"
></iframe>

Mais aria-label fonctionne aussi et peut être préféré :

<iframe
  src="/widget"
  aria-label="Formulaire de contact"
></iframe>

Images

Pour les images, utilisez alt, pas aria-label ni title :

<!-- Correct -->
<img src="produit.jpg" alt="Chaise de bureau ergonomique noire">

<!-- Incorrect -->
<img src="produit.jpg" aria-label="Chaise de bureau ergonomique noire">

Champs de formulaire

Privilégiez l'élément <label> :

<!-- Optimal -->
<label for="email">Adresse email</label>
<input type="email" id="email">

<!-- Acceptable si label impossible visuellement -->
<input type="email" aria-label="Adresse email">

<!-- Insuffisant -->
<input type="email" title="Adresse email">

Combinaison aria-label et title

Vous pouvez utiliser les deux sur le même élément pour des objectifs différents :

<button
  aria-label="Supprimer cet article"
  title="Supprimer"
>
  <svg><!-- icône corbeille --></svg>
</button>

• Les lecteurs d'écran diront : "Supprimer cet article, bouton"
• Les utilisateurs souris verront l'infobulle : "Supprimer"

Cependant, cette approche est rarement nécessaire. Un texte visible est presque toujours préférable.

Erreurs courantes

Utiliser title comme seul moyen d'étiquetage

<!-- Insuffisant -->
<input type="search" title="Rechercher">

<!-- Correct -->
<input type="search" aria-label="Rechercher sur le site">

aria-label sur du texte visible déjà correct

<!-- Inutile et potentiellement confus -->
<a href="/contact" aria-label="Contact">Contact</a>

<!-- Le texte suffit -->
<a href="/contact">Contact</a>

title pour des informations importantes

<!-- L'information est inaccessible à beaucoup -->
<span title="obligatoire">*</span>

<!-- Meilleur -->
<span aria-hidden="true">*</span>
<span class="sr-only">obligatoire</span>

Résumé

Conclusion

La règle d'or est simple : aria-label est pour l'accessibilité, title est pour l'UX visuelle. Ne comptez jamais sur title pour transmettre une information essentielle, car une grande partie de vos utilisateurs ne la verra pas.

Privilégiez toujours le texte visible quand c'est possible. Quand ce n'est pas le cas, aria-label est votre meilleur allié pour garantir une expérience accessible. Réservez title aux informations véritablement supplémentaires que seuls les utilisateurs souris ont besoin de voir.

Lancez un audit RGAA pour vérifier que vos éléments interactifs ont tous un nom accessible adéquat.