Accessibilité numérique : image
Aperçu des sections
-
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 -
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
-
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.
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.
Gustave Courbet, Public domain, via Wikimedia CommonsRé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.
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.
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 -
Cliquez sur l'image pour l'agrandir -
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.
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.
File:Bitmap VS SVG.svg: Yug, modifications by 3247 / *derivative work Tiger66, CC BY-SA 2.5, via Wikimedia CommonsCi-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.
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.
-
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.
Image JPG peu adaptée pour les graphiques, avec une définition trop basse.
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.
Exemple fictif d'une image au format PNG pesant 2 Mo.
Format JPG compressé et adapté à la photographie, ne pesant que 90 Ko.
-
-
S'intéresser au rôle des images dans une formation constitue une étape préliminaire pour assurer leur accessibilité.
2 minutes de lecture
-
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.
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
Exemple d'image illustrative issue de la formation Approche quantitative de jeux de données juridiquesImages 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.
Exemple d'image explicative issue de la formation Créer le visuel d'un open badge
Exemple d'image comparative issue de la formation Poster scientifiqueImages 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.
-
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.
-
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.
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.
-
-
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 ?
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.
Capture extraite de la formation Stocker ses données de façon sécurisée - Doranum -
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.
-
-
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
-
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.
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.
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 :
-
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 attributswidthetheightpour définir la taille de l'image, et dans le cas qui nous intéresse, l'attributaltpour 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
altlui 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 :
<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'attributalt, 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.
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.
Exemple d'option d'accessibilité sur PowerPoint permettant l'ajout de texte alternatif.
-
-
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 sera exploré en détail dans un 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.
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.
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.
Nadar, Public domain, via Wikimedia Commons
-
-
Tentez de valider ce cours en répondant aux 5 questions ci-dessous !
-
-
-
-
Ce forum est à votre disposition pour toute question. Vous pouvez aussi nous aider à améliorer ce cours en nous donnant votre avis.
-