2.3.4. Curseurs de défilement (sliders)

Les sliders sont des champs de formulaires qui permettent de sélectionner une valeur précise à l’intérieur d’une gamme de valeurs définie au préalable. Ils prennent habituellement l’apparence d’un curseur à déplacer le long d’un axe, entre une première valeur minimale et une seconde valeur maximale.

Parfois, le contrôle du curseur est libre au sein de cet axe, parfois, il est contraint à une série de valeurs prédéfinies.

Ils sont dits “simulés” lorsqu’ils n’utilisent pas les éléments de formulaires proposés par défaut par HTML, à savoir les champs <input type=“range” />. Ce choix est souvent lié à des raisons esthétiques.

Le code HTML de base utilise un slider HTML5 classique :

<form action="index.html" method="post">
    <label for="qualite-sommeil" id="label-qualite-sommeil">
        Êtes-vous satisfait(e) de la qualité de votre sommeil ?
        (nombre entier, de 1 pour "Très insatisfait(e)" à 5 pour "Très satisfait")
    </label>
    <input type="range" id="qualite-sommeil" name="qualite-sommeil" step="1" value="3" min="1" max="5" />
 
    <input type="submit" value="Transmettre les informations" />
</form>

Sans JavaScript, un formulaire classique est proposé à l’utilisateur.

Avec JavaScript, le comportement des sliders simulées doit être le même que celui des sliders classiques.

La méthode consiste, dans les grandes lignes, à respecter les étapes suivantes :

1. Le slider classique est masqué en JavaScript.
2. Un conteneur vide est créé dans le DOM, à la place du slider initial. Il servira à contenir les éléments suivants. Une fois stylé en CSS, il symbolisera l’axe du slider.
3. Un deuxième élément vide est créé dans le DOM, enfant de l’élément précédent. Il servira quant à lui à symboliser le curseur, une fois stylé en CSS.
4. JavaScript intervient ensuite pour rajouter des rôles ARIA et gérer le comportement du slider simulé.

Plus précisément, les scripts doivent gérer les points suivants :

• La propriété CSS display: none; est appliquée sur le <input type=“range” />.
• Un conteneur vide est ajouté dans le DOM juste après le <input type=“range” />. Dans l’exemple, un <div> est utilisé.
• Un élément vide est ajouté dans le DOM à l’intérieur du conteneur nouvellement créé. Dans l’exemple, un <span> est utilisé. Il s’agit du curseur.
• Si le curseur n’est pas un élément tabulable par défaut, l’attribut tabindex=“0” est appliqué sur ce dernier.
• L’attribut role=“slider” est appliqué sur le curseur.
• L’attribut aria-labelledby est appliqué sur le curseur. La valeur de cet attribut reprend celle de l’attribut id de l’étiquette associée au slider.
• L’attribut aria-valuemin est appliqué sur le curseur. La valeur de cet attribut reprend la valeur minimale autorisée pour le curseur.
• L’attribut aria-valuemax est appliqué sur le curseur. La valeur de cet attribut reprend la valeur maximale autorisée pour le curseur.
• L’attribut aria-valuenow est appliqué sur le curseur. La valeur de cet attribut reprend la valeur courante du curseur. La valeur de cet attribut est mise à jour dès lors que le curseur change de position.
• Si besoin, l’attribut aria-valuetext est appliqué sur le curseur. La valeur de cet attribut exprime la valeur courante du curseur, mais dans un format adapté à l’internaute. Dans l’exemple, cet attribut peut par exemple être renseigné tel que aria-valuetext=“Très satisfaisant(e)” lorsque aria-valuenow=“5”. C’est la première valeur, plus compréhensible, qui sera restituée aux utilisateurs d’aides techniques, si elle est disponible. La valeur de cet attribut est mise à jour dès lors que le curseur change de position.
• Par rapport à l’axe, le curseur ne peut jamais être positionné avant la valeur minimale, ni après la valeur maximale.
• Si un pas est défini, la position du curseur doit toujours respecter ce pas. Par exemple, si un pas de 1 est défini, et que la position de départ est à 10, il ne doit pas être possible d’obtenir une valeur non entière à l’aide du curseur.
• Le curseur peut être déplacé le long de l’axe, par simple glisser-déposer à la souris, ou par simple glisser-relâcher au doigt.
• Le curseur peut également être déplacé au clavier. Lorsque le focus est positionné sur ce dernier :
  • La pression des touches “Flèche droit” ou “Flèche haut” augmente la valeur du slider, d’une valeur de pas.
  • La pression des touches “Flèche gauche” ou “Flèche bas” diminue la valeur du slider, d’une valeur de pas.
  • La pression de la touche “Origine” déplace le curseur au niveau de la valeur minimale du slider.
  • La pression de la touche “Fin” déplace le curseur au niveau de la valeur maximale du slider.
  • La pression de la touche “Page précédente” augmente la valeur du slider, d’une valeur arbitraire, mais supérieure à la valeur de pas.
  • La pression de la touche “Page suivante” diminue la valeur du slider, d’une valeur arbitraire, supérieure à la valeur de pas, et identique à celle obtenue lors de la pression du la touche “Page précédente”.

Le code ainsi obtenu avec JavaScript sera le suivant :

<form action="index.html" method="post">
    <label for="qualite-sommeil" id="label-qualite-sommeil">
        Êtes-vous satisfait(e) de la qualité de votre sommeil ?
        (nombre entier, de 1 pour "Très insatisfait(e)" à 5 pour "Très satisfait")
    </label>
    <input style="display: none;" type="range" id="qualite-sommeil" name="qualite-sommeil" step="1" value="3" min="1" max="5" />
    <div id="conteneur-slider">
        <span id="curseur-slider" role="slider" tabindex="0" aria-labelledby="label-qualite-sommeil" aria-valuemin="1" aria-valuemax="5" aria-valuenow="5" aria-valuetext="Très satisfaisant(e)"></span>
    </div>
 
    <input type="submit" value="Transmettre les informations" />
</form>

• Démonstration en ligne de sliders simulés, par le projet canadien Web Experience Toolkit (WET).