Résumé de section

  • Replier Déplier

    Bienvenue !

    Tout replier Tout déplier

    Ce cours vous offre un aperçu complet des bonnes pratiques pour l'utilisation des images dans vos ressources pédagogiques numériques en tenant compte de l'accessibilité. Vous apprendrez à optimiser les aspects techniques tels que le format de fichier et le poids, et à rédiger des textes alternatifs en fonction du contexte dans lequel l'image est utilisée. 

    Grâce à des conseils pratiques et des ressources supplémentaires, vous serez en mesure d'intégrer efficacement les images dans vos formations et d'améliorer l'expérience d'apprentissage.

    Objectifs

    • Identifier les principaux formats d’image ;
    • Définir le rôle d'une image en fonction de son contexte ;
    • Rédiger des textes alternatifs pertinents.
    Ce cours est en libre accès !

    Aucune création de compte ou d'inscription n'est nécessaire, toutefois vous ne pourrez le parcourir qu'en lecture seule.

    Pour participer aux activités (exercices, forum...), vous devez vous inscrire au cours.

    S'inscrire au cours

    • Auteur(s) / Formateur(s): Viet Jeannaud - Callisto Formation
      Public cible: Formateurs
      Date de publication: 25 janvier 2024
      Durée estimée: 45 minutes
      Prérequis: Introduction à l'accessibilité conseillée
      Licence: CC BY-NC-SA
      Open badge: Oui
      Nombre d'inscrits: 39

  • Replier Déplier

    Formats et spécificités

    Commençons par nous intéresser aux aspects techniques des images : leur format. En effet, chaque format d'image a ses spécificités qui auront une incidence en termes d'accessibilité.

    7 minutes de lecture

    • Les formats d'image les plus courants

      Vous utilisez probablement des images dans vos formations pour expliquer une notion, schématiser ou tout simplement pour décorer. Mais utilisez-vous tout le temps un format d'image adapté ?

      Un format d'image est une façon de stocker et d'organiser les informations nécessaires pour afficher une image sur un écran. C'est comme une sorte de "langage" utilisé par les ordinateurs pour comprendre et afficher une image. Chaque format a ses propres règles et caractéristiques pour décrire comment les pixels et les couleurs sont organisés, comment les données sont compressées (réduites en taille) et comment elles peuvent être utilisées.

      Regardons plus en détail ci-dessous les caractéristiques de trois formats répandus : le JPG (ou JPEG), le PNG et le GIF.


      En résumé, le JPG est un format adapté pour les photographies réalistes avec beaucoup de détails, tandis que le PNG et le GIF sont plus adaptés aux illustrations ou aux images avec des parties transparentes.

      Le JPG est souvent plus petit en taille, ce qui le rend plus rapide à charger, tandis que le PNG et le GIF offrent une meilleure qualité d'image, mais occupent plus d'espace.

    • La conversion du format d'image

      Techniquement, rien ne vous empêche de passer d'un format à un autre en convertissant votre fichier image. Beaucoup d'outils en ligne vous permettent de faire cela, à l'image du site iLoveIMG, ou encore des outils hors ligne comme Microsoft Paint, PowerPoint, ou l'application Aperçu sur Mac.

      Il peut être opportun par exemple de convertir une image PNG en JPG pour réduire le poids du fichier, car le JPG utilise une compression avec perte ce qui permet de réduire la taille du fichier.

      Retenez toutefois que vous pouvez perdre des fonctionnalités essentielles en changeant de format.

      Le JPG compresse le fichier, le PNG gère la transparence et le GIF aussi avec en plus la possibilité de faire des animations.

      Extrait de Introduction aux images numériques. [Vidéo]. Canal-U. https://www.canal-u.tv/85417

    • Définition et résolution d'image

      La définition et la résolution sont deux aspects complémentaires qui ont un impact sur la qualité et la taille du fichier.

      Définition

      La définition est généralement exprimée par la largeur et la hauteur de l'image en termes de pixels (px).

      Par exemple, une image de 1920 x 1400 pixels indique une définition de 1920 px de largeur sur 1400 px de hauteur.

      Les définitions considérées comme "haute définition" peuvent varier en fonction du contexte, mais une définition couramment acceptée pour les images haute définition est généralement à partir de 720 pixels de hauteur ou plus. 

      Représentation d'une image sous forme de grille illustrant le nombre de pixels composant une image.
      Gustave Courbet, Public domain, via Wikimedia Commons
      Résolution

      La résolution fait référence au nombre de pixels par unité de mesure physique, généralement exprimée en pixels par pouce (ppp ou dpi en anglais). Un pouce équivaut à environ 2,54 centimètres.

      Par exemple, si une image a une résolution de 300 ppp, cela signifie qu'il y a 300 pixels alignés sur une ligne d'un pouce dans l'image.


      Illustration sous forme de grille de 300 pixels contenu dans un pouce (2,54 cm).

      Une résolution élevée contribue à une meilleure qualité d'impression ou d'affichage, en particulier pour des supports physiques de petite taille comme des photos imprimées. En général, pour des images destinées à être affichées sur des écrans, une résolution de 72 ppp est souvent suffisante.

      En résumé, plus une image a une définition élevée, plus elle contient de pixels, plus elle peut s'afficher en grand. De même, plus une image a une haute résolution, plus elle a de pixels dans une unité de mesure, meilleure est la qualité d'impression ou d'affichage.

      De façon logique, augmenter la définition et la résolution d'une image accroît la quantité de pixels et, par conséquent, la taille du fichier. Cependant, cette augmentation peut entraîner des problèmes d'accessibilité en termes de temps de chargement, ce qui n'est pas recommandé d'un point de vue de la sobriété numérique. Ainsi, il est souvent nécessaire de compresser les fichiers images pour réduire leur volume et les rendre plus rapides à charger. C'est ce que nous allons explorer à présent.

    • La compression du format d'image

      Lorsque l'on construit un cours, il est fréquent de réutiliser des images issues de sites ou d'autres documents. Prenons l'exemple de l'image JPG ci-dessous téléchargée depuis le site Freepik.

      Il s'agit d'une photographie de haute qualité :

      • sa définition est de 4500  ×  3004 px ;
      • sa résolution est de 300 ppp ;
      • sa taille est de 4,5 Mo.


      Photographie d'un papillon en haute définition.

      Les caractéristiques de cette photo ne sont pas adaptées pour un usage sur le web, plutôt pour un support imprimé. Telle que vous la voyez ici, elle a été réduite pour économiser du temps de chargement mais vous pouvez la visualiser en taille réelle dans un nouvel onglet en cliquant sur le lien ci-dessous.

      Visualiser la photo en taille réelle

    • Une image haute définition n'est quasiment jamais nécessaire (à part si vous souhaitez l'imprimer). Il est donc important de réduire la taille des images pour accélérer leur affichage, tout en préservant une qualité convenable pour qu'elles restent lisibles.

      Comme pour la conversion, de nombreux sites ou logiciels existent pour compresser et réduire la taille des images. Ci-dessous par exemple, le rendu de la même image compressée à partir du site Img2Go. 

      L'échelle a été réduite de 80% :

      • sa définition est de 450 × 300 pixels ;
      • sa résolution est de 300  ppp ;
      • sa taille est de 18 Ko.


      On constate que la place occupée par l'image est plus petite, ce qui est logique puisque nous avons réduit le nombre de pixels. 

      Si l'on force l'image à s'afficher en plus grand, un effet de pixellisation apparaît, nuisant à la qualité de l'image. Vous pourrez vous en rendre compte en cliquant sur l'image pour l'agrandir.

    • La même photographie compressée à 99.61%.
      Cliquez sur l'image pour l'agrandir

    • Il faut donc jouer sur la réduction du nombre de pixels par rapport à la place que vous voulez que l'image occupe sur votre page ou support.

    • Et la résolution ?

      Il est possible de réduire la définition d'une image (donc sa taille) sans modifier sa résolution. Toutefois il est souvent recommandé de redimensionner une image en modifiant à la fois la définition et la résolution pour maintenir une qualité d'image optimale. Les logiciels d'édition d'images permettent généralement de redimensionner une image en ajustant ces paramètres de manière proportionnelle pour éviter une distorsion ou une perte de qualité excessive.

      Dans l'exemple ci-dessous, l'image d'origine d'une résolution de 300 ppp est réduite à 96 ppp. On constate que le logiciel adapte automatiquement la définition de l'image pour éviter l'effet de pixellisation. 

      Description dans la légende ci-dessous.

      Modification de la résolution de l'image de 300 ppp à 96 ppp sur Inkscape.

      Si vous utilisez des logiciels d'image, pensez à adapter la résolution en fonction de la taille que l'image est destinée à occuper pour éviter d'alourdir inutilement le poids de votre fichier.

    • Les images vectorielles

      Il existe en fait deux grands types d'images : les images matricielles que nous venons de voir (JPG, PNG, GIF...) et les images vectorielles.

      Le SVG (Scalable Vector Graphics) est un format vectoriel qui présente plusieurs avantages : il permet de redimensionner les images sans perte de qualité, offrant une netteté constante sur tous les écrans. Il prend aussi en charge l'interaction et l'animation, ce qui rend les images plus dynamiques et engageantes. C'est un choix idéal pour créer des graphiques, des illustrations et des logos. C'est aussi un format qui peut être bien plus léger que les formats matriciels.

      Comparaison entre une image matricielle pixellisée et une image vectorielle nette.
      File:Bitmap VS SVG.svg: Yug, modifications by 3247 / *derivative work Tiger66, CC BY-SA 2.5, via Wikimedia Commons

      Ci-dessous, un exemple de graphique au format SVG issu du site Electric Microscopy Data Bank (EMBD). Ce format est ici parfaitement adapté : il peut être lu par les navigateurs web, il est très léger (seulement 26 Ko) et peut être agrandi sans effet de pixelisation.

      Graphique au format SVG montrant le nombre d'entrées unique et cumulatif de la plateforme de Bio Informatique EMDB.
      Une version SVG interactive est disponible sur la page des statistiques de l'EMDB.


      Les formats vectoriels tels que SVG, EPS, ou AI, sont moins connus du grand public et peuvent nécessiter des compétences informatiques plus poussées. Des logiciels de dessin assisté par ordinateur sont nécessaires pour les manipuler. Si vous souhaitez en apprendre plus, vous pouvez consulter cette intiation au logiciel Inkscape.

  • Replier Déplier

    Formats et accessibilité

    Prendre en compte l’accessibilité passe par le choix du bon format, la qualité visuelle et la taille du fichier.

    5 minutes de lecture

    • Pour résumer ce que nous venons de voir sous l'angle de l'accessibilité, le format joue sur deux facteurs cruciaux : la qualité de l'image et la taille du fichier.

      La qualité visuelle

      La qualité visuelle est importante pour faciliter la lisibilité, en particulier pour les personnes ayant des déficiences visuelles. Pour préserver une bonne qualité, il faut un format adapté et une définition suffisante.

      Exemple d'un graphique au format JPG avec une définition trop basse, la rendant illisible.
      Image JPG peu adaptée pour les graphiques, avec une définition trop basse.
      Exemple de la même image au format SVG, avec une lisibilité parfaite.
      Image SVG adaptée pour les graphiques restant lisible si on agrandit l'image.

      La taille du fichier

      La taille du fichier est importante pour assurer un chargement rapide, notamment pour les utilisateurs avec une connexion lente ou un matériel informatique plus ancien.

      Animation d'un chargement très lent d'une image sur un écran.
      Exemple fictif d'une image au format PNG pesant 2 Mo.
      La même image sans animation.
      Format JPG compressé et adapté à la photographie, ne pesant que 90 Ko.
    • Les GIF et les problèmes de l'animation

      Les GIF animés peuvent être utilisés pour attirer l'attention ou faciliter la compréhension, mais soyez conscient des effets flash qui pourraient causer des problèmes aux personnes atteintes d'épilepsie. Veillez à les utiliser de manière modérée et réfléchie, uniquement lorsqu'ils apportent une valeur ajoutée au message que vous souhaitez transmettre. 

    • Revoyons rapidement quelques notions importantes à travers cet exercice de mise en situation.

      Mise en situation

  • Replier Déplier

    Le rôle des images

    S'intéresser au rôle des images dans une formation constitue une étape préliminaire pour assurer leur accessibilité.

    2 minutes de lecture

    • Chaque image utilisée dans une formation peut jouer différents rôles et avoir diverses fonctions dans l'apprentissage. Voici ci-dessous quelques exemples de types d'images que l'on peut distinguer.

    • Images décoratives

      Ces images sont principalement utilisées à des fins esthétiques ou pour embellir un support pédagogique. Elles n'ont pas de contenu informatif ou éducatif spécifique, mais elles peuvent contribuer à créer un environnement visuellement attrayant. Ce peut être par exemple une image de présentation du cours ou une image de fond.

      Description dans la légende ci-dessous.
      Exemple d'image décorative issue de la première diapositive de la présentation Café Renatis - Outils et formations en ligne Retour d’expérience
      Description dans la légende ci-dessous.
      Exemple d'image illustrative issue de la formation Approche quantitative de jeux de données juridiques

      Images illustratives

      Comme son nom l'indique, ces images sont là pour illustrer un propos. Elles accompagnent un récit ou une histoire, en ajoutant une dimension narrative au contenu pédagogique. Elles servent à rendre le matériel plus vivant et engageant.

      Images explicatives

      Ce type d'images vise à fournir des explications visuelles détaillées sur un sujet spécifique. Elles sont souvent utilisées pour décomposer des processus ou pour présenter des schémas, des graphiques ou des diagrammes.

      Description dans la légende ci-dessous.
      Exemple d'image explicative issue de la formation Créer le visuel d'un open badge
      Description dans la légende ci-dessous.
      Exemple d'image comparative issue de la formation Poster scientifique

      Images comparatives

      Ces images sont utilisées pour montrer des différences ou des similitudes entre différents objets, concepts ou situations. Elles permettent de mettre en évidence les caractéristiques distinctives ou les relations entre les éléments comparés.

    • Notez que cette typologie n'est ni exhaustive ni une vérité absolue. Il s'agit surtout de vous faire remarquer que chaque fois que l'on utilise une image, on le fait avec une certaine intention, de façon plus ou moins consciente. Le fait de s'attarder sur le rôle de l'image dans un cours a son importance, notamment lorsque vous allez rédiger son texte alternatif. C'est ce point que nous allons aborder dès à présent.

  • Replier Déplier

    Description d'image

    Les images contiennent souvent une légende pour apporter des informations supplémentaires, ainsi qu'un texte alternatif pour les personnes ne pouvant voir l'image.

    3 minutes de lecture

    • Le texte alternatif

      Le texte alternatif, aussi appelé "alt text", est utilisé pour fournir une description textuelle de l'image aux utilisateurs qui ne peuvent pas la voir, que ce soit en raison de problèmes techniques ou d'un handicap visuel. Son objectif est de permettre à tout le monde d'obtenir le même contenu, le même contexte et les mêmes informations.

      Le texte alternatif n'est pas visible à l'écran. C'est un texte "caché" derrière l'image qui peut être lu par les technologies d'assistance comme les lecteurs d'écran.

      Illustration d'une image avec son texte alternatif en arrière plan.
    • Texte alternatif et lecteurs d'écran

      Il existe plusieurs outils d'assistance permettant de lire ce qu'affiche l'écran, comme NVDA, Jaws, ou encore VoiceOver. Cet article du site Tactuel vous donne un aperçu de quelques-uns de ces outils. 

      Nous n'allons pas utiliser de lecteur d'écran dans ce cours, une formation à part entière serait nécessaire. Toutefois, pour vous faire une idée, vous pouvez voir dans la courte vidéo ci-dessous un exemple d'utilisation de VoiceOver lisant les contenus affichés à l'écran. Comme vous pourrez le constater, en plus des contenus textuels, il va indiquer le type d'élément sur lequel il se trouve (une image, un lien...) pour aider l'utilisateur à comprendre ce qui est affiché sur l'écran.




    • Quand l'image disparaît, le texte alternatif apparaît

      En plus d'être lu par les lecteurs d'écran, le texte alternatif peut aussi avoir son utilité lorsque l'image ne se charge pas ou n'est pas lue par le navigateur. Dans ces cas, le texte alternatif apparaît à la place de l'image, ce qui permet d'obtenir une information pertinente, même pour les personnes n'utilisant pas de lecteurs d'écran.

    • La légende

      Attention à ne pas confondre les deux, la légende d'une image et le texte alternatif servent à des fins différentes, mais ils sont complémentaires. Si le texte alternatif assure l'accessibilité en fournissant une description de base, la légende est utilisée pour des descriptions plus élaborées ou pour ajouter du contexte à l'image (source, date, licence d'utilisation, etc.), souvent dans un contexte éditorial.

      Contrairement au texte alternatif, une légende est une zone de texte visible sous l'image pouvant être enrichie de liens hypertextes.

      L'utilisation de la légende et du texte alternatif, lorsque cela est approprié, contribue à une expérience utilisateur enrichie et accessible.

      Description dans la légende ci-dessous.
      Exemple d'image contenant une légende. Source : Wikipédia
    • Comment voir le texte alternatif d'une image sur le web ?

      Le texte alternatif n'est pas visible à l'écran mais il y a un moyen de l'afficher. Il suffit de faire un clic droit sur l'image et, dans le menu contextuel qui s'affiche, de cliquer sur "Inspecter". Le code source de l'image apparaît et l'on peut vérifier le texte alternatif se trouvant dans l'attribut alt.

    • Il n'est parfois pas utile d'ajouter une légende sous une image, et il en est de même pour le texte alternatif. Voyons maintenant dans quelles circonstances il est pertinent d'ajouter un texte alternatif à une image.

  • Replier Déplier

    Quand rédiger le texte alternatif ?

    Dans certaines situations, le texte alternatif n'est pas nécessaire et peut même se révéler contraignant. C'est notamment le cas lorsqu'une information équivalente se trouve déjà sur la page.

    5 minutes de lecture

    • Les cas où il ne faut pas rédiger le texte alternatif

      Il faut s'abstenir de renseigner un texte alternatif dans certains cas. On peut en considérer deux principaux : lorsque l'image est purement décorative et lorsque le contenu informatif de l'image est déjà présent sur la page.

      1. Images décoratives

      Comme évoqué précédemment, il arrive que l'on utilise des images décoratives dans un cours. Décoratif signifie ici que l'image ne communique pas visuellement des informations essentielles pour comprendre l'objectif de la page. 

      Exemple d'image décorative

      La capture d'écran ci-dessous illustre l'utilisation d'une image décorative dans un diaporama. Pour vérifier si cette image est bien décorative, posez-vous la question suivante : perd-on une information essentielle à la bonne compréhension de la page si l'on supprime l'image ?

      Exemple d'image décorative issue d'un diaporama.
      Capture extraite de la formation Sciences et recherches participatives - Raphaëlle Bats, Urfist de Bordeaux.
    • 2. Contenu informatif de l'image déjà présent sur la page

      Il n'est pas non plus nécessaire d'utiliser un texte alternatif lorsque les informations présentes dans l'image se trouvent déjà textuellement aux abords de l'image.

      Exemple de contenu informatif déjà présent sur la page

      Dans la capture d'écran ci-dessous, l'image présente graphiquement ce qui est écrit dans le paragraphe. Si l'on indique la même information dans le texte alternatif, le lecteur d'écran répèterait la même chose deux fois, ce qui n'est pas utile, voire plutôt perturbant.

      Exemple d'image contenant une information déjà rédigée textuellement juste à côté.
      Capture extraite de la formation Stocker ses données de façon sécurisée - Doranum
    • Marquer les images comme "décoratives"

      Les images n'ayant pas besoin de texte alternatif peuvent être marquées comme "décoratives" sur la plupart des logiciels de bureautique et éditeurs de texte en ligne. Cela permet aux outils d'assistance d'ignorer l'image, sans quoi le nom du fichier sera lu.

    • Les cas où il faut rédiger le texte alternatif

      Si votre image n'est pas décorative ou contient des informations non présentes sur la page, alors il devient nécessaire de remplir son texte alternatif. 

      D'une façon générale, à chaque fois que vous insérez une image dans votre cours, imaginez que celle-ci disparaisse et relisez votre page. S'il y a des incohérences, des manques d'informations, c'est qu'un texte alternatif est nécessaire.

      Le fait d'identifier le rôle d'une image dans un cours permet déjà de mettre en lumière son objectif. Par exemple, mon image sert à comparer les différences entre deux éléments, à illustrer mon texte, à expliquer un processus, etc.

      Il faut ensuite affiner le message et trouver le bon équilibre entre ce qui doit être précisé ou non, donner les informations pertinentes de l'image sans tomber dans une description trop riche avec des détails inutiles.

      La rédaction d'un texte alternatif n'est pas chose aisée. Il faut un certain entraînement pour identifier les informations essentielles que l'on souhaite véhiculer à travers l'image. C'est ce que nous allons voir dans la section suivante.

      When writing alt text, ask yourself why the image is there in the first place, and what is the vital information it provides for people who can see it. That will help you identify the most important details you need to put in the alt text. Putting too much in could overwhelm.

    • Le cas des images fonctionnelles

      Certaines images, dites fonctionnelles, n'ont pas pour objectif premier de véhiculer d'informations mais servent plutôt à interagir. C'est par exemple le cas d'icônes ou d'images contenant un lien, permettant d'aller sur une autre page, d'imprimer un document, d'envoyer un mail, de naviguer dans une interface, etc.

      Ce type d'image peut nécessiter un texte alternatif, en fonction de la présence ou non d'informations précisant leur action.

      Le site W3C Web Accessibility Initiative (WAI) propose une page très complète pour ce type d'images.

      Extrait de la page du W3C dédiée aux images fonctionnelles, avec une icône de loupe et son texte alternatif "Search".

      Source : Functional Images, W3C Web Accessibility Initiative (WAI).
  • Replier Déplier

    Comment rédiger un texte alternatif ?

    Rédiger un texte alternatif n'est pas forcément évident. Cette section vous présente quelques principes de base pour vous y aider.

    5 minutes de lecture

    • 1. Prendre en compte le contexte

      Une image seule peut être sujette à beaucoup d'interprétations différentes. Il est donc nécessaire de prendre en compte le contexte dans lequel se trouve l'image pour bien rédiger son texte alternatif : quel est le rôle de l'image, quelles autres informations l'accompagnent. En fonction du contexte, une même image peut avoir un texte alternatif très différent, voire ne pas en avoir du tout.

      Voyons quelques exemples ci-dessous.

    • 2. Ne pas préciser "Image de"

      Les lecteurs d'écran précisent les types d'éléments qu'ils rencontrent à la lecture de la page, comme les listes à puces, les liens hypertexte et les images. Il est donc inutile de débuter un texte alternatif par "Image de". Commencez directement par la description.

      Notez cependant que dans certains cas, il peut être bien d'indiquer la nature de l'image si cela apporte une information non négligeable. Par exemple :

      • "Graphique montrant la hausse des ventes sur l'année 2020."
      • "Peinture à l'huile représentant un paysage naturel."
      • "Photographie en noir et blanc d'un monument historique."

      Suivant le contexte, la nature de l'image peut être une information importante à préciser dans le texte alternatif.

    • 3. Respecter la structure, la syntaxe, la ponctuation

      Le texte alternatif a beau être "caché" derrière l'image, il n'en reste pas moins qu'il va être lu par les lecteurs d'écran comme n'importe quel autre texte de la page. Il faut donc le rédiger de la même façon. Formez des phrases grammaticalement correctes, ponctuées et compréhensibles, plutôt qu'une suite de mots-clés.

      Description dans le texte ci-après.

      Par exemple, "Une pomme rouge brillante, posée sur une table en bois." est plus clair que "pomme rouge table en bois." 

    • 4. Être concis et précis

      Le texte alternatif doit décrire l'image de façon simple, directe, brève. Il est souvent limité à 125 caractères car beaucoup de lecteurs d'écran s'arrêtent à ce nombre.

      Description dans la légende ci-dessous.
      Moodle limite le texte alternatif à 125 caractères.

      Rédiger un texte alternatif demande un effort de synthèse, de trouver la tournure de phrase la plus simple, de choisir des termes précis. L'exercice n'est pas si évident et demande un peu d'entraînement. Justement, vous pouvez commencer dès à présent avec ce test ci-dessous :

    • Le cas des images complexes

      Les images complexes renferment des détails importants, bien plus que ce qu'une courte phrase pourrait expliquer. Ce sont souvent des graphiques, organigrammes, ou cartes, ainsi que des illustrations où la compréhension du texte de la page dépend de la compréhension de l'image. 

      Dans ce contexte, un texte alternatif en deux parties est possible, avec une brève identification de l'image et, si nécessaire, un lien vers une description détaillée, fournissant ainsi une représentation textuelle des informations clés véhiculées par l'image.

      Pour en savoir plus, consultez le site W3C Web Accessibility Initiative, Complex Images.

  • Replier Déplier

    Ajouter un texte alternatif à une image

    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.
  • Replier Déplier

    Autres points de vigilance sur l'accessibilité des images

    Nous avons vu que pour améliorer l'accessibilité des images, il est nécessaire de prendre en considération leur format (ayant une incidence sur la taille et la qualité), le rôle qu'elle joue au sein de la page pour leur attribuer ou non un texte alternatif pertinent. Toutefois d'autres points de vigilance sont à mentionner.

    2 minutes de lecture

    • Les problèmes de contraste de couleur

      Nous abordons ici un sujet qui est exploré en détail dans ce cours dédié : la question des couleurs. Il est crucial de veiller à ce que les images que vous utilisez présentent un contraste suffisant. Cela permet d'aider particulièrement les personnes atteintes de daltonisme à mieux discerner les éléments visuels.

      Prenons l'exemple du graphique ci-dessous. À première vue, trouvez-vous que les couleurs sont adéquates?

      Survolez l'image pour vérifier le rendu en nuances de gris.

      Graphique fictif comportant des couleurs non contrastées, visible au survol de la souris.


      Comme vous pouvez le constater, les couleurs bleu foncé et rouge ne se différencient quasiment plus une fois que l'on applique un filtre de nuance de gris. Suivant l'outil que vous utilisez pour construire votre ressource, vous pouvez avoir une aide à ce sujet. Par exemple, le logiciel PowerPoint offre la possibilité de vérifier le contraste des couleurs pour les arranger si besoin.

      Option de vérification des couleurs dans PowerPoint.

      Outils pour vérifier le contraste des couleurs

      De nombreux outils sur la toile permettent de vérifier les contrastes de couleur et vous proposent même des alternatives en cas de besoin. Nous pouvons citer entre autres Color Safe, tanaguru contrast finder ou encore le Contrast checker du site Coolors.

    • Le cas des images textuelles

      Dans la mesure du possible, évitez de présenter du texte important sous forme d'image. Préférez plutôt du texte réel, car il offre plusieurs avantages. Il est directement accessible aux lecteurs d'écran, peut être redimensionné par les utilisateurs, structuré correctement avec des titres et des paragraphes, et permet d'éviter les problèmes potentiels de lisibilité, tels que la qualité de l'image, la police d'écriture et le contraste de couleurs.

      Dans l'exemple ci-contre, il serait préférable de rédiger directement la citation. C'est assez simple lorsque la citation est courte. Cependant, si vous devez afficher une image contenant beaucoup de texte, il est recommandé de résumer le contenu dans un paragraphe adjacent à l'image.

      Il est essentiel de se rappeler que le texte sera toujours plus accessible qu'une image.

      Citation de Victor Hugo : "Je préfère l'avenir au passé, car c'est là que j'ai décidé de vivre le restant de mes jours."
      Nadar, Public domain, via Wikimedia Commons
  • Replier Déplier

    Testez vos connaissances

    Tentez de valider ce cours en répondant aux 5 questions ci-dessous !

    • Valider le cours

      Si vous avez eu au moins 80% de bonnes réponses au quiz, vous pouvez valider ce cours en cliquant sur le bouton ci-dessous (vous devez être inscrit au cours).

      Valider le cours
  • Replier Déplier

    En résumé

    • La question de l'accessibilité des images passe déjà par le choix adapté du format, de la définition et de la taille du fichier.

      Un autre aspect primordial est l'attribution (ou non) d'un texte alternatif. La vidéo ci-dessous, bien qu'elle s'adresse à des développeurs web, vous résume de façon claire comment remplir un texte alternatif.

      Source : Comment remplir l'attribut alt ? - École du Web, YouTube.
  • Replier Déplier

    Références

  • Replier Déplier

    Merci d'avoir suivi ce cours !

    • Forum

      Ce forum est à votre disposition pour toute question. Vous pouvez aussi nous aider à améliorer ce cours en nous donnant votre avis.

    • Sur le même thème

      Cours: Accessibilité numérique : introduction
      Cours: Accessibilité numérique : texte
      Cours: Accessibilité numérique : image
      Cours: Accessibilité numérique : vidéo
      Cours: Accessibilité numérique : couleur
      Cours: Mémoires, thèses, publications : SOYONS ACCESSIBLES !
      Cours: Créer des documents bureautiques accessibles