mozilla
Vos résultats de recherche

    Utiliser le rôle slider

    Cet article nécessite une relecture technique.

    Cet article nécessite une relecture rédactionnelle.

    Description

    Cette technique présente l’utilisation du rôle slider.

    Le rôle slider est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle slider est assigné à la « molette », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possible, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut aria-valuenow du curseur de défilement (et si possible aria-valuetext) pour refléter la valeur courante. Voir la section Exemples ci-dessous pour plus d'informations.

    Clavier et focus

    Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) :

    Touche(s) Action
    Flèches haut et droite Augmente la valeur sélectionnée
    Flèches bas et gauche Baisse la valeur sélectionnée
    Page haut et Page bas Augmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.

    Exemples

    Exemple 1 : Intervalle numérique simple

    Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de aria-valuenow en réponse à l'action de l'utilisateur.

    <div id="slider-label">Volume</div>
    
    <div class="vol-slider">
      <a href="#" id="vol-handle" class="handle" role="slider" aria-labelledby="slider-label"
        aria-valuemin="1"
        aria-valuemax="100"
        aria-valuenow="60">
      </a>
    </div>
    

    Exemple 2 : Valeurs texte

    Sometimes, a slider is used to choose a value that is not, semantically, a number. In these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. In the example below, the slider is used to select a day of the week.

    <div id="slider-label">Jour de la semaine :</div>
    
    <div class="day-slider">
      <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label"
        aria-valuemin="1"
        aria-valuemax="7"
        aria-valuenow="2"
        aria-valuetext="Lundi">
      </a>
    </div>
    

    L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs aria-valuenow et aria-valuetext :

    var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
    var updateSlider = function (newValue) {
        var handle = document.getElementById("day-handle");
        handle.setAttribute("aria-valuenow", newValue.toString());
        handle.setAttribute("aria-valuetext", dayNames[newValue]);
    };
    

    Exemples concrets :

    Notes

    Attributs ARIA utilisés

    Techniques ARIA connexes

    Compatibilité

    À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

    Autres ressources

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: Fredchat
    Dernière mise à jour par : Fredchat,