ARIA : attribut aria-valuenow
L'attribut aria-valuenow définit la valeur actuelle pour un composant de type plage (range).
Description
L'attribut aria-valuenow définit la valeur actuelle pour les composants de type plage. Il est similaire à l'attribut value des éléments HTML <progress>, <meter> et <input> de type range, number et tous les types date et heure.
Lors de la création d'un rôle de type plage, y compris meter, scrollbar, slider et spinbutton sur un élément non sémantique, aria-valuenow permet de définir une valeur numérique actuelle comprise entre la valeur minimale et la valeur maximale. Les valeurs minimale et maximale sont définies avec aria-valuemin et aria-valuemax.
Attention :
Le rôle range ne doit PAS être utilisé car il est « abstrait ». L'attribut aria-valuenow est utilisé sur tous les sous-types de rôles de plage.
<p id="birthyearLabel">Quelle est votre année de naissance ?</p>
<div
role="spinbutton"
tabindex="-1"
aria-valuenow="1984"
aria-valuemin="1900"
aria-valuemax="2021"
aria-labelledby="birthyearLabel">
<span class="value"> 1984 </span>
<span role="button">
<span aria-hidden="true">+</span>
Incrémenter l'année de 1
</span>
<span role="button">
<span aria-hidden="true">-</span>
Décrémenter l'année de 1
</span>
</div>
Utilisez des éléments HTML sémantiques lorsque c'est possible :
<label for="birthyear">Quelle est votre année de naissance ?</label>
<input type="number" id="birthyear" value="1984" min="1900" max="2021" />
Si aucune valeur n'est connue, comme lorsqu'une barre de progression est dans un état indéterminé, il ne faut pas définir d'attribut aria-valuenow.
Lorsqu'aucun aria-valuenow n'est défini, aucune information n'est transmise concernant la valeur actuelle.
Lorsqu'il est utilisé avec des curseurs (sliders en anglais) et des boutons rotatifs (spinbuttons en anglais), les technologies d'assistance annoncent la valeur réelle aux utilisateur·ice·s.
Lorsqu'il est utilisé avec une barre de progression (progressbar en anglais) ou une barre de défilement (scrollbar en anglais), les technologies d'assistance annoncent la valeur comme un pourcentage. Lorsque aria-valuemin et aria-valuemax sont tous deux définis, la valeur en pourcentage est calculée comme une position sur la plage. Sinon, la valeur réelle est annoncée comme un pourcentage.
Lorsque la valeur à annoncer, qu'il s'agisse de la valeur réelle ou de la valeur en pourcentage, peut ne pas être claire pour les utilisateur·ice·s, l'attribut aria-valuetext doit être utilisé pour fournir une représentation compréhensible de la valeur. Lorsqu'elle est définie, la chaîne valuetext est annoncée à la place de la valeur numérique valuenow. Par exemple, si un curseur représente les jours de la semaine, donc que le aria-valuenow du jour de la semaine est un nombre, la propriété aria-valuetext doit être définie sur une chaîne qui rend la valeur du curseur compréhensible, comme « lundi ».
Exemples
<p id="temperatureLabel">Température du four</p>
<div
role="meter"
id="temperature"
aria-valuenow="205"
aria-valuemin="70"
aria-valuemax="250"
aria-labelledby="temperatureLabel">
<div class="meter-color" aria-hidden="true"></div>
</div>
La première règle de l'utilisation d'ARIA est : « si vous pouvez utiliser une fonctionnalité native avec la sémantique et le comportement requis déjà intégrés, au lieu de détourner un élément et d'ajouter un rôle, un état ou une propriété ARIA pour le rendre accessible, alors faites-le. »
<label for="temperature">Température du four</label>
<input type="range" id="temperature" value="205" min="70" max="250" step="5" />
Si l'on utilise la sémantique HTML native avec un <input>, on bénéficie gratuitement du style et de la sémantique.
Valeurs
<number>-
Un nombre décimal, compris entre la valeur minimale et la valeur maximale.
Interfaces associées
Element.ariaValueNow-
La propriété
ariaValueNow, qui fait partie de l'interfaceElement, reflète la valeur de l'attributaria-valuenow. ElementInternals.ariaValueNow-
La propriété
ariaValueNow, qui fait partie de l'interfaceElementInternals, reflète la valeur de l'attributaria-valuenow.
Rôles associés
Utilisé dans les rôles :
Hérité dans les rôles :
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # aria-valuenow |
Voir aussi
- Le rôle ARIA
range - Attribut
valuede l'élément<input type="range"> - L'attribut ARIA
aria-valuetext - L'attribut ARIA
aria-valuemax - L'attribut ARIA
aria-valuemin