Texte de remplacement et description longue
Le texte de remplacement et la description longue rendent le contenu graphique accessible à toutes les personnes, notamment celles qui utilisent un lecteur d’écran ou qui désactivent les images. Ils assurent que l’information transmise par une image reste compréhensible, même sans support visuel.
Variantes disponibles
Deux types d’information textuelle peuvent accompagner une image :
- Texte de remplacement (attribut alt) : courte description intégrée au code, invisible pour les usagers voyants, mais lue par les lecteurs d’écran.
- Description longue : texte détaillé accessible par un accordéon, visible pour tous les utilisateurs.
Quand l’utiliser
Le texte de remplacement est toujours requis pour toute image informationnelle. Il fournit une brève description du contenu ou de la fonction de l’image. Ce texte permet à un lecteur d’écran d’annoncer l’image et d’en donner le sens général, même si la personne ne consulte pas la version visuelle.
Lorsque l’image transmet une information complexe (graphique, carte, infographie, organigramme, schéma détaillé), une description longue doit s’ajouter. Elle complète le texte de remplacement en décrivant en détail les éléments visuels, leurs relations ou les données importantes.
Éviter les descriptions redondantes : chaque texte doit avoir une fonction distincte (résumé = texte de remplacement ; détails = description longue).
Quand ne pas l’utiliser
Ne pas ajouter de texte de remplacement aux images purement décoratives. Dans ce cas, l’attribut doit être présent, mais vide : alt="".
Ne pas rédiger de description longue lorsque la légende ou le texte environnant explique déjà clairement l’image.
Anatomie
- Image principale
- Texte de remplacement (invisible)
- Description longue
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Texte de remplacement
Afin de rédiger un texte de remplacement pour des images, il faut :
- Être descriptif et précis : le texte de remplacement doit résumer clairement ce que représente l’image. Par exemple, pour un graphique, il doit mentionner les principales tendances ou données.
- Être concis : limiter la description à environ 80 à 150 caractères, espaces compris.
- Utiliser des mots-clés pertinents : inclure les termes les plus représentatifs du sujet, lorsque c’est pertinent pour le référencement.
- Aller droit au but : ne pas commencer par « image de » ou « photo de », puisque les lecteurs d’écran annoncent déjà la nature du média.
- Utiliser l’attribut alt="" (vide) si l’image est purement décorative (une icône, par exemple) ou n’ajoute aucune information.
Description longue
Afin de rédiger une description longue pour des images, il faut :
- Être explicatif et complet : décrire les éléments visuels importants, leur disposition et leurs relations. Pour une carte ou un graphique, mentionner les zones, les couleurs, les axes et les valeurs principales. Le libellé de l’accordéon affichant la description complète doit être clair (ex. : « Description textuelle de l’image »).
- Utiliser un vocabulaire clair et neutre : privilégier des phrases simples, des repères spatiaux clairs (gauche, droite, haut, bas) et des termes précis.
- Éviter les répétitions inutiles : ne pas recopier la légende ou le texte de remplacement ; la description longue doit apporter une information supplémentaire.
- Adapter la longueur au contenu : quelques phrases suffisent pour une image simple ; un court texte est préférable pour un visuel complexe.
Composition
Description détaillée des éléments constitutifs de l’orientation, avec des informations précises sur son anatomie.
Texte de remplacement
Positionnement et alignement : intégré dans l’attribut alt de la balise <img>. Il ne produit aucun rendu visuel dans la page, mais est lu par les lecteurs d’écran à la place de l’image.
Description longue
Positionnement et alignement : placée immédiatement sous l’image, accessible par un accordéon. À noter qu'un Afficher/Masquer pourrait aussi être utilisé.
Dimensions : la largeur du texte ne doit pas excéder 825 px, comme pour tout contenu textuel.
Espacements : prévoir un espacement vertical minimal de 24 px entre l’image et la description ou le lien qui y mène.
Comportements
Le comportement d’ouverture et de fermeture de la description longue suit les principes d’interaction définis pour le composant utilisé (Accordéon ou Afficher/Masquer).
Mises à jour
Cette section fournit un aperçu des changements passés et des modifications prévues pour la documentation.
| Date | Description |
|---|---|
| 22 janvier 2026 | Mise en ligne de la fiche |
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.
À consulter aussi
Dernière mise à jour : 22 janvier 2026