Nom accessible

Le nom accessible est le texte que les technologies d'assistance utilisent pour identifier un élément d'interface. Le navigateur le calcule selon un algorithme du W3C, en consultant plusieurs sources dans un ordre de priorité strict : aria-labelledby, aria-label, le <label> HTML, le contenu textuel, puis l'attribut title en dernier recours.

Un bouton affiche « Envoyer ». Un lecteur d'écran annonce « Send ». L'utilisateur de contrôle vocal dit « cliquer Envoyer » et rien ne se passe. Le problème : le nom accessible du bouton ne correspond pas au texte affiché à l'écran.

#Comment le navigateur calcule le nom accessible

Le W3C publie un algorithme dédié (AccName) qui définit un ordre de priorité strict. Le navigateur vérifie ces sources une par une et s'arrête à la première qui fournit un texte :

1. aria-labelledby — référence un ou plusieurs autres éléments du DOM
2. aria-label — texte invisible posé directement sur l'élément
3. Étiquetage HTML natif — <label>, <legend>, <caption>
4. Contenu textuel — le texte à l'intérieur de l'élément
5. title — dernier recours, souvent mal restitué par les lecteurs d'écran

<!-- Nom via <label> : méthode la plus fiable pour les champs -->
<label for="email">Adresse e-mail</label>
<input id="email" type="email">
 
<!-- Nom via contenu textuel -->
<button>Envoyer</button>
 
<!-- Nom via aria-label : utile pour les boutons icônes -->
<button aria-label="Fermer la fenêtre">×</button>

La source la plus haute gagne. Si un bouton porte un aria-labelledby et un aria-label, c'est aria-labelledby qui l'emporte.

#Le piège du texte visible ignoré

Le critère WCAG 2.5.3 « Label in Name » (niveau A) exige que le nom accessible contienne le texte visible du composant. Quand ces deux textes divergent, le contrôle vocal cesse de fonctionner.

<!-- ❌ Le nom accessible ("Close") ne contient pas le texte visible ("Fermer") -->
<button aria-label="Close">Fermer</button>
 
<!-- ✅ Le nom accessible reprend le texte visible -->
<button aria-label="Fermer la fenêtre de confirmation">Fermer</button>

Autre erreur courante : poser un aria-label sur un élément qui se nomme déjà correctement. Un <button>Envoyer</button> n'a pas besoin d'aria-label. Chaque attribut ARIA ajouté sans nécessité est un point de maintenance supplémentaire et une source de décalage futur entre ce que l'écran affiche et ce que les technologies d'assistance annoncent.

#L'élément HTML natif d'abord

Pour les champs de formulaire, un <label for="..."> associé à l'id du champ reste la méthode la plus fiable. Elle fonctionne partout : lecteurs d'écran, contrôle vocal, clic sur le label qui active le champ. Réservez aria-label et aria-labelledby aux cas où le HTML natif ne suffit pas — boutons icônes, composants custom, zones de page identifiées par des landmarks.

#En résumé

Le nom accessible est ce que les technologies d'assistance « voient ». Le navigateur le calcule selon un ordre de priorité fixe défini par le W3C. Vérifiez toujours que ce nom correspond au texte visible à l'écran — c'est une exigence WCAG de niveau A. Et quand un <label> ou le contenu d'un <button> suffit, ne rajoutez pas d'ARIA.