aria-valuenow

Quand l’utiliser

Sur tout widget personnalisé représentant une valeur sur une plage : role="slider", role="progressbar", role="spinbutton", role="scrollbar". L’attribut porte la valeur numérique courante. Il est presque toujours associé à aria-valuemin et aria-valuemax, qui permettent ensemble à la technologie d’assistance de calculer et d’annoncer un pourcentage et une valeur absolue.

Il n’est généralement pas nécessaire d’utiliser cet attribut sur un <input type="range"> ou <progress> natif — le navigateur expose la valeur automatiquement. Recourir à aria-valuenow uniquement pour des widgets construits avec du balisage personnalisé.

Comportement

La valeur est un nombre (entier ou décimal). La technologie d’assistance l’annonce comme la position courante du widget, souvent accompagnée d’un pourcentage dans la plage min–max : « Volume, curseur, 7 sur 10, 70 pourcent. »

Si la valeur du widget est plus significative sous forme de libellé que de nombre — « Vendredi » sur un curseur de jours, « Moyen » sur un sélecteur à trois positions — fournir aria-valuetext avec le libellé lisible par l’utilisateur. La technologie d’assistance lira aria-valuetext à la place de aria-valuenow, tandis que les technologies d’assistance qui ignorent valuetext disposent toujours de la valeur numérique de repli. Toujours définir les deux.

Pour progressbar, il est possible d’omettre aria-valuenow pour une progression indéterminée (le cas du spinner). Pour slider, l’attribut est obligatoire.

Erreurs courantes

• Définir aria-valuenow sans aria-valuemin ni aria-valuemax. La technologie d’assistance n’a pas de plage de référence et annonce un nombre brut sans contexte.
• Mettre à jour la position visuelle via des transformations CSS sans jamais mettre à jour aria-valuenow. Les utilisateurs de lecteurs d’écran entendent la valeur initiale indéfiniment.
• Une valeur en dehors de la plage min/max — aria-valuenow="150" quand le max est 100. La technologie d’assistance soit la contraint soit l’annonce telle quelle ; dans les deux cas c’est un défaut.
• Oublier aria-valuetext pour les échelles non numériques. Les utilisateurs entendent « 3 sur 5 » alors que l’échelle est « Faible / Modérément faible / Moyen / Modérément élevé / Élevé ».
• Utiliser aria-valuenow sur quelque chose qui n’est pas un widget de plage — un bouton ordinaire, une icône. L’attribut n’a aucun effet en dehors de ses rôles supportés.
• Ne pas synchroniser le modèle clavier. Le widget doit répondre aux touches fléchées, Début, Fin, Page Haut, Page Bas — l’attribut seul ne dit rien sur le support clavier.

Exemple

<div
  role="slider"
  tabindex="0"
  aria-label="Volume"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="7"
  aria-valuetext="7 out of 10"
>
  <div class="slider-thumb" style="left: 70%"></div>
</div>