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

Documentation3 minPublié le Mar 03, 2022Dernière mise à jour le Oct 06, 2026![Attributs aria-label dans Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/68c0328406be4386e6cd57f0_aria-label.jpg)Sommaire

[

Copied](#)[

](#)[

](#)[

](#)
- [H2 Example](#)

Résumez cet article avec une IA[

ChatGPT](#)[

Claude](#)[

Grok](#)[

Perplexity](#)[

Google AI](#)Points clés de l'article
- aria-label donne un nom accessible à un élément qui n'a pas de texte visible exploitable, typiquement un bouton qui ne contient qu'une icône
- Il remplace le texte visible, l'alt d'une image et le label d'un champ : quand l'élément affiche du texte, le nom doit commencer par ce texte (WCAG 2.5.3)
- WAI-ARIA 1.2 interdit de nommer un div, un span ou un p sans rôle : aria-label n'y sert à rien
- Texte visible et HTML natif d'abord, aria-labelledby quand le nom est déjà affiché, aria-describedby pour une consigne
- Dans Webflow, l'attribut s'ajoute dans Element settings → Custom attributes, et sa valeur peut venir d'un champ CMS
- Sur un site multilingue, chaque aria-label se traduit

`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](https://www.w3.org/TR/wai-aria-1.2/), recommandation du W3C depuis le 6 juin 2023. La version [1.3](https://www.w3.org/TR/wai-aria-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](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label).

## 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](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html) (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](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label)). 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](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/)).

## 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](https://www.w3.org/TR/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 ?

AttributCe qu'il faitÀ utiliser quandAttention`aria-label`donne un nom en texte libreaucun 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 nomconsigne, format attendu, message d'erreurne remplace pas le nom`aria-hidden="true"`retire l'élément de ce que lisent les technologies d'assistanceicône décorative, doublon d'un textejamais 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](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/)). 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](https://www.w3.org/TR/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](https://webaim.org/projects/million/) 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](https://www.w3.org/TR/WCAG22/), 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](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html) (niveau A) : le nom contient le texte affiché ;
- le critère [4.1.2](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) (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](/fr/blog/accessibilite-web-bonnes-pratiques-site).

## 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](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/68c042d5d8caf695eaa58efa_aria-label-webflow.webp)

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](https://webflow.com/accessibility/checklist).

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](https://webflow.com/updates/use-cms-data-in-custom-attributes), 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](https://developer.chrome.com/docs/devtools/accessibility/reference)).
- Avec un lecteur d'écran : [NVDA](https://www.nvaccess.org/), gratuit, sous Windows, ou VoiceOver, intégré à macOS et iOS. Parcourez la page à la touche Tab et écoutez ce qui est annoncé.
- Avec [WAVE](https://wave.webaim.org/) ou [axe DevTools](https://www.deque.com/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](/fr/blog/lien-vs-bouton-en-html-accessibilite-web).

## 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](/fr/services/agence-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.

## Sources

- [W3C : WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) · [WAI-ARIA 1.3, brouillon](https://www.w3.org/TR/wai-aria-1.3/)
- [W3C : ARIA Authoring Practices Guide, noms et descriptions](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/)
- [W3C : WCAG 2.2](https://www.w3.org/TR/WCAG22/) · [comprendre le critère 2.5.3](https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html) · [le critère 4.1.2](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html)
- [W3C : Using ARIA](https://www.w3.org/TR/using-aria/)
- [MDN : aria-label](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label)
- [WebAIM : The WebAIM Million 2026](https://webaim.org/projects/million/)
- [Webflow : utiliser les données du CMS dans les attributs personnalisés](https://webflow.com/updates/use-cms-data-in-custom-attributes) · [checklist d'accessibilité](https://webflow.com/accessibility/checklist)

[

](#)![Florian Bodelot](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a725470105160732b0a8a_florian-website-vf.webp)Florian BodelotCo-fondateur[

](/fr/team/florian-bodelot)[

](https://fr.linkedin.com/in/florian-bodelot-digidop)[

](https://twitter.com/florian_bodelot)+1200 lecteurs

## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives.

[S'inscrire

](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter

](https://digidopfr.substack.com/)

## Articles qui devraient vous intéresser

![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir

### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026

[Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir

### Webflow lance Source. Notre avis sur ce shift.

[Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir

### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA

[Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles

](/fr/blog)Les meilleurs projets web
commencent par une conversation[Discuter avec un expert

](/fr/contact)[Réserver un appel

](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)