Résumé de section

  • Pour ajouter un texte alternatif, deux solutions : passer par le code HTML ou par un logiciel.

    3 minutes de lecture

    • Sur le web

      Le HTML est le langage utilisé pour créer et structurer des pages web. Il utilise des balises (notés entre chevrons <>) pour délimiter différents éléments du contenu, comme les titres (<h1>), les paragraphes (<p>) et les images (<img>). 

      Les balises peuvent contenir des attributs pour fournir des valeurs et propriétés sur ces éléments. Par exemple, la balise <img> peut contenir les attributs width et height pour définir la taille de l'image, et dans le cas qui nous intéresse, l'attribut alt pour ajouter un texte alternatif.

      Certains attributs sont obligatoires, comme l'attribut "source" (src) qui permet d'indiquer au navigateur web l'endroit où se trouve l'image pour pouvoir l'afficher. 

      L'attribut alt lui n'est pas obligatoire pour afficher l'image, mais il est essentiel pour indiquer aux lecteurs d'écran sa description. Rappelons aussi que ce texte alternatif sera affiché à la place de l'image si celle-ci ne peut pas être chargée.

      Voici ci-dessous un exemple de code HTML permettant d'afficher une image et d'indiquer son texte alternatif :

      Image servant d'exemple pour illustrer le texte alternatif en HTML.

      <img
      src="hommes_serrant_main.jpg"
      alt="Deux hommes d'affaires se serrant la main lors d'une réunion au bureau.">

      Si vous ne souhaitez pas ajouter de texte alternatif, pour des images décoratives par exemple, il suffit d'indiquer une valeur vide dans l'attribut : alt="". 

      En l'absence de l'attribut alt, certains lecteurs d'écran peuvent tenter de compenser en annonçant le nom du fichier de l'image, mais cela n'est généralement pas informatif ni utile pour les utilisateurs. Afin d'améliorer l'accessibilité, il est recommandé de toujours inclure l'attribut alt, même s'il est vide, pour préciser aux lecteurs d'écran d'ignorer cette image lors de la narration du contenu.

    • Ajouter un texte alternatif sans coder en HTML

      À moins que vous ne soyez développeur, il y a des chances que vous utilisiez plutôt des logiciels comme WordPress, Joomla, Drupal, ou Moodle, pour publier des contenus sur le web. 

      Ces outils web intègrent des éditeurs simplifiés, ce qui permet d'ajouter du texte alternatif sans passer par le code. Les images purement décoratives peuvent être indiquées, la plupart du temps en cochant une option ou en laissant le champ texte alternatif vide.

      Description dans la légende ci-dessous.
      Réglage d'accessibilité de WordPress permettant d'ajouter un texte alternatif à une image.

    • Sur les logiciels de bureautique

      Tout comme les logiciels de sites web, les outils de bureautique (Word, PowerPoint, Writer, Impress...), intègrent des options pour l'accessibilité. Vous pouvez ajouter un texte alternatif à vos images ou les déclarer comme décoratives pour que les lecteurs d'écran puissent les interpréter correctement.

      Description dans la légende ci-dessous.
      Exemple d'option d'accessibilité sur PowerPoint permettant l'ajout de texte alternatif.