integer

aria-valuenow

Indique la valeur numérique courante d'un widget de plage, de progression ou de compteur.

Description

aria-valuenow est la valeur actuelle d’un widget de type slider, progressbar, scrollbar, ou spinbutton. Elle doit être comprise entre aria-valuemin et aria-valuemax. Cette valeur doit être mise à jour dynamiquement quand l’utilisateur interagit avec le widget.

Syntaxe

<div role="progressbar"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-valuenow="42">
  42%
</div>

Exemples

Curseur avec mise à jour dynamique :

<div role="slider"
     tabindex="0"
     aria-valuemin="0"
     aria-valuemax="10"
     aria-valuenow="5"
     aria-valuetext="5 sur 10"
     aria-label="Niveau de satisfaction">
</div>

<script>
  slider.addEventListener('keydown', e => {
    let val = parseInt(slider.getAttribute('aria-valuenow'));
    if (e.key === 'ArrowRight') val = Math.min(val + 1, 10);
    if (e.key === 'ArrowLeft')  val = Math.max(val - 1, 0);
    slider.setAttribute('aria-valuenow', val);
    slider.setAttribute('aria-valuetext', `${val} sur 10`);
  });
</script>

Notes

Mise à jour en temps réel : aria-valuenow doit être mis à jour à chaque changement de valeur pour que les AT annoncent la valeur correcte.

Complément aria-valuetext : quand la valeur numérique seule n’est pas compréhensible (“5” sans contexte), utiliser aria-valuetext pour fournir un texte alternatif (“5 sur 10”, “50 %”, “150 €”).

Support navigateurs