Comment partager une image de façon accessible ?

On entend souvent dire, sur les réseaux sociaux, qu’il est facile de mettre une alternative à une image pour qu’elle soit accessible. Pourtant, il y a de nombreux types d’images différents (illustrations, photographies, graphiques, textes, infographies…) et la façon de les rendre accessibles peut varier. En effet, selon les besoins d’accessibilité des différents types de handicaps concernés, les solutions ne sont pas toujours les mêmes. On pense souvent aux personnes aveugles qui ne voient pas les images, mais les personnes malvoyantes ou les personnes ayant un handicap cognitif tel que la dyslexie, par exemple, peuvent également être impactées lorsqu’une image contient du texte.

Nous avons donc rédigé ce guide afin de guider les personnes qui contribuent des contenus : les rédacteurs et rédactrices web dont c’est le métier, mais également toute personne qui publie des contenus (réseaux sociaux, mails, blog, documents Word et PowerPoint…). Les cas présentés sont ceux qu’il est fréquent de rencontrer lorsque l’on contribue des contenus. Ce guide n’aborde pas les points techniques.

Nous avons choisi de prendre le parti de l’accessibilité réelle et donc d’aller un peu plus loin que ce que demande la conformité aux normes d’accessibilité, notamment en ce qui concerne les images contenant du texte.

Point de vigilance : une même image peut être concernée par plusieurs cas de figure. Par exemple, elle peut à la fois contenir du texte, être dans un lien et avoir une légende. Il faut donc bien vérifier chaque point et user de réflexion.

Note : la forme et le fond de cet article ont notamment été inspirés par l’arbre de décision pour les alternatives d’image du W3C nommé « An alt Decision Tree ».

Sommaire :

1. Définition préalable : une alternative d’image doit être courte et concise
2. L’image est-elle partagée sur un réseau social qui rend visible l’alternative d’image ?
3. L’image contient-elle du texte ?
4. L’image est-elle dans un lien ou un bouton qui permet de l’afficher en grand ?
5. L’image a-t-elle ou doit-elle avoir une légende ?
6. L’image donne-t-elle de l’information ?
7. L’image est-elle purement décorative ou sans intérêt pour les personnes ?
8. L’image n’est dans aucun des cas présentés ?

Définition préalable : une alternative d’image doit être courte et concise

L’alternative d’image (nommée parfois simplement « alt », du nom de l’attribut HTML utilisé dans le code) est la version texte de remplacement d’une image. Elle n’est normalement pas visible par défaut mais apparaît si l’image n’est pas chargée. Les technologies d’assistance utilisées par les personnes aveugles ou malvoyantes telles que les lecteurs d’écran, loupes d’écran et plages braille permettent la restitution de cette alternative si elle existe.

Une alternative d’image ne devrait pas dépasser 80 caractères pour ne pas être indigeste. Elle doit donc être courte et concise. Elle ne doit pas donner plus d’information que ce qu’on voit dans cette image.

En effet, les lecteurs d’écran, loupes d’écran et plages braille peuvent entre-couper la lecture au bout d’un certain nombre de caractères ; ce qui peut nécessiter de nombreuses manipulations pour la lire en entier.

Dans le RGAA (Référentiel Général d’Amélioration de l’Accessibilité), le glossaire indique :

Les conditions de restitution d’une alternative textuelle via des technologies d’assistance (par exemple une loupe d’écran) nécessitent qu’elle soit la plus courte possible. Une longueur maximale de 80 caractères est fortement recommandée ; elle limitera le nombre de manipulations nécessaires pour lire l’alternative par les utilisateurs de plages braille ou de loupes d’écran notamment.

Par exemple, le lecteur d’écran NVDA arrête sa lecture autour de 90 caractères et il est nécessaire de la relancer manuellement (en appuyant sur la touche flèche bas). Mais le lecteur d’écran annonce alors qu’il s’agit d’une image à chaque poursuite de lecture ; le texte en devient bien moins clair.

S’il y a besoin de plus de caractères, il est fort possible, dans ce cas, que l’image n’ait pas besoin d’une alternative (ou pas uniquement) mais d’un autre moyen pour la rendre accessible. C’est ce que nous voyons ensuite.

