Ajouter un texte alternatif aux images

Ajoutez une description détaillée aux images et graphiques pour favoriser la compréhension.

Les images offrent un excellent moyen d'impliquer les apprenants et favorisent la communication d'idées complexes.

Les descriptions d'image sont souvent appelées « descriptions alternatives », « texte alternatif » ou « texte alt ». Elles fournissent une description textuelle alternative à l'image. Pour les étudiants qui présentent une déficience visuelle, les descriptions d'image qui expliquent le contenu de ces dernières sont essentielles à l'apprentissage. Les descriptions textuelles peuvent également fournir un contexte plus détaillé à l'ensemble des étudiants et favoriser la compréhension.

Ally vérifie la présence de descriptions partout où il y a une image. Ally vérifie les images des pages Web ou des fichiers joints.

Ally classe les problèmes par niveau de sévérité : grave, majeur et mineur.

  • Grave. Ces problèmes font peser un risque élevé sur l'accessibilité et exigent une attention immédiate.
  • Important. Ces problèmes nuisent à l'accessibilité et méritent votre attention, même s'ils ne sont pas graves.
  • Mineur. Ces problèmes doivent être traités pour améliorer le résultat d'accessibilité.

Les images ne disposant pas de texte alternatif sont un problème majeur.

Utiliser Ally pour trouver les images ne disposant pas de description

Utilisez le rapport sur l'accessibilité d'Ally pour identifier et résoudre les problèmes d'accessibilité de votre site. Utilisez le lien fourni pour le rapport et connectez-vous. Ouvrez le rapport et consultez la liste des problèmes dans le tableau Problèmes d'accessibilité.

Le tableau Problèmes d'accessibilité se trouve à la fois dans les onglets Présentation et Domaine. Ouvrez d'abord l'onglet Domaine pour consulter les problèmes spécifiques à un domaine. 

Utiliser des images sans description ni texte alternatif constitue un problème majeur. Consultez l'onglet Majeur du tableau Problèmes d'accessibilité pour afficher la liste des problèmes majeurs. Sélectionnez les problèmes correspondant à des images sans description.

Si vous démarrez dans l'onglet Présentation, sélectionnez le problème, puis le domaine concerné.

Dans la liste, les mentions de problèmes de description d'image peuvent commencer par Image, Document ou HTML.

Depuis la liste des problèmes de description d'image du domaine en question, sélectionnez l'indicateur de résultat en regard d'un élément présentant le problème. Le volet de feed-back d'éditeur de contenu s'ouvre.

Afficher un aperçu des images sans description

Le volet de feed-back Ally vous offre un aperçu du contenu, ainsi qu'un feed-back détaillé et une assistance pour vous aider à résoudre vos problèmes d'accessibilité. Utilisez l'aperçu pour afficher les images sans description.

L'aperçu indique où surviennent les problèmes d'accessibilité spécifiques rencontrés dans le document. Les surbrillances indiquent chaque occurrence d'un problème, un type de problème à la fois. Par exemple, si vos images ne comportent pas de description alternative, des surbrillances s'affichent à chaque emplacement où ce problème spécifique se produit.

Outils d'aperçu

Utilisez les outils de l'aperçu pour explorer les problèmes dans votre document.

  • Permettent de parcourir l'aperçu du document page par page.
  • Indiquent le nombre de fois où un problème spécifique apparaît dans le document.
  • Permettent de passer d'un problème à l'autre.
  • Permettent de masquer ou d'afficher les surbrillances.
  • Permettent d'effectuer un zoom avant ou arrière sur le contenu d'aperçu.
  • Si le problème se trouve dans un document joint, téléchargez le fichier d'origine.

Suivre les étapes guidées d'Ally pour ajouter des descriptions d'image

Ally suppose que vous avez des connaissances de base en HTML et que vous savez utiliser votre système de gestion de contenu (CMS). Pour suivre les étapes guidées, vous devez savoir comment modifierune page Web dans le code HTML ou dans le code source de votre CMS.

En plus de l'aperçu, Ally vous donne des conseils pas-à-pas sur la résolution du problème.  Ally organise ce feed-back sous forme d'arbre décisionnel : il vous suffit de lire les instructions et de répondre aux invites du système. Prenez connaissance du problème, identifiez en quoi il est important et voyez comment le résoudre de façon appropriée.

Sélectionnez Comment ajouter des descriptions ? et suivez les instructions.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

Méthodes d'ajout de descriptions d'image sur les pages Web

Il existe plusieurs façons d'ajouter ou de modifier des descriptions d'image sur vos pages Web.

  • HTML : Les instructions pas à pas d'Ally vous guident dans la procédure de recherche et de modification des descriptions d'image dans le code HTML. En résumé : recherchez la page Web contenant l'image. Modifiez la page. Mettez à jour le code HTML de l'image pour inclure un attribut de texte alternatif. Enregistrez la page.
  • Paramètres d'image : La plupart des CMS permettent de modifier le texte alternatif dans les paramètres de l'image. Recherchez l'image sur la page Web ou dans le répertoire de fichiers CMS. Utilisez les outils CMS pour modifier l'image. Ajoutez la description de l'image dans le champ texte alternatif ou texte alt. Enregistrez l'image.

Consultez le site Web w3schools pour en savoir plus sur les langages HTML et CSS.

Pourquoi est-ce que je ne vois pas l'attribut « img src » dans mon HTML ?

La méthode la plus courante pour ajouter des images à une page Web consiste à utiliser l'attribut HTML img src. L'attribut HTML Img src utilise l'URL du fichier image pour placer l'image sur la page Web. Cependant, tous les CMS sont différents. Votre site peut utiliser un code ou des attributs différents. 

Par exemple, dans Drupal, vous verrez peut-être quelque chose comme ceci à la place :

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Ajoutez un texte alternatif au début de l'attribut. Par exemple,

<drupal-entity alt="add image description here" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Si vous ne voyez pas img src dans le code HTML, essayez d'utiliser les outils CMS pour modifier les paramètres de l'image. Recherchez l'image sur la page Web ou dans le répertoire de fichiers CMS. Utilisez les outils CMS pour ouvrir les paramètres de l'image. Ajoutez la description de l'image dans le champ texte alternatif ou texte alt. Enregistrez l'image.

Si vous ne savez toujours pas comment procéder, contactez l'administrateur de votre site Web ou votre développeur. Demandez-lui de vous montrer comment les images sont ajoutées à vos pages Web et comment ajouter un texte alternatif.