button-name-present
Les boutons ont un nom accessible
Vérifie que les boutons exposent un nom accessible non vide.
Applicabilité. S’applique à <button>, <input type="button">, <input type="submit">, <input type="reset"> et aux éléments dont l’attribut role se résout en button (son premier jeton connu et non abstrait, sans tenir compte de la casse, donc role="foo button" compte et role="link button" non), lorsque l’élément est inclus dans l’arbre d’accessibilité. role="presentation"/"none" exclut un élément du périmètre, sauf si un attribut ARIA global ou la capacité à recevoir le focus rétablit son rôle, selon la résolution des conflits des rôles de présentation. Un élément personnalisé auquel ses ElementInternals donnent le rôle button (this.attachInternals().role), sans attribut role qui en nomme un autre, compte comme un élément natif doté de ce rôle.
Attendu. L’élément a un nom accessible non vide. Un nom programmatique est pris en premier (aria-labelledby, aria-label, un <label> associé, title). À défaut, un bouton <input> se rabat sur son attribut value, et type="submit"/type="reset" se rabattent sur la valeur par défaut de l’agent utilisateur, « Submit »/« Reset », ce qui explique que ces deux-là n’aient jamais de nom vide. À défaut des deux, un bouton dont le rôle tire son nom du contenu se rabat sur le texte de son sous-arbre, en comptant le nom propre de chaque descendant (un <img alt>, aria-label, l’enfant <title> d’un <svg>, ou title) et pas seulement les nœuds texte.
Ce que rapporte un constat.
refs.accessibleName: ce qu’a trouvé la recherche d’un nom programmatique (aria-labelledby, aria-label, <label>, title). Sonmechanismest la source à laquelle elle s’est arrêtée,nonelorsqu’il n’y en avait aucune, et sesflagsindiquent pourquoi un attribut de nommage présent n’a pas donné de nom, par exemplearia-label-emptyouaria-labelledby-empty-or-unresolvable.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<button>Save</button>
Le contenu textuel du bouton est son nom accessible.
<button></button>
Le bouton n’a ni contenu textuel, ni aria-label, ni aria-labelledby.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
name_closedContent
- Repérez le bouton indiqué par le rapport et notez le texte ou l’icône affiché à l’écran.
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et lisez le nom accessible de l’élément, que le navigateur tire d’un contenu qu’aucun script ne peut lire.
- Avec un lecteur d’écran, placez-vous sur l’élément et écoutez le nom annoncé.
Réussite. L’arbre d’accessibilité montre un nom pour le bouton, tiré de son contenu, et le lecteur d’écran l’annonce.
Échec. Le bouton n’a pas de nom dans l’arbre d’accessibilité, car son contenu n’en donne aucun, ce qui ne respecte pas le critère WCAG 4.1.2.
name_contentTooDeep
- Repérez le bouton indiqué par le rapport et notez le texte affiché à l’écran.
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et lisez le nom accessible de l’élément, que le navigateur tire de tout son contenu imbriqué.
- Avec un lecteur d’écran, placez-vous sur l’élément et écoutez le nom annoncé.
Réussite. L’arbre d’accessibilité montre un nom pour le bouton, tiré de son contenu imbriqué, et le lecteur d’écran l’annonce.
Échec. Le bouton n’a pas de nom dans l’arbre d’accessibilité, car son contenu n’en donne aucun, ce qui ne respecte pas le critère WCAG 4.1.2.
name_internals
- Inspectez le bouton indiqué par le rapport, un élément personnalisé, et notez son rôle.
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et lisez le nom accessible de l’élément.
- Avec un lecteur d’écran, placez-vous sur l’élément et écoutez le nom annoncé.
Réussite. L’arbre d’accessibilité montre un nom pour le bouton, défini par ses internals ou autrement, et le lecteur d’écran l’annonce.
Échec. Le bouton n’a pas de nom dans l’arbre d’accessibilité et le lecteur d’écran n’annonce que son rôle, ce qui ne respecte pas le critère WCAG 4.1.2.