États
Les états définissent un langage visuel pour communiquer l’état d’un composant lors des interactions utilisateur. Ces repères visuels aident les utilisateurs à anticiper les interactions avec les éléments du site Web.
État par défaut/prêt à l’emploi
L’état par défaut est l’état initial d’un composant ou élément tel qu’il apparaît lors du chargement. Il indique que le composant est prêt à l’emploi.
Exemples d'états par défaut
État désactivé
L’état désactivé indique qu’un composant ou un élément n’est pas interactif. Cet état se caractérise par un changement des couleurs par l’utilisation de niveaux de gris et une élévation réduite, le cas échéant.
Les états désactivés n’ont pas besoin de répondre aux exigences de contraste en matière d’accessibilité Web. Toutefois, l’état inactif peut être un obstacle à l’utilisabilité puisqu’il n’indique pas à l’utilisateur ce qui doit être fait pour poursuivre la tâche en cours.
Les composants désactivés ne peuvent pas être mis au focus et ne changent pas d’état lors des interactions.
Il peut y avoir plusieurs composants désactivés dans une composition.
Exemples d'états désactivés
État survolé
L’état survolé est activé lorsque l’utilisateur survole un composant avec le curseur. Il indique que l’élément est interactif.
Un seul état survolé peut être présent à la fois dans une mise en page.
Exemples d'états survolés
État au focus
L’état au focus indique qu’un utilisateur a mis en surbrillance un élément à l’aide du clavier ou de la voix. Il reprend généralement l’apparence de l’état survolé avec un ajout, souvent un contour bleu de 2 px autour du composant. Il s’applique à tous les composants interactifs.
Un seul état au focus peut être présent à la fois dans une mise en page.
Exemples d'états au focus
État enfoncé/appuyé
L’état enfoncé/appuyé indique un clic ou un tapement initié par l’utilisateur via la souris, le clavier ou la voix. C’est un état temporaire qui s’affiche brièvement. Il s’applique à tous les composants interactifs.
Un seul état enfoncé peut être présent à la fois dans une mise en page.
Exemples d'états enfoncés/appuyés
État sélectionné
L’état sélectionné est activé lorsqu’un utilisateur choisit une option parmi plusieurs. Il se manifeste par un élément visuel ou un changement de couleur de surface, ou les deux. Cet état s’applique à tous les composants qui permettent la sélection d’options.
Il peut y avoir plusieurs éléments sélectionnés simultanément dans une page, selon le type de composant.
Exemples d'états sélectionnés
État d’erreur
L’état d’erreur est activé lorsqu’une erreur se produit, comme lors de la soumission d’un formulaire avec des données non valides. Il utilise des indications visuelles et écrites pour clarifier le problème, variant selon le contexte et la gravité.
Voir les fiches Gestion d’erreurs et Message d’erreur pour plus de détails.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 15 janvier 2026