Contrôle segmenté

Le contrôle segmenté est un élément d’interaction avec l’interface permettant à l'usager de choisir un type de vue parmi plusieurs options d'affichage disponibles.

Le contrôle segmenté est un élément d’interaction avec l’interface permettant à l'usager de choisir un type de vue parmi plusieurs options d'affichage disponibles.

Le composant Contrôle segmenté est conçu pour être accessible et respecter les critères du RGAA. Voici les points clés à prendre en compte pour en garantir l’accessibilité.

Interactions clavier

Lorsque le focus est positionné sur un segment :

  • Flèche droite ou Flèche du bas : sélectionne le segment suivant.
  • Flèche gauche ou Flèche du haut : sélectionne le segment précédent.

Règles d’accessibilité

L’ensemble des règles d’accessibilité du champs de saisie doivent être respectées.

Structuration

  • Le contrôle segmenté est contenu dans un élément <fieldset> avec élément <legend>.
  • Chaque segment est un <input> de type radio.
  • Les segments d’un contrôle segmenté sont liés par leur attribut name qui doit être identique.
  • Le libellé des segments doit être explicite et décrire clairement l'option que le segment représente.

Contrastes de couleurs

Le composant Contrôle segmenté est suffisamment contrasté en thème clair et en thème sombre.


Restitution par les lecteurs d’écran

Aucun test de restitution n’est nécessaire pour le composant Contrôle segmenté.


Critères RGAA applicables

  • Couleurs : 3.2
  • Présentation de l’information : 10.1, 10.2, 10.3, 10.4, 10.5, 10.7, 10.11, 10.12
  • Formulaires : 11.1, 11.2, 11.4, 11.5, 11.6, 11.7
  • Navigation : 12.8, 12.9
  • Consultation : 13.9, 13.11

Références

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.