Sliders personnalisés

Sommaire

• Principe.
• Socle HTML.
• Rôles, états et propriétés ARIA.
• Interactions au clavier.
• Comportements attendus.
• Remarque.

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.

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

• role="slider" doit être appliqué sur le curseur.
• L’attribut aria-valuemin doit être appliqué sur le curseur. Cet attribut doit être renseigné avec la valeur minimale autorisée pour le slider.
• L’attribut aria-valuemax doit être appliqué sur le curseur. Cet attribut doit être renseigné avec la valeur maximale autorisée pour le slider.
• L’attribut aria-valuenow doit être appliqué sur le curseur. Sa valeur doit être renseignée dynamiquement en reprenant celle de la position courante du curseur.
• Le curseur doit être rattaché à son étiquette via l’attribut aria-labelledby :
  • L’étiquette du slider doit posséder un attribut id renseigné avec une valeur unique.
  • Le curseur doit posséder un attribut aria-labelledby renseigné avec la valeur de l’attribut id de l’étiquette du slider.
• aria-hidden="true" doit être appliqué sur l’image simulant le curseur.

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

• Le focus clavier est positionné sur le curseur lors de l’utilisation du slider et y reste jusqu’à l’utilisation de la touche Tab.
• Lorsque le focus clavier est positionné sur le curseur, il est possible de modifier la valeur du slider en utilisant les touches Flèche haut, Flèche bas, Origine, Fin, Page précédente et Page suivante.
• La valeur de l’attribut aria-valuenow doit être modifiée dynamiquement à chaque mise à jour du slider et doit être identique à la valeur du slider.
• La valeur du slider ne peut être supérieure à la valeur renseignée dans l’attribut aria-valuemax.
• La valeur du slider ne peut être inférieure à la valeur renseignée dans l’attribut aria-valuemin.

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.

2 commentaires

Mises à jour

Haut de page