Normes · ARIA

Rôle Widget

slider

Désigne un élément comme entrée permettant de sélectionner une valeur dans une plage. Préférez <input type="range"> natif ; n'utilisez role="slider" que pour les contrôles personnalisés impossibles en HTML natif, par exemple un sélecteur à deux curseurs.

Quand l’utiliser

Utilisez <input type="range">. L’élément natif fournit la gestion clavier, les gestes tactiles, les graduations via <datalist>, et une value soumise avec le formulaire.

role="slider" est réservé aux contrôles personnalisés que le natif ne peut pas exprimer :

  • Sélecteurs à deux curseurs (prix min/max).
  • Échelles non linéaires (logarithmiques, sélecteurs de couleur par paliers).
  • Curseurs dont le style ne peut pas être obtenu avec l’élément natif dans un système de design donné.

Contrat clavier et focus

Conformément au modèle APG slider :

  • Tab déplace le focus sur le curseur.
  • Les flèches Droite/Haut augmentent la valeur d’un pas ; Gauche/Bas la diminuent.
  • Page Haut / Page Bas sautent d’un incrément plus grand (en général 10 %).
  • Début saute à aria-valuemin ; Fin saute à aria-valuemax.

Vous DEVEZ définir aria-valuenow, aria-valuemin et aria-valuemax. Si la valeur numérique n’est pas explicite (« 3 » — trois quoi ?), ajoutez aria-valuetext="3 étoiles" afin que les lecteurs d’écran annoncent la version compréhensible.

Pour les curseurs à deux pouces, rendez deux éléments role="slider" distincts, chacun avec ses propres valeurs min/max reflétant la position de l’autre curseur.

Erreurs courantes

  • aria-valuenow absent au premier rendu. Le curseur n’a aucune valeur annoncée.
  • Valeur du curseur non mise à jour après un glissement. Les lecteurs d’écran signalent indéfiniment la valeur d’origine.
  • Un curseur de volume « 0 à 100 » sans aria-valuetext — l’utilisateur entend « 47 » sans unité.
  • Pas de déplacement trop grossier. Un curseur 0-100 qui saute de 10 en 10 empêche de choisir 53 au clavier.
  • Curseurs à deux pouces rendus comme un seul élément avec aria-valuetext="20 à 80". L’utilisateur ne peut pas ajuster chaque borne indépendamment.

Exemple

<!-- Recommandé -->
<label for="vol">Volume</label>
<input id="vol" type="range" min="0" max="100" value="50">

<!-- Curseur personnalisé -->
<div id="brightnessLabel">Luminosité</div>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="brightnessLabel"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="60"
  aria-valuetext="60 percent"
></div>