aria-label : définition, exemples et bonnes pratiques (2026)

aria-label est un attribut HTML qui donne un nom à un élément quand son contenu visible ne suffit pas à le nommer. Ce nom n'apparaît pas à l'écran : il est lu par les lecteurs d'écran et les logiciels de commande vocale. Le cas d'école est le bouton qui ne contient qu'une icône, une croix ou un « burger ».

Il est aussi facile à mal utiliser : mal placé, il masque le texte affiché au lieu de le compléter. Dans cet article, on vous montre la syntaxe avec des exemples corrects, les cas où aria-label ne fonctionne pas, comment choisir entre aria-label, aria-labelledby et aria-describedby, et comment l'ajouter dans Webflow.

Article publié en 2022, entièrement mis à jour le 6 octobre 2026.

Qu'est-ce qu'un aria-label ?

ARIA (Accessible Rich Internet Applications) est une spécification du W3C qui ajoute au HTML des rôles, des états et des propriétés destinés aux technologies d'assistance. La version de référence est WAI-ARIA 1.2, recommandation du W3C depuis le 6 juin 2023. La version 1.3 est encore un brouillon de travail (dernière publication le 4 juin 2026).

aria-label est l'une de ces propriétés. Sa valeur devient le nom accessible de l'élément : ce qu'un lecteur d'écran annonce, suivi du rôle. Pour le bouton ci-dessous, il annonce par exemple « Fermer, bouton ».

html

<button type="button" aria-label="Fermer">
  <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
    <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

L'icône porte aria-hidden="true" : elle est décorative, le nom vient de aria-label. C'est l'exemple que donne MDN.

La syntaxe d'aria-label en HTML : 4 exemples corrects

Un bouton menu

html

<button type="button" aria-label="Menu" aria-expanded="false" aria-controls="menu-principal">
  <svg aria-hidden="true" focusable="false" width="24" height="24" viewBox="0 0 24 24">
    <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

aria-expanded indique si le menu est ouvert. Il doit passer à true à l'ouverture, par script. S'il reste bloqué à false, le lecteur d'écran annonce un menu fermé alors qu'il est ouvert.

Deux zones de navigation sur la même page

html

<nav aria-label="Principale">…</nav>
<nav aria-label="Pied de page">…</nav>

Le lecteur d'écran annonce déjà « navigation » : le nom sert à distinguer les deux zones. Inutile d'écrire « Navigation principale ».

Un lien « En savoir plus »

html

<a href="/fr/services/maintenance" aria-label="En savoir plus sur la maintenance">En savoir plus</a>

Le nom commence par le texte visible. C'est ce qu'exige le critère 2.5.3 des WCAG 2.2 (niveau A) : une personne qui pilote son ordinateur à la voix dit « En savoir plus », et le lien doit répondre à ce nom.

Une autre solution, souvent meilleure, ajoute la précision dans le lien sans la montrer à l'écran :

html

<a href="/fr/services/maintenance">En savoir plus<span class="sr-only"> sur la maintenance</span></a>

css

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Un champ de recherche

Le meilleur nom pour un champ reste un <label> visible :

html

<label for="recherche">Rechercher dans le blog</label>
<input type="search" id="recherche" name="q">

Si la maquette n'a pas de libellé visible, aria-label prend le relais :

html

<input type="search" name="q" aria-label="Rechercher dans le blog">
<button type="submit">Rechercher</button>

Le piège : aria-label remplace ce qui est affiché

aria-label a priorité sur le texte d'un lien ou d'un bouton, sur l'alt d'une image et sur le <label> d'un champ (MDN). Le texte affiché n'est alors plus du tout annoncé. C'est une erreur fréquente :

html

<!-- À éviter : le lien est annoncé « Cliquez ici », pas « Prendre rendez-vous » -->
<a href="/fr/contact" aria-label="Cliquez ici">Prendre rendez-vous</a>
<!-- À éviter : le rôle est répété (« Bouton fermer, bouton ») -->
<button type="button" aria-label="Bouton fermer">…</button>

Sur un élément qui affiche déjà un texte clair, ne mettez pas d'aria-label. Et n'écrivez jamais le rôle dans le nom (« bouton », « lien », « image ») : le guide des pratiques ARIA du W3C le déconseille, le lecteur d'écran l'annonce déjà (ARIA Authoring Practices Guide).

Où aria-label ne fonctionne pas

WAI-ARIA 1.2 interdit de nommer certains rôles : caption, code, deletion, emphasis, generic, insertion, paragraph, presentation, strong, subscript et superscript (WAI-ARIA 1.2). Un <div> ou un <span> sans rôle a le rôle generic, un <p> le rôle paragraph :

html

<!-- À éviter : aria-label est ignoré ou mal restitué sur un div, un span ou un p -->
<div aria-label="Nos services">…</div>