L’image est-elle partagée sur un réseau social qui rend visible l’alternative d’image ?

Sur les réseaux sociaux, il arrive que l’alternative d’une image soit rendue visible pour « tout le monde » (guillemets volontaires expliqués par la suite). Parfois, il s’agit d’une infobulle apparaissant au survol de l’image. D’autres fois, il s’agit d’un bouton permettant de déplier l’alternative…

Impact

Comme les réseaux sociaux rendent visible l’alternative d’image, de nombreuses personnes y mettent des textes assez longs, y ajoutent des informations non visibles dans l’image, voire même des adresses de liens (nommées techniquement « URL »).

Malheureusement, ce n’est pas une bonne pratique pour différentes raisons :

• Nous vous renvoyons d’abord à la définition préalable « une alternative d’image doit être courte et concise » ;
• Les adresses de liens dans les alternatives d’image ne sont pas sélectionnables ou cliquables. Elles le seront peut-être là où « tout le monde » peut lire l’alternative mais pas dans l’alternative originale à destination des personnes aveugles. D’ailleurs, un lecteur d’écran lira, ennuyeusement H T T P S deux-points slash slash double-v double-v double-v point… et la personne devra compter sur sa bonne mémoire pour ensuite aller saisir l’adresse compliquée (ce qu’elle ne fera sans doute pas) ;
• Selon la façon dont ce système est implémenté, en réalité, tout le monde ne peut pas lire ces alternatives. Par exemple :
  • Dans l’interface web de Mastodon, l’alternative est doublée dans une infobulle apparaissant uniquement si on survole l’image avec une souris. Ainsi, une personne naviguant au clavier, ou sur un écran tactile, ou pilotant son ordinateur à la voix n’y aura pas accès et une personne malvoyante ne pourra pas agrandir le texte de cette infobulle au zoom car c’est incompatible.
  • Sur d’autres outils, l’alternative s’affiche sur un fond sombre même si on a choisi une interface claire, ce qui peut causer des difficultés de lectures à certaines personnes astigmates, par exemple.

La possibilité de voir les alternatives d’images habituellement cachées peut être utile avant de partager un message afin de s’assurer de son accessibilité. Mais cette façon de faire crée un doublon pour les personnes aveugles qui ont accès à l’alternative de l’image initiale ainsi qu’au système pour les personnes voyantes. Cela crée également les nombreux travers évoqués dans les parties précédentes. Ce sont sur ces travers que nous pouvons agir.

Que faire ?

Nous vous renvoyons donc aux chapitres suivants pour savoir comment partager une image de façon accessible en fonction des cas.

L’image contient-elle du texte ?

Une image contenant du texte peut être, par exemple :

• Une photographie d’une page d’un livre ;
• Une capture d’un message sur les réseaux sociaux ;
• Une capture d’un morceau d’article d’un journal web ;
• Une photographie ou image avec des textes qui apparaissent dedans…

Impact

Une image qui contient du texte, si elle n’est pas rendue accessible, peut poser des difficultés ou une impossibilité de lecture ou de compréhension notamment :

• Aux personnes aveugles qui ne voient pas les images ;
• Aux personnes malvoyantes qui peuvent avoir besoin d’agrandir l’image pour lire le texte (l’image peut devenir pixelisée donc illisible) ;
• Aux personnes malvoyantes ou dyslexiques, entre autres, qui peuvent avoir besoin de modifier les contrastes, la police d’écriture pour lire le texte ;
• Aux personnes pour qui le texte n’est pas dans une langue qu’elles maîtrisent et ne pourraient donc pas facilement le traduire automatiquement.

Que faire ?

• Si le texte dans l’image est seulement décoratif (effet visuel, panneau de rue dans une photographie, pages d’un livre en arrière-plan…) : dans ce cas, il ne faut pas tenir compte de ce texte pour l’alternative de l’image ;
• Si le texte dans l’image est informatif :
  • Si le texte dans l’image est également présent en tant que vrai texte à proximité de l’image : ce texte présent à proximité de l’image reprend-il l’entièreté du texte présent dans l’image ?
    • Oui : très bien.
    • Non : ajouter le texte de l’image manquant dans le texte à proximité.
  • Si le texte dans l’image n’est pas présent autrement : ajouter l’entièreté de ce texte à proximité de l’image.

  À noter : si l’image contient uniquement un texte qu’on reproduit en vrai texte à proximité, il peut être intéressant de se demander s’il est pertinent de la conserver. En effet, des personnes malvoyantes ou dyslexiques pourraient se fatiguer à essayer de lire son contenu sans savoir, au préalable, qu’il s’agit en fait du même texte que le vrai reproduit à proximité.

