Sliders simulés en ARIA

Une mise à jour de la spécification ARIA est en cours d’officialisation : passage progressif de ARIA 1.0 (recommandation actuelle) à ARIA 1.1 (recommandation en cours d’homologation).

Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois la version ARIA 1.1 officialisée.

Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.

Sommaire

Principe

Les sliders sont des éléments de formulaires qui permettent à l’utilisateur de sélectionner une valeur unique en déplaçant un curseur sur une échelle graduée.

Les sliders sont dits « simulés en ARIA » lorsqu’ils ne sont pas construits sur la base du code HTML standard prévu pour ces éléments par la spécification : <input type="range" />.

Le suivi des recommandations ci-dessous permet de reproduire le comportement par défaut des sliders HTML standards, dans les cas où ces derniers ne peuvent être utilisés.

Cette fiche s’appuie sur le motif de conception « Slider » détaillé dans les WAI-ARIA 1.0 Authoring Practices du W3C.

Socle HTML


<p id="etiquette">Étiquette du slider</p>
<button role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="8" aria-labelledby="etiquette">
  <img src="curseur.png" aria-hidden="true" alt="" />
</button>
[…]

Rôles, états et propriétés ARIA

Interactions au clavier

Les interactions au clavier sont les mêmes que pour les sliders HTML classiques. À la seule exception que le focus clavier est ici positionné directement sur le curseur et non sur l’ensemble du slider.

Tab

Lorsque l’utilisateur accède en tabulant au slider, le focus est positionné au niveau du curseur. Lorsque le focus est positionné sur le curseur, la prochaine tabulation permet de quitter le slider.

Maj + Tab

Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.

Flèche haut et Flèche droite

Lorsque le focus est positionné sur le curseur, déplace le curseur et incrémente la valeur du slider d’un pas.

Flèche bas et Flèche gauche

Lorsque le focus est positionné sur le curseur, déplace le curseur et décrémente la valeur du slider d’un pas.

Origine

Lorsque le focus est positionné sur le curseur, déplace le curseur et incrémente la valeur du slider à son maximum.

Fin

Lorsque le focus est positionné sur le curseur, déplace le curseur et décrémente la valeur du slider à son minimum.

Page précédente

Lorsque le focus est positionné sur le curseur, déplace le curseur et incrémente la valeur du slider d’un nombre prédéfini de pas.

Page suivante

Lorsque le focus est positionné sur le curseur, déplace le curseur et décrémente la valeur du slider d’un nombre prédéfini de pas.

Comportements attendus

Remarques

Le choix du nombre de pas à « sauter » lors de la pression sur les touches Page précédente et Page suivante est libre.

D’autre part, il est important de noter que l’information numérique véhiculée par l’attribut aria-valuenow n’est pas toujours suffisamment explicite. C’est par exemple le cas lorsqu’un slider permet de sélectionner l’un des sept jours de la semaine :


<p id="evenement-jour">Jour de la semaine</p>
<button role="slider" aria-valumin="0" aria-valuemax="6" aria-valuenow="3" aria-labelledby="evenement-jour">
  <img src="curseur.png" aria-hidden="true" alt="" />
</button>
[…]

Dans ces situations, l’attribut optionnel aria-valuetext doit être utilisé en parallèle, afin de traduire la valeur courante du slider de manière plus compréhensible :


<p id="evenement-jour">Jour de la semaine</p>
<button role="slider" aria-valumin="0" aria-valuemax="6" aria-valuenow="3" aria-valuetext="Jeudi" aria-labelledby="evenement-jour">
  <img src="curseur.png" aria-hidden="true" alt="" />
</button>
[…]

S’il est utilisé, la valeur de l’attribut aria-valuetext doit également être renseignée dynamiquement à chaque mise à jour de la position du curseur.

À noter enfin qu’une balise <img /> est proposée dans l’exemple de code, mais qu’il est également possible de la remplacer par une image vectorielle <svg> ou une police d’icônes.

3 commentaires

  • Par levy, le 14 décembre 2015 à 15h09.

    Il serait sans doute bien d’indiquer que sur mobile notamment iOS + VoiceOver ce genre de composant est quasi impossible à utiliser.

    Répondre

    • Par Sébastien Delorme, le 29 avril 2016 à 15h57.

      Bonjour Aurélien,

      Je te remercie pour ce complément d’information.

      Il est effectivement préférable d’utiliser au maximum <input type="range" />, comme mentionné en introduction de la fiche.

      Et il est bon de le rappeler ici dans les commentaires.

      Bien à toi,
      Sébastien.

      Répondre

  • Par Laurent Bracquart, le 10 juillet 2017 à 11h24.

    Ajout d’un encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 10/07/2017.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page