En pratique, MDN indique qu'aria-label n'est pris en charge que sur les éléments interactifs, les widgets, les landmarks (nav, main, aside…), les images et les iframes. Pour titrer une section, utilisez un titre visible (<h2>), éventuellement relié par aria-labelledby.

aria-label, aria-labelledby ou aria-describedby ?

Attribut	Ce qu'il fait	À utiliser quand	Attention
`aria-label`	donne un nom en texte libre	aucun texte visible ne peut servir de nom (icône seule)	remplace le texte visible, l'`alt` et le `<label>`
`aria-labelledby`	construit le nom à partir d'un ou plusieurs éléments, par leur `id`	le nom est déjà affiché (titre d'une modale, d'une section)	prioritaire sur `aria-label` ; les `id` doivent être uniques
`aria-describedby`	ajoute une description, annoncée après le nom	consigne, format attendu, message d'erreur	ne remplace pas le nom
`aria-hidden="true"`	retire l'élément de ce que lisent les technologies d'assistance	icône décorative, doublon d'un texte	jamais sur un élément qui peut recevoir le focus
`aria-description`	ajoute une description en texte libre	—	encore au stade de brouillon (ARIA 1.3) : préférez `aria-describedby`

Le navigateur calcule le nom dans cet ordre : aria-labelledby s'il existe, puis aria-label, puis le nom natif (<label>, alt, <legend>, <caption>), puis le contenu de l'élément, et en dernier recours title ou placeholder (APG). Mettre aria-label et aria-labelledby sur le même élément ne sert donc à rien.

aria-labelledby : réutiliser un texte affiché

Une modale reprend son titre comme nom :

html

<dialog aria-labelledby="titre-modale">
  <h2 id="titre-modale">Prendre rendez-vous</h2>
  …
</dialog>

Un lien peut aussi combiner son propre texte et le titre de sa section, en se citant lui-même. C'est le schéma proposé par l'APG :

html

<h2 id="titre-maintenance">Maintenance Webflow</h2>
<a id="lien-maintenance" href="/fr/services/maintenance" aria-labelledby="lien-maintenance titre-maintenance">En savoir plus</a>

Le lien s'appelle « En savoir plus Maintenance Webflow », et son nom commence bien par le texte visible.

aria-describedby : ajouter une consigne

html

<label for="mdp">Mot de passe</label>
<input type="password" id="mdp" aria-describedby="mdp-aide">
<p id="mdp-aide">12 caractères minimum, dont un chiffre.</p>

Le champ s'appelle « Mot de passe » ; la consigne est lue ensuite. Et elle reste visible pour tout le monde.

Les bonnes pratiques