Une fois qu’on a déterminé le caractère décoratif ou informatif du texte présent dans l’image, afin de savoir si l’alternative de l’image doit être vide ou non, il convient de se référer aux chapitres suivants. En effet, une image contenant du texte peut également contenir d’autres éléments visuels à l’intérieur sur lesquels il convient de se questionner sur le caractère informatif ou décoratif. Elle peut aussi se trouver dans les autres cas de figure (être dans un lien, avoir une légende…).

L’image est-elle dans un lien ou un bouton qui permet de l’afficher en grand ?

Dès qu’on peut cliquer (clic gauche) sur une image pour l’afficher en grand, elle est forcément dans un lien ou un bouton. C’est notamment le cas sur les réseaux sociaux. Il arrive que ce soit également le cas sur certains autres sites web.

Impact

Une image présente dans un lien ou un bouton permettant de l’afficher en grand ne peut jamais être considérée comme étant décorative. En l’absence d’alternative à une image dans un lien ou un bouton, on peut avoir trois cas de figure :

• Soit, sur la plupart des sites web, le lien ou le bouton est alors vide et les personnes aveugles, notamment, ne sauront pas ce que fait ce lien ou ce bouton. Le lecteur d’écran NVDA, par exemple, lit « vide » lorsqu’il rencontre un lien vide ;
• Soit, l’outil de publication ajoute une alternative d’image par défaut qui laisse simplement les personnes aveugles dans un grand flou en indiquant qu’il y a une image sans plus de détail. Par exemple, Twitter indique « Image » et LinkedIn « Aperçu de l’image ».
• Soit, sur les sites web qui ne respectent pas les standards du web, c’est le chemin de l’image ou le chemin du lien qui est restitué par défaut par les lecteurs d’écran et plages braille utilisés notamment par les personnes aveugles. Par exemple, sur l’interface web officielle de Mastodon, une image sans alternative sera lue : « b592baf0f16c1964.png ». Horrible, n’est-ce pas ?

Que faire ?

• Renseigner l’alternative de l’image :
  • Dans la plupart des cas : décrire l’image sommairement, même si vous la pensez décorative ;
  • Si l’image contient du texte non décoratif repris à proximité (voir chapitre « L’image contient-elle du texte ? »), alors préciser simplement quelque chose comme « Image contenant le texte reproduit ci-avant » (à adapter).
• Idéalement, compléter l’alternative de l’image, à la fin, en informant sur l’action du lien ou du bouton (exemple : « Afficher l’image en grand »). C’est quelque chose qui devrait être prévu côté développement afin de ne pas avoir à le faire manuellement à chaque fois.
  Sur les réseaux sociaux, comme toutes les images fonctionnent de la même façon dans les messages, on peut considérer que les personnes le comprennent implicitement ; ce n’est pas idéal mais il est difficile d’attendre que chaque personne ajoute cette information. C’est le réseau social qui doit corriger ce point.

L’image a-t-elle ou doit-elle avoir une légende ?

Une légende d’image est un texte, visible de tout le monde, généralement affiché sous une image pour ajouter quelques informations à propos de celle-ci.

On légende une image pour :

• Afficher les crédits (licence d’utilisation, autrice/auteur…) ;
• Expliciter ce qu’on y voit si ce n’est pas clair pour une personne voyante ;
• Indiquer la date et/ou le lieu de la prise de vue ;
• Bref, donner des informations invisibles ou incompréhensibles dans l’image afin que tout le monde ait le même niveau d’information.

Impact

Une image légendée ne peut jamais être considérée comme étant décorative. Pour être accessible, une légende d’image doit être techniquement (dans le code) associée à l’image en question.

