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.

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.