Curseur
Utilisation
Présentation
Le curseur est un élément de contrôle permettant à l'utilisateur de sélectionner une seule valeur ou une plage de valeurs parmi un ensemble fixe d'options. Cela fournit une représentation visuelle d'une plage de valeurs ou de contenu à définir. Les utilisateurs peuvent choisir une valeur spécifique en déplaçant un curseur le long d'un axe horizontal.
Quand l'utiliser
- Pour sélectionner une valeur unique ou une plage de valeurs à partir d'un ensemble d'options fixe.
- Lorsqu'une valeur précise n'a pas d'importance pour l'utilisateur, et qu'une plage de valeurs suffit.
Quand ne pas l'utiliser
- Pour ajuster les champs numériques d'une petite quantité. Utilisez plutôt le stepper.
- Pour sélectionner une valeur précise. Utilisez plutôt la saisie numérique.
Source : Nielsen Norman
Formatage
Structure
Le curseur comprend les éléments suivants :
- Étiquette du curseur : texte expliquant l'objectif du contrôle de la sélection
- Valeur minimum : valeur la plus faible de la plage dans laquelle l'utilisateur doit faire sa sélection.
- Piste de sélection : un indicateur visuel qui met en évidence la plage sélectionnée ou la progression avec le curseur, du point de départ à la position actuelle.
- Poignée : icône que l'utilisateur peut déplacer jusqu'à l'endroit souhaité dans la plage de valeurs. Les valeurs sélectionnées s'affichent sous le curseur.
- Piste : ligne horizontale représentant une plage de valeurs dans laquelle les utilisateurs peuvent effectuer une sélection.
- Valeur maximum : valeur la plus élevée de la plage dans laquelle l'utilisateur doit faire sa sélection.
Placement de l'étiquette
Affichez les étiquettes du curseur au-dessus ou à côté du curseur, plutôt qu'en dessous, afin qu'elles restent visibles pendant que l'utilisateur sélectionne une valeur.
Mise en page et orientation
Pour les langues qui s'écrivent de gauche à droite (par exemple, les langues écrites en latin, en cyrillique, en grec moderne, les langues indiennes et d'Asie du sud-est), la valeur minimale apparaît à l'extrémité gauche de la piste, et la valeur maximale à l'extrémité droite.
Pour les langues qui s'écrivent de droite à gauche (par exemple, les langues écrites en caractères arabes et hébreux), l'orientation des valeurs est inversée.
Contenu
Directives générales relatives à la rédaction
- Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
- Utilisez des verbes au présent et la forme active dans la plupart des cas.
- Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
- Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
- Utilisez des termes et des phrases concis.
Inclure une étiquette
Utilisez l'étiquette du curseur pour indiquer la valeur que l'utilisateur modifie. Le texte de l'étiquette doit être court et concis. Limitez votre saisie à une seule ligne de texte.
Mettre la 1re lettre du 1er mot en majuscule
Dans une étiquette de curseur, le premier mot doit être en majuscule et la phrase ne doit comporter aucune ponctuation.
Reportez-vous au Guide de style des textes d'interface utilisateur pour en savoir plus sur l'utilisation des majuscules.
Comportements
États
Le curseur a cinq états visuels qui en indiquent le statut : activé, survol, actif, focus et désactivé.
| Visuel | État | Description |
|---|---|---|
 | Activé | Indique à l'utilisateur que l'élément est prêt à interagir. |
 | Survol | Indique que l'utilisateur a positionné le curseur sur la poignée. |
 | Focus | Indique que l'utilisateur clique sur la poignée du curseur. |
 | Actif | Indique que la poignée du curseur est mise en évidence et que le clavier peut être utilisé pour sélectionner une valeur. Le statut Focus peut être utilisé avec tous les autres statuts (y compris le statut Désactivé). |
 | Désactivé | Indique à l'utilisateur que l'élément n'est pas interactif. |
Interactions
Souris
Les utilisateurs peuvent sélectionner une valeur numérique en déplaçant la poignée du curseur avec la souris. Par défaut, la valeur change par incréments d'une unité.
Vous pouvez utiliser la propriété step pour contrôler les incréments selon lesquels la valeur va changer lorsque l'utilisateur déplace la poignée du curseur. Lorsque la propriété step est définie, la valeur du curseur ne change que pour des valeurs qui sont des multiples de la valeur d'étape spécifiée. Par exemple, si vous avez un curseur avec une plage de 0 à 100 et que vous définissez la propriété step sur 5, le curseur permettra uniquement à l'utilisateur de sélectionner des valeurs qui sont des multiples de 5 (0, 5, 10, 15, ..., 100). Cela signifie que la poignée du curseur s'accroche à ces valeurs spécifiques lorsque l'utilisateur la fait glisser.
Clavier
La poignée du curseur peut être déplacée avec le clavier. Les valeurs peuvent être augmentées et diminuées à l'aide des touches fléchées.
Lecteur d'écran
Ce composant comprend le rôle WAI-ARIA de 'slider' et l'attribut aria-orientation 'horizontal' pour communiquer son objectif et son orientation. La poignée du curseur et son étiquette sont associées via aria-labelledby. De même, les attributs aria-valuemin, aria-valuemax et aria-valuenow sont inclus pour être expliqués aux utilisateurs de lecteurs d'écran. Les modifications de valeur sont communiquées au moyen de role='alert'.
Accessibilité
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
- Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
- Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
- Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
- Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
Passez en revue les conseils fournis dans les bonnes pratiques de création de curseurs conformément aux spécifications WAI-ARIA.