Une légende qui n’est pas correctement attachée à son image ne permettra donc pas facilement aux personnes aveugles d’associer la légende à l’image elle-même. La compréhension du contenu peut alors être difficile.

Toutefois, certains outils, dont les réseaux sociaux, ne permettent pas d’ajouter une légende correctement attachée à son image techniquement. Sur les réseaux sociaux, l’image étant dans un message unique, le problème est limité. Sur d’autres outils permettant de rédiger des pages web entières, il faut faire attention (voir ci-après).

Par ailleurs, un texte destiné à être renseigné en légende mais que l’on placerait dans l’alternative d’image donnera plus d’informations aux personnes aveugles qu’aux autres personnes ; or, le principe de l’accessibilité est que tout le monde ait le même niveau d’information. Par ailleurs, cela pourrait poser des difficultés notamment :

• Aux personnes malvoyantes qui n’utilisent pas de lecteur d’écran et ne pourraient pas correctement voir l’image pour y trouver les informations contenues dans l’alternative ;
• Aux personnes ayant des difficultés de compréhension qui ne pourraient pas déchiffrer l’implicite d’une image ;
• Etc.

Que faire ?

L’outil a-t-il une fonctionnalité dédiée pour légender une image ?

• Oui (et on suppose que l’outil gère le code de façon conforme aux règles d’accessibilité) :
  • Renseigner une alternative à l’image qui la décrive sommairement (uniquement ce qu’on voit dans l’image) ;
  • Utiliser la fonctionnalité de légende pour y ajouter les informations de légende (crédits, lieu, etc.) ;
  • Pour pallier le manque de support de certains éléments de code, dans l’idéal, il devrait y avoir une référence textuelle entre l’alternative de l’image et sa légende. Par exemple, on peut reprendre un élément de l’alternative comme le nom de la fleur pour une photo d’une fleur précise. Pour simplifier, si la page contient plusieurs images, on peut préfixer l’alternative et la légende de l’image par « Image 1 : ». Cela permet d’accentuer le lien entre les deux pour les personnes aveugles dont le lecteur d’écran ou la plage braille ne seraient pas tout à fait à jour côté technique.
  • Exemple :

    

    Pour cette image, nous avons renseigné :

    • En alternative : « Magnolia plein de fleurs roses devant un château » ;
    • En légende : « Superbe magnolia rose devant le château de Nantes au début du printemps. » Le terme « Magnolia », repris à la fois dans l’alternative de l’image et dans sa légende, permet d’accentuer le lien entre les deux éléments.
      C’est un peu redondant mais les informations sur le fait qu’il s’agit du château de Nantes, d’un magnolia et du début du printemps n’ont pas leur place en alternative (ou pas uniquement) car tout le monde ne peut pas les deviner rien qu’en voyant l’image.
• Non : alors, voici une façon de faire pour tenter de relier l’image à sa légende (note : dans ce cas, le code n’est donc pas conforme aux règles d’accessibilité, il s’agit d’un pis-aller) :
  • Renseigner une alternative à l’image qui la décrive sommairement (uniquement ce qu’on voit dans l’image) ;
  • Ajouter une référence textuelle entre l’alternative de l’image et sa légende. Par exemple, on peut reprendre un élément de l’alternative comme le nom de la fleur pour une photo d’une fleur précise. Pour simplifier, si la page contient plusieurs images, on peut préfixer l’alternative et la légende de l’image par « Image 1 : » ;
  • En fin d’alternative, ajouter « (légende ci-après) » afin que les personnes aveugles soient au courant de la présence d’une légende ;
  • Indiquer en amont de la légende « Légende de l’image 1 : » (à adapter selon le préfixe choisi).
  • Exemple : Si on reprend la photo du magnolia précédente, nous aurons :
    • En alternative : « Magnolia plein de fleurs roses devant un château (légende ci-après) » ;
    • En légende : « Légende : Superbe magnolia rose devant le château de Nantes au début du printemps. » Le terme « Magnolia », repris à la fois dans l’alternative de l’image et dans sa légende, permet d’accentuer le lien entre les deux éléments.

