Visuels décoratifs ou informatifs

Dernière mise à jour : 31 mars 2026

Description et règles d’accessibilité à propos des visuels décoratifs ou informatifs d’une interface.

Comment les différencier ?

Visuel décoratif

Un visuel décoratif peut être retiré ou remplacé sans changer la signification ou la compréhension de la page. Comme il n’apporte pas d’information utile, il doit être développé pour être ignoré par toutes les technologies d’assistance.

Visuel informatif

Un visuel informatif ajoute une information complémentaire ou aide à comprendre le contenu d’une page. Lorsqu’il est présent dans un composant, il doit être lié au sujet ou contribuer à contextualiser l’information.

Comment les rendre accessibles ?

Étape 1 : déterminer le rôle du visuel.

  • On reconnaît un visuel décoratif si l’information qui y est associée est disponible dans un contenu textuel adjacent.
  • On reconnaît un visuel informatif si l’information qu’il transmet n’est pas présente dans le texte qui y est adjacent ou s’il contient du texte qui a une valeur informative, même si ce texte apparaît ailleurs dans la page. Par exemple, un visuel est informatif si, en le retirant, on perd de l’information. On peut aussi considérer que le logo d’Hydro-Québec est informatif, puisqu’il affiche le nom de l’entreprise.
femme au bord d'une fenêtre qui lit un livre
Exemple de visuel décoratif
thermostats à 0$
Exemple de visuel informatif

Étape 2 : appliquer les règles d’accessibilité qui y correspondent.

Les visuels décoratifs n’ont pas besoin de texte de remplacement, alors que les visuels informatifs doivent en avoir un, en plus de respecter le bon niveau de contraste. Tous les conseils pour rédiger ce texte efficacement se trouvent dans la page Textes de remplacement.

En cas de doute, il est préférable de se référer aux règles d’accessibilité propres à chaque composant.