slider-name-present
Les curseurs (slider) ont un nom accessible
Vérifie que les éléments dotés de role="slider" exposent un nom accessible non vide. Un <input type="range"> natif est vérifié par form-control-programmatic-label-present.
Applicabilité. S’applique aux éléments dont l’attribut role se résout en slider (l’attribut est une liste de repli : son premier jeton connu et non abstrait, sans tenir compte de la casse, est le rôle, donc role="foo slider" compte et role="link slider" non) qui sont inclus dans l’arbre d’accessibilité. Un élément qui a le rôle implicite correspondant mais pas d’attribut role est hors du périmètre. Un <input type="range"> natif sans ce rôle relève de form-control-programmatic-label-present. Un élément personnalisé auquel ses ElementInternals donnent ce rôle (this.attachInternals().role), sans attribut role qui en nomme un autre, est lui aussi dans le périmètre : c’est son rôle par défaut, et aucune autre règle ne le vérifie.
Attendu. L’élément a un nom accessible non vide provenant d’aria-label, d’un aria-labelledby qui se résout en texte non vide, ou de title. role="slider" ne tire son nom que de l’auteur (name-from-author), si bien que le texte du sous-arbre n’est jamais accepté : le texte placé à l’intérieur d’un widget slider personnalisé n’est pas exposé de façon fiable comme son nom. Sur un élément étiquetable (<input role="slider">), un <label> associé compte également. Sur un <input> de type texte ou un <textarea>, le placeholder compte en dernier (la dernière source de nom de HTML-AAM) : un libellé réduit à un placeholder relève du critère 3.3.2, pas d’un nom manquant.
Exemples
<div role="slider" tabindex="0" aria-label="Volume" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>
aria-label nomme le curseur. Un <input type="range"> natif n’entre pas dans le périmètre de cette règle ; c’est form-control-programmatic-label-present qui le vérifie.
<div role="slider" tabindex="0" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"></div>
Aucun nom accessible issu d’un mécanisme pris en charge.
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_internals
- Inspectez le curseur 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 curseur, défini par ses internals ou autrement, et le lecteur d’écran l’annonce.
Échec. Le curseur 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.