Éléments requis pour la compréhension

Dernière date de mise à jour : 31 mars 2026

Règles pour rendre accessibles les éléments requis à la compréhension d’une interface.

Quels sont ces éléments ?

Ces éléments sont des repères visuels qu’il faut absolument percevoir pour utiliser ou comprendre une interface correctement. Qu’il s’agisse d’une portion ou de l’ensemble d’un visuel, ils jouent un rôle essentiel dans la compréhension, l’action ou la navigation sur un site Web. Dans une page, il peut y avoir plusieurs éléments significatifs :

  • Les composants d’interface comme les boutons, les champs de formulaire, les cases à cocher, les interrupteurs et les menus.
  • Les indicateurs visuels liés à l’état des composants comme les bordures, les icônes de sélection, les états « survol », « focus » ou « sélectionné ».
  • Les objets graphiques non textuels qui portent de l’information, comme les graphiques, les diagrammes, les icônes informatives ou les graphiques de données.
    • À noter que cela s’applique seulement si ces graphiques sont nécessaires pour comprendre le contenu.

En cas de besoin, il existe une liste détaillée de ces éléments dans le guide WCAG .

Exemples où le symbole est essentiel à la compréhension

Dans ces exemples, ce qui permet de déterminer la nature du message est le symbole dans l’icône. La forme de l’icône ne communique pas d’information essentielle.

Image représentant un exemple avec un crochet désactivé et un crochet activé
Ce qui est important ici, c’est le crochet. Percevoir uniquement le cercle ne suffit pas à comprendre le message transmis.
Image représentant un exemple avec un x désactivé et un x activé
Ce qui est important ici, c’est le « x ». Percevoir uniquement le cercle ne suffit pas à comprendre le message transmis.

Exemples où le symbole et la forme sont essentiels à la compréhension

Dans les exemples suivants, c’est la combinaison de la forme et de l’icône qui indique la nature du message. Le triangle et le losange servent toujours à indiquer la même chose, soit signaler une alerte ou une erreur.

Image représentant 2 losange et un point d'exclamation
Ce qui est essentiel à comprendre ici, c'est le losange combiné à l’icône « ! ». Cet icône précise le message à interpréter, même si elle n’est pas obligatoire.
Image représentant 2 triangles et un point d'exclamation
Ce qui est essentiel à comprendre ici, c'est le triangle combiné à l’icône « ! ». Cet icône précise le message à interpréter, même si elle n’est pas obligatoire.

Comment les rendre accessibles ?

Tous les éléments significatifs doivent présenter un contraste minimal de 3:1 avec les pixels qui les entourent. Voir les combinaisons de couleurs permises et leurs taux de contraste.

Image représentant le taux de contraste
Pour évaluer le taux de contraste, il faut s’assurer de prendre la mesure sur le contour des éléments significatifs. Le but est de bien capter la différence de contraste entre les pixels du fond et de l’élément.