Quand utiliser aria-label, aria-labelledby, aria-describedby ou simplement du texte visible, avec 20 extraits avant et après, les erreurs fréquentes et un vérificateur de nom accessible.
N'utilisez aria-label que lorsqu'un élément n'a aucun texte visible qui le nomme, comme un bouton composé uniquement d'une icône : <button aria-label="Close dialog">. Si un texte visible le nomme déjà, appuyez-vous sur ce texte ou pointez aria-labelledby vers lui. aria-describedby ajoute une aide supplémentaire lue après le nom. Les libellés HTML natifs passent toujours en premier.
Quel outil de nommage choisir
Chaque bouton, lien, champ et landmark a besoin d'un nom accessible, la courte expression que les technologies d'assistance prononcent quand le focus s'y pose. Cette page montre comment ce nom est déterminé, vingt modèles défaillants à côté de leur version corrigée, et un vérificateur qui lit un extrait collé et indique le nom qu'il obtiendrait.
aria-label contient le nom sous forme de chaîne dans l'attribut. aria-labelledby pointe vers un ou plusieurs id d'éléments et construit le nom à partir de leur texte, si bien que le nom correspond toujours à ce que voient les utilisateurs voyants. Quand les deux sont présents, aria-labelledby l'emporte.
Oui. Pour la plupart des contrôles, la valeur d'aria-label remplace le contenu textuel : un bouton affichant Acheter qui porte aria-label="Add to basket" est annoncé Add to basket. Ce décalage déroute les utilisateurs du contrôle vocal et enfreint le critère WCAG 2.5.3 Label in Name.
Pour une information complémentaire qui n'est pas le nom : une règle de mot de passe, une indication de format ou un message d'erreur. Les lecteurs d'écran lisent généralement la description après le nom et le rôle, souvent après une courte pause, et certains utilisateurs désactivent les descriptions.
Seulement si la div a un rôle qui autorise le nommage, comme role="region" ou role="dialog". Sur une div ou un span générique, ARIA interdit le nommage et la plupart des lecteurs d'écran ignorent l'attribut.
Non. Les images tirent leur nom de l'attribut alt. Utilisez alt="" pour les images décoratives afin qu'elles soient ignorées. aria-label sur un img fonctionne mais n'apporte rien que alt ne fasse déjà.
Parcourez cette liste de haut en bas et arrêtez-vous à la première option qui convient. Le texte visible vient en premier car il sert les utilisateurs voyants, de lecteurs d'écran et du contrôle vocal avec une seule chaîne.
Les quatre façons de donner un nom ou une description à un élément
Chaque extrait montre le modèle défaillant, la correction et, à peu près, ce qu'un lecteur d'écran annonce après la correction. Les annonces varient selon le produit et les réglages.
Sans nom, le bouton est généralement annoncé simplement comme bouton. Masquez le dessin pour qu'il ne soit pas lu comme une image sans libellé. Après la correction, il est généralement annoncé : Fermer, bouton.
Un lien vide est souvent lu comme son URL, lettre par lettre sur certaines configurations. Après la correction, il est généralement annoncé : Notre boutique sur Instagram, lien.
Un vrai texte dans un span visuellement masqué résiste aux outils de traduction, qui ont tendance à ignorer les valeurs d'attributs. Après la correction, il est généralement annoncé : Panier, 3 articles, lien.
Avec deux éléments nav sans nom, la liste des landmarks affiche navigation deux fois et personne ne peut les distinguer. Après la correction, il est généralement annoncé : Principale, navigation.
Le texte du placeholder est un nom de repli fragile et disparaît dès que l'on tape. Après la correction, il est généralement annoncé : Rechercher des produits, recherche, zone d'édition.
Un vrai élément label rend aussi l'intitulé cliquable, ce qui agrandit la cible. Après la correction, il est généralement annoncé : E-mail, zone d'édition.
Les descriptions sont assemblées dans l'ordre où les id sont listés. Après la correction, il est généralement annoncé : Mot de passe, zone d'édition sécurisée, saisie invalide, Au moins 12 caractères, Trop court....
La legend nomme le groupe, si bien que chaque option a du sens seule. Après la correction, il est généralement annoncé : Vitesse de livraison, groupe, Standard, bouton radio, 1 sur 2.
Pointer vers le titre visible garde identiques le titre prononcé et le titre affiché. Ouvrez-la avec showModal() pour une vraie modale. Après la correction, elle est généralement annoncée : Supprimer le projet ?, boîte de dialogue, Cela supprime les 14 pages..
Gardez le nom fixe et laissez l'état changer. Ne remplacez pas en plus le libellé par Non gras. Après la correction, il est généralement annoncé : Gras, bouton bascule, enfoncé.
Changer à la fois le libellé et l'état enfoncé produit une double négation. Après la correction, il est généralement annoncé : Couper le son, bouton bascule, non enfoncé.
Le script doit inverser aria-expanded et l'attribut hidden en même temps. Après la correction, il est généralement annoncé : Produits, bouton, réduit.
Une div cliquable n'est ni focalisable ni annoncée comme un contrôle. Après la correction, il est généralement annoncé : Menu, bouton, réduit.
Écrivez ce que l'image apprend au lecteur. Un alt vide marque une décoration pour qu'elle soit ignorée. Après la correction, elle est généralement annoncée : Les ventes sont passées de 40 à 65 commandes par semaine en mai, image.
role=img fait du SVG un seul objet au lieu d'un arbre de formes. Après la correction, il est généralement annoncé : Northgate Bakery, image.
Une caption visible nomme le tableau pour tout le monde. N'utilisez aria-labelledby que si le titre se trouve en dehors. Après la correction, il est généralement annoncé : Horaires d'ouverture, tableau, 2 colonnes, 8 lignes.
La région doit exister avant que son texte change, sinon beaucoup de lecteurs manquent la mise à jour. Après la correction, il est généralement annoncé : Enregistré (prononcé sans déplacer le focus).
aria-roledescription change le rôle prononcé. Utilisez-le avec parcimonie et jamais sur des éléments génériques. Après la correction, il est généralement annoncé : Photos des clients, carrousel.
Un texte de lien unique aide tous ceux qui parcourent une liste de liens. Commencer par les mots visibles préserve Label in Name. Après la correction, il est généralement annoncé : Lire la suite sur les horaires d'hiver, lien.
Quelqu'un qui dit cliquer sur Envoyer au contrôle vocal doit atteindre ce bouton : le mot visible doit donc figurer dans le nom. Après la correction, il est généralement annoncé : Envoyer, bouton.
Erreurs repérées lors d'audits et leurs corrections
Vérifiez les noms avant de publier
Collez un extrait. Le vérificateur l'analyse dans votre navigateur sans exécuter de script, trouve le premier élément interactif ou nommé et détermine un nom selon une version allégée de l'ordre officiel. Il saute plusieurs étapes de la spécification : considérez-le comme une indication rapide et confirmez dans les outils de développement ou avec un lecteur d'écran.
Bouton icône
Bouton icône corrigé
Champ avec libellé
Libellé discordant
Dialogue avec labelledby
Extrait HTML
Aucun bouton, lien, champ, landmark, image ou tableau trouvé dans l'extrait.
Élément
Nom calculé
(vide)
Origine du nom
Avertissements
Aucun trouvé par cette vérification simplifiée.
élément label
contenu textuel
title du svg
title (repli fragile)
placeholder (repli fragile)
aria-labelledby pointe vers l'id absent "{id}".
aria-label sur une div ou un span sans rôle est ignoré par la plupart des lecteurs d'écran.
L'image n'a pas d'attribut alt.
Le placeholder est le seul nom. Ajoutez un libellé.
Aucun nom accessible trouvé.
Le texte visible "{visible}" n'est pas au début du nom (WCAG 2.5.3 Label in Name).
Le nom se termine par un mot de rôle, le rôle sera donc prononcé deux fois.
L'élément lui-même est aria-hidden.
Commencer gratuitement · Sans carte bancaire