Quoiqu’il en soit, ces informations de légende ne doivent jamais être dans l’alternative d’une image car l’alternative d’une image est un texte de remplacement si on ne voit pas l’image. Elle ne doit donc pas contenir des éléments qui ne sont pas visibles dans l’image.

L’image donne-t-elle de l’information ?

Une image porteuse d’information est une image qui véhicule une information nécessaire à la compréhension du contenu. Si jamais on la retire, cela peut causer une perte d’information ou le contenu peut prendre un sens différent.

Impact

Une image porteuse d’information qui n’est pas accessible ne permettra pas aux personnes aveugles et à certaines personnes malvoyantes de disposer de l’information qu’elle contient.

Les images contenant des messages cachés, de l’implicite, des blagues peuvent également poser des difficultés aux personnes ayant un handicap cognitif ou intellectuel si elles ne sont pas correctement accessibles.

Que faire ?

• Si c’est une image simple ou une photographie : renseigner une alternative à l’image qui la décrive sommairement (uniquement ce qu’on voit dans l’image) ;
• Si c’est un graphique, une infographie ou un autre élément d’information complexe :
  • Renseigner une alternative à l’image qui dit brièvement de quoi il s’agit (exemple : « Infographie sur l’inaccessibilité des sites web publics ») ;
  • Ajouter en fin d’alternative qu’une description détaillée (ou transcription) est donnée après l’image : « (description détaillée ci-après) » ;
  • Sous l’image, réaliser une version texte de l’image avec les éléments structurant appropriés (titres, listes…) si besoin. Les éléments informatifs visuels et textuels doivent être écrits de manière à ce qu’on comprenne le texte sans voir l’image.
    Par exemple, s’il s’agit d’un graphique en camembert, présenter les résultats du graphique sous forme de liste à puces.
  • Vous pouvez retrouver différents exemples dans les liens ci-dessous :
    • Des graphiques en camembert sur l’Observatoire du respect des obligations d’accessibilité numérique ;
    • Des graphiques en courbes ou en barres dans le rapport « The WebAIM Million » (en anglais) ;
    • Une infographie sur le cadre législatif de l’accessibilité numérique en France en 2019 (ce n’est plus totalement à jour en 2024 mais c’est pour l’exemple de mise en accessibilité) sur le site d’Ekino.
• Si l’image contient un message caché, de l’implicite, une blague : cette information doit être visible par tout le monde et devra se trouver en légende (voir chapitre « L’image a-t-elle ou doit-elle avoir une légende ? ») ;
• Si le texte à proximité de l’image contient déjà l’entièreté de l’information véhiculée par l’image : alors, il s’agit d’une image décorative. Laisser l’alternative vide.

Point de vigilance : si l’image contient du texte, est utilisée dans un lien ou un bouton, possède une légende, se référer également aux chapitres précédents.

L’image est-elle purement décorative ou sans intérêt pour les personnes ?

Une image décorative est une image qui n’apporte aucune information par rapport au contenu dans lequel elle se trouve. Si on la retirait du contenu, il n’y aurait pas de différence fondamentale, pas de perte d’information.

Attention : selon le contexte dans lequel une image est utilisée, elle peut être parfois décorative et parfois informative.

Impact

Une image décorative n’a pas besoin d’être restituée aux personnes aveugles qui ne la voient pas. Si celle-ci est restituée malgré tout, cela ajoute du contenu inutile et peut provoquer ce qu’on appelle alors « du bruit ».

Pour une seule image, ce n’est pas très impactant mais si cela concerne plusieurs images dans une page ou dans un site web, cela peut vite devenir gênant.

Que faire ?

L’alternative doit être vide.

Point de vigilance : si l’image contient du texte, est utilisée dans un lien ou un bouton, possède une légende, se référer aux chapitres précédents.

L’image n’est dans aucun des cas présentés ?

Ce guide n’est pas exhaustif. Il est possible que vous soyez dans une situation que nous n’avons pas décrite.

Il est possible également que vous ne sachiez pas comment traiter une image en particulier qui a peut-être ce petit truc en plus compliqué, etc.

Peut-être pouvons-nous vous aider ? N’hésitez pas à nous contacter, nous proposons même une prestation de conseil à l’heure pour des interventions ponctuelles !