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>
Il est très important d’indiquer à l’utilisateur le format des données attendues.
En l’absence de support de HTML5 par le navigateur de ce dernier, et si JavaScript n’est pas activé, un champ de texte sera affiché par défaut. Sans indications, l’utilisateur ne pourra pas connaître l’étendue des valeurs autorisées.
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 :
Plus précisément, les scripts doivent gérer les points suivants :
display: none;
est appliquée sur le <input type=“range” />
.<input type=“range” />
. Dans l’exemple, un <div>
est utilisé.<span>
est utilisé. Il s’agit du curseur.tabindex=“0”
est appliqué sur ce dernier.role=“slider”
est appliqué sur le curseur.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.aria-valuemin
est appliqué sur le curseur. La valeur de cet attribut reprend la valeur minimale autorisée pour le curseur.aria-valuemax
est appliqué sur le curseur. La valeur de cet attribut reprend la valeur maximale autorisée pour le curseur.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.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.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>