Sliders personnalisés

Sommaire

Principe

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

Les sliders sont dits « personnalisés » 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.1 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’on 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 décrémente la valeur du slider à son minimum.

Fin

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

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

Remarque

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.

Composants

Ces composants « Sliders personnalisés » sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements.

2 commentaires

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

    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 à 15:57.

      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

Répondre à Sébastien Delorme

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

Haut de page