Le HTML natif d'abord. Un <button> plutôt qu'un <div role="button">, un <label> plutôt qu'un aria-label. C'est la première des règles d'usage d'ARIA publiées par le W3C (Using ARIA, un document que le W3C n'actualise plus mais dont il conserve les règles).
Le texte visible ensuite. Ce qui est affiché sert à tout le monde ; aria-label ne sert qu'aux technologies d'assistance.
Un nom court : un à trois mots suffisent souvent, sans le rôle.
Si l'élément affiche du texte, le nom commence par ce texte (WCAG 2.5.3).
Une traduction dans chaque langue du site : l'APG demande de traduire les valeurs d'aria-label quand l'interface est traduite.
Jamais d'aria-hidden="true" sur un lien, un bouton ou un champ.
Un test avec un lecteur d'écran, pas seulement avec un outil automatique.

Moins d'ARIA vaut souvent mieux que plus. Le WebAIM Million 2026 a relevé plus de 133 attributs ARIA en moyenne par page d'accueil, en hausse de 27 % en un an, et les pages qui utilisent ARIA présentaient en moyenne 59,1 erreurs détectées, contre 42 pour les autres. ARIA n'est pas forcément la cause de ces erreurs : on l'ajoute souvent pour rattraper des composants mal construits. Mais il ne les corrige pas non plus.

aria-label et les WCAG 2.2

Les WCAG 2.2, recommandation du W3C depuis octobre 2023, fixent des résultats à atteindre sans imposer ARIA. aria-label est l'un des moyens d'y arriver, pour trois critères en particulier :

le critère 1.1.1 (niveau A) : tout contenu non textuel porteur de sens, comme une icône seule dans un bouton, a une alternative textuelle ;
le critère 2.5.3 (niveau A) : le nom contient le texte affiché ;
le critère 4.1.2 (niveau A) : chaque composant d'interface a un nom et un rôle que le navigateur peut transmettre.

Ces critères comptent dans les audits RGAA et pour l'European Accessibility Act, en vigueur depuis le 28 juin 2025. On détaille ce cadre (qui est concerné, quel niveau viser) dans notre article sur les bonnes pratiques d'accessibilité web.

Ajouter un aria-label dans Webflow

Dans Webflow, aria-label s'ajoute comme attribut personnalisé, dans les réglages de l'élément.

Sélectionnez l'élément dans le Designer (bouton, lien, link block, icône…).
Ouvrez le panneau Element settings (icône d'engrenage).
Dans Custom attributes, cliquez sur +.
Name : aria-label. Value : le nom, par exemple Fermer.
Publiez, puis vérifiez le résultat sur le site en ligne.

Ajout d'un aria-label sur un bouton de fermeture dans Webflow

Pour une icône décorative placée à côté d'un texte, même chemin avec Name aria-hidden et Value true, comme le recommande la checklist d'accessibilité de Webflow.

Trois situations reviennent souvent sur les sites Webflow :

Les liens vers les réseaux sociaux en pied de page, qui ne contiennent qu'une icône : un aria-label par lien, avec le nom du réseau (« LinkedIn », pas « Lien LinkedIn »).
Les listes CMS : depuis mars 2023, la valeur d'un attribut personnalisé peut être reliée à un champ de la collection, y compris dans une Collection list. Pratique pour une liste d'icônes dont le nom vient du CMS.
Les cartes d'articles avec un lien « Lire la suite » : relier aria-label au seul titre de l'article ferait perdre le texte visible du nom. Ajoutez plutôt dans le lien un texte sr-only relié au champ du titre (la classe CSS vue plus haut, à placer dans le code personnalisé du site ou dans un embed), ou faites de toute la carte un lien qui contient le titre.

Sur un site multilingue, ouvrez la version publiée de chaque langue et vérifiez que les valeurs d'aria-label sont bien traduites. Un « Close » oublié sur une page en français passe inaperçu à l'écran, mais pas au lecteur d'écran.

Comment tester vos aria-label

Dans Chrome, l'onglet Accessibility du panneau Elements affiche le nom calculé de l'élément sélectionné, dans Computed Properties (Chrome for Developers).
Avec un lecteur d'écran : NVDA, gratuit, sous Windows, ou VoiceOver, intégré à macOS et iOS. Parcourez la page à la touche Tab et écoutez ce qui est annoncé.
Avec WAVE ou axe DevTools, pour repérer les boutons et les liens sans nom.

Pour aller plus loin sur le choix de l'élément : lien ou bouton en HTML.

Notre avis

Pour nous, aria-label est un correctif de dernier recours. Sur beaucoup de sites, les défauts se situent en amont : des boutons construits avec des div, des icônes sans texte et des liens « En savoir plus » à la chaîne. Si vous corrigez d'abord la structure (vrais boutons, libellés visibles, titres), il ne reste que quelques aria-label à poser, et ils ont tous une raison d'être.

Dans Webflow, l'attribut se pose en quelques secondes, mais personne ne le voit à l'écran. Il est donc facile à oublier lors d'une mise à jour ou d'une traduction. C'est un point à intégrer à la recette de chaque mise en ligne, au même titre que les textes alternatifs. L'accessibilité fait partie de ce qu'on intègre aux sites que livre notre équipe Webflow.

Questions fréquentes

Qu'est-ce qu'un aria-label ?

Un attribut HTML qui donne un nom accessible à un élément, lu par les lecteurs d'écran mais invisible à l'écran. On l'utilise quand l'élément n'a pas de texte visible qui puisse servir de nom, typiquement un bouton qui ne contient qu'une icône.

Faut-il traduire les aria-label ?

Oui. Le guide des pratiques ARIA du W3C demande de traduire les valeurs d'aria-label quand l'interface est traduite. Un nom resté en anglais sur une page en français ne correspond plus à ce que dit l'utilisateur en commande vocale.

Quelle différence entre aria-label et aria-labelledby ?

aria-label contient le nom en texte libre. aria-labelledby pointe vers un ou plusieurs éléments de la page (par leur id) dont le texte forme le nom. Si le nom est déjà affiché, aria-labelledby est préférable. Si les deux sont présents, aria-labelledby l'emporte.

Peut-on mettre un aria-label sur un div ou un span ?

Non, sauf si l'élément reçoit un rôle qui accepte un nom (par exemple role="region" ou role="img"). Sans rôle, un div ou un span a le rôle generic, que WAI-ARIA 1.2 interdit de nommer.

aria-label aide-t-il le SEO ?

Non, il est fait pour les technologies d'assistance. Un aria-label rempli de mots-clés dégrade l'expérience des personnes qui utilisent un lecteur d'écran, sans bénéfice prouvé. Ce qui sert à la fois l'accessibilité et le référencement, ce sont des textes de liens explicites, des titres bien hiérarchisés et des textes alternatifs.