Vérifier un aria-label et le nom accessible

Comment le navigateur calcule le nom accessible

Le W3C fixe l’ordre dans la spécification AccName 1.2, complétée pour chaque élément HTML par HTML-AAM. Le navigateur prend la première source qui donne un texte, et ignore les suivantes :

1. aria-labelledby : le texte des éléments dont il cite les id, dans l’ordre, même s’ils sont masqués ;
2. aria-label, s’il n’est pas vide ;
3. le langage HTML : le label associé à un champ, l’alt d’une image, le value d’un bouton input, la legend d’un fieldset, le caption d’un tableau, le title enfant d’un svg ;
4. le contenu, pour les rôles qui l’admettent : lien, bouton, case à cocher, onglet, option, titre… Les textes masqués sont sautés, les images y entrent par leur alt ;
5. l’attribut title, en dernier recours, puis le placeholder pour un champ de saisie.

aria-label passe donc avant le contenu : il ne s’ajoute pas au texte d’un lien ou d’un bouton, il le remplace. WAI-ARIA 1.2 demande d’ailleurs de ne pas l’utiliser quand le texte existe déjà dans la page : un label pour un champ, un texte pour un bouton se voient et se lisent de la même façon pour tout le monde.

Où aria-label n’est pas fiable

WAI-ARIA 1.2 dresse la liste des rôles qui ne peuvent pas être nommés : generic (un div, un span, un lien sans href), paragraph, strong, emphasis, code, caption, deletion, insertion, subscript, superscript et presentation. Les auteurs ne doivent pas nommer ces éléments : selon le navigateur et le lecteur d’écran, un aria-label posé dessus est transmis ou non, on ne peut donc pas compter sur lui. L’outil le signale, comme un aria-labelledby dont aucun id n’existe dans le code collé, que le navigateur ignore.

Le nom doit contenir le texte visible

Une personne qui pilote son ordinateur à la voix dit « cliquer sur Demander un devis » en lisant l’écran. Si le bouton s’appelle « Contactez-nous » pour les technologies d’assistance, rien ne se passe. Le critère de succès 2.5.3 des WCAG (niveau A) demande donc que le nom contienne le texte affiché, et conseille de commencer par lui. Le RGAA le vérifie pour les liens (test 6.1.5), les étiquettes de champs (test 11.2.5), les boutons de formulaire (test 11.9.2) et les composants scripts (test 7.1.3).

La casse et la ponctuation peuvent différer. Un symbole affiché n’a pas à être repris tel quel : pour un bouton « × », le nom dit la fonction, « Fermer ». L’outil le marque « à vérifier » plutôt qu’en erreur.

Ce que l’outil ne voit pas

• La feuille de style : un texte masqué par une classe CSS ou ajouté par ::before et ::after change le nom ou le texte visible. L’outil reconnaît hidden, aria-hidden, le style en ligne et les classes courantes (sr-only, visually-hidden, screen-reader-text).
• Le reste de la page : un aria-labelledby peut viser un élément hors de l’extrait. Collez-le avec.
• Les scripts : un attribut ajouté après le chargement lui échappe. Copiez le code depuis l’inspecteur du navigateur plutôt que depuis la source.
• La pertinence : « Bouton » est un nom, mais il ne dit pas ce que fait le bouton. Relisez chaque nom hors de son contexte visuel.

Sources

Accessible Name and Description Computation 1.2 (W3C), en anglais ; WAI-ARIA 1.2, propriété aria-label, en anglais ; WAI-ARIA 1.2, rôles qui ne peuvent pas être nommés, en anglais ; HTML-AAM, calcul du nom accessible par élément HTML, en anglais ; Understanding Success Criterion 2.5.3 Label in Name (W3C), en anglais ; HTML Living Standard (WHATWG), attribut title, en anglais ; RGAA 4.1.2, critère 1.1 (alternative des images) ; RGAA 4.1.2, critère 2.1 (titre des cadres) ; RGAA 4.1.2, critère 6.1 (lien explicite) ; RGAA 4.1.2, critère 6.2 (lien avec un intitulé) ; RGAA 4.1.2, critère 7.1 (composants et scripts) ; RGAA 4.1.2, critère 11.1 (étiquette des champs) ; RGAA 4.1.2, critère 11.2 (étiquette pertinente) ; RGAA 4.1.2, critère 11.9 (intitulé des boutons) .

Page mise à jour le 11 novembre 2026.