L’accessibilité des images : le guide complet
Pourquoi l’accessibilité des images est un enjeu majeur
Sur le web, les images jouent des rôles très variés. Elles peuvent illustrer un propos, véhiculer une information, guider la navigation ou tout simplement rendre une interface plus attrayante. Pour les personnes qui utilisent un lecteur d’écran, comme les personnes aveugles ou malvoyantes, une image n’existe que si elle est accompagnée d’un équivalent textuel. Sans cela, l’assistant vocal se contentera d’annoncer “image” ou de lire l’URL du fichier, ce qui ne transmet aucune information utile.
Les personnes daltoniennes rencontrent aussi des difficultés lorsqu’une image s’appuie uniquement sur des couleurs pour délivrer un message. Enfin, certaines personnes ayant des troubles cognitifs bénéficient de descriptions claires, qui leur permettent de comprendre plus facilement le rôle de l’image.
Garantir l’accessibilité des images permet donc à chacun de recevoir la même information, mais c’est également une obligation légale. Les référentiels WCAG (1.1.1, 1.4.5, 1.4.3) et le RGAA (critères 1.1 à 1.9) imposent que tout contenu non textuel important dispose d’une alternative compréhensible.
Quand et comment décrire une image
La première question à se poser est la suivante : l’image apporte-t-elle une information utile à l’utilisateur ?
- Si l’image est informative (une photo, un graphique, une icône qui exprime une action), elle doit avoir une alternative textuelle pertinente.
- Si l’image est décorative (une icône purement visuelle, un motif graphique), elle doit être ignorée par les technologies d’assistance.
- Si l’image est complexe (schéma détaillé, infographie, graphique de données), un résumé bref est nécessaire, accompagné d’une description longue ou de données équivalentes.
- Enfin, si l’image contient du texte, celui-ci doit être remplacé par du vrai texte HTML, sauf dans des cas particuliers comme les logos.
Voici un exemple d’un contenu comportant des images décoratives :
Ici, les images à côté des mots tomates, huiles d’olive et basilic n’apportent aucune information supplémentaire. Elles doivent donc être ignorées des technologies d’assistance, pour éviter une redondance dans la lecture de l’information pour l’usager malvoyant.
Les bonnes pratiques en HTML
Fournir un texte alternatif pertinent
Masquer les images décoratives
Images cliquables
Si une image est l’unique contenu d’un lien ou d’un bouton, le texte alternatif doit décrire la destination ou l’action. En revanche, si l’image est accompagnée d’un texte dans le même lien, l’image doit être masquée pour éviter une redondance.
Cas particulier : les SVG
- Un SVG décoratif, comme une flèche à côté d’un bouton, doit être exclu de l’arbre d’accessibilité :
- Un SVG informatif, comme un schéma ou un pictogramme fonctionnel, doit avoir un nom accessible via une balise <title> et éventuellement une balise <desc>.
Les images complexes
Un graphique ou une carte ne peut pas être résumé uniquement dans un attribut alt. Celui-ci doit contenir une synthèse du message clé, par exemple “Les ventes sont en hausse de 20 % en 2024”. Une description plus détaillée doit ensuite être fournie, dans le texte de la page ou dans une section associée (comme un <figcaption> ou un texte associé).
Le cas particulier des cartes
Les cartes constituent un exemple emblématique d’image complexe, car elles mêlent informations géographiques, topographiques et parfois interactives. Une simple description textuelle ne peut pas toujours en restituer toute la richesse, mais il est nécessaire de fournir au moins les éléments essentiels.
- Carte informative : si la carte contient des données utiles (par exemple les résultats électoraux par région, ou les zones d’intervention d’un service), une alternative textuelle doit décrire ces informations. L’idéal est de proposer une alternative au contenu telle qu’un tableau reprenant les données régionales ou d’une liste textuelle qui énumère les zones concernées.
Dans l’exemple ci-dessous, remplir la balise Alt ne suffit pas. Il faut par exemple rajouter un attribut longdesc qui donne l’URL d’une page avec la description détaillée en texte. On pourrait aussi avoir un lien ou un bouton adjacent à l’image qui amène à la description détaillée.
- Carte interactive (Google Maps, plan de salle, plan d’itinéraire) : la carte doit être ignorée par les technologies d’assistance (attribut aria-hidden=true) et une alternative textuelle doit être proposée avec le même niveau d’information. Pour un itinéraire, cela signifie fournir une version textuelle des directions (“Tournez à gauche rue de la République, continuez sur 300 m, puis…”) ; pour un plan de salle, il faut donner la liste des emplacements et des accès correspondants.
En d’autres termes, plus la carte est riche, plus l’alternative doit être détaillée. L’utilisateur doit pouvoir obtenir, sans voir la carte, soit le message principal, soit l’ensemble des données qu’elle contient, selon le contexte.
Les images de texte
- Le texte fait partie d’un logo ou d’un nom de marque d’un organisme ou d’une société ;
- Le texte ou l’image de texte est purement décoratif ;
- Le texte fait partie d’une image véhiculant une information mais le texte lui-même n’apporte aucune information essentielle ;
- Le texte ou l’image de texte fait partie d’un élément d’interface sur lequel aucune action n’est possible (par exemple un bouton avec l’attribut disabled).
Ce qu’il faut éviter absolument
- Utiliser aria-label= »hidden », qui n’est pas une valeur valide. Pour masquer une image, la bonne méthode est aria-hidden= »true ».
- Mettre un alt vague comme “image” ou “graphique”, qui ne transmet rien d’utile.
- Laisser un alt vide par erreur sur une image informative.
- Attribuer un rôle de présentation (role= »presentation ») à un élément interactif ou focusable, car il sera ignoré.
Conclusion
L’accessibilité des images repose sur une règle simple : chaque image doit avoir le bon traitement en fonction de son rôle. Si elle informe, elle doit être décrite. Si elle décore, elle doit être masquée. Si elle est complexe, elle doit être accompagnée d’une description détaillée. Et si elle contient du texte, celui-ci doit être fourni en vrai texte HTML.
En appliquant ces bonnes pratiques, on permet à tous les utilisateurs, quel que soit leur handicap, d’accéder à la même information. C’est une démarche qui améliore l’expérience utilisateur pour tous et qui répond aux obligations imposées par le RGAA et les WCAG.
Réservez
un appel de découverte
Gratuit • 45 minutes • En ligne