Une image sur un site web peut contenir une information essentielle. Pour les technologies d’assistance utilisées par les personnes aveugles ou malvoyantes, cette information n’existe que si elle a été mise en texte. Un lecteur d’écran lit par exemple ce qui est écrit, pas ce qui est montré. C’est le principe de l’accessibilité des images : rendre visible, sous forme de description textuelle, ce qu’une image montre.
Dans de nombreuses organisations, cette qualification d’image est encore traitée comme une règle purement technique. En réalité, elle relève aussi d’un travail éditorial : retranscrire le rôle de l’image dans la compréhension du contenu pour les utilisateurs ne naviguant pas à la vue.
Pourquoi l’accessibilité des images dépasse le périmètre du technique, quand décrire une image et comment intégrer les règles d’accessibilité des images dans les processus éditoriaux : Pépinia vous en dit plus dans cet article.
L’alternative d’image en accessibilité : qu’est-ce que c’est ?
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 par exemple. Les technologies d’assistance utilisées par les personnes aveugles ou malvoyantes telles que les lecteurs d’écran, autres outils vocaux et plages brailles permettent la restitution de cette alternative si elle existe. Une alternative textuelle correctement rédigée leur permet d’accéder au contenu de l’image au même titre que les autres utilisateurs.
La bonne complétion de ces alternatives d’images fait partie d’un des nombreux critères du RGAA – le Référentiel Général d’Amélioration de l’Accessibilité – qui constitue le cadre normatif applicable aux sites publics en France et de référence pour de nombreuses organisations privées. Un critère non conforme sur ce point peut suffire à générer une non-conformité dans le cadre d’un audit.
Pourquoi et comment formaliser la qualification des images dans une organisation
L’intégration d’une image dans une interface numérique mobilise plusieurs métiers à des moments distincts : conception, développement, publication. Or aucun de ces moments ne fait l’objet d’une responsabilité explicite sur la qualification accessibilité. Sans cadre clair pour guider ces choix, les pratiques peuvent varier d’une équipe à l’autre et d’un projet à l’autre. Les mêmes erreurs réapparaissent alors progressivement, même après un audit ou une mise en conformité RGAA.
Sensibiliser les équipes à l’accessibilité est une première étape mais insuffisante pour harmoniser les décisions concrètes. Garantir l’accessibilité des images dans la durée suppose de structurer la production éditoriale et de formaliser un cadre partagé entre les équipes.
Pour formaliser ce cadre partagé, différents formats peuvent être envisagés : règles qui apparaissent dans le CMS et les interfaces de publication, dans les gabarits et modèles de contenus…
Le tout est de documenter ces règles autour des balises alt d’images et que les équipes concernées puissent rapidement s’y référer au quotidien.
Dans la majorité des organisations, la décision de qui doit remplir le alt des images reste implicite. Guider les équipes avec des règles compréhensibles par tous permet d’unifier les pratiques et de s’assurer d’une bonne conformité sur le critère des images dans le temps.
Les règles à définir pour l’accessibilité des images
Pour tout type d’image ajoutée par les équipes contenu, les équipes devraient être suffisamment guidées pour être en mesure de répondre à ces trois questions :
1- Mon image est-elle décorative ou informative ?
2- Si le texte alternatif est nécessaire : quel est le maximum de caractères pour le rédiger et quelle information doit-il restituer ?
3- Existe t’il des exceptions ? Si oui, quand la règle par défaut ne s’applique pas et donner des exemples. Ces exceptions documentées évitent que les contributeurs les traitent au cas par cas sans référence commune.
Conseils et cas pratiques
Les règles permettant aux équipes contenu de prendre en charge l’accessibilité des images doivent être contextualisées. Il faut partir des contenus réellement produits (site e-commerce, site d’actualité etc.) et définir le traitement attendu pour chaque situation.
Les exemples qui suivent partent des types de contenus régulièrement produits dans les organisations. Pour chacun, la règle de traitement attendue est précisée, accompagnée d’exemples concrets permettant aux contributeurs de l’appliquer sans ambiguïté. Ils ne constituent pas une liste exhaustive mais un modèle transposable à d’autres contextes éditoriaux.
Les images illustrant des actualités et des contenus
Dans une liste d’articles – actualités, ressources, événements – chaque entrée comporte généralement une image, un titre et un résumé. La règle par défaut pourraient être que ces images sont décoratives. Le titre et le résumé suffisent à comprendre le sujet et l’image remplit une fonction d’attractivité visuelle sans apporter d’information complémentaire.
L’exception s’applique dès lors que l’image porte une information absente du texte : une photographie identifiant le lieu d’un événement non mentionné dans le titre, un visuel montrant un résultat ou un état que le texte ne décrit pas.
La règle à documenter pourrait être formulée ainsi : « Les images des listes d’actualités sont décoratives, sauf si elles apportent une information – lieu, personne, résultat – que le titre et le résumé ne mentionnent pas. »
Exemple : Photo illustrative d’un article d’actualité autour du piratage du ministère de l’intérieur ne nécessitant pas de balise alt.
Pages institutionnelles et contenus de marque
Les images d’ambiance, de mise en scène ou de fond visuel sont généralement décoratives.
Les portraits identifiés (équipe, intervenants, partenaires) sont informatifs et doivent identifier la personne représentée, à condition que cette information ne soit pas déjà fournie par un texte adjacent.
Fiches produits et pages de contenu détaillé
Dans des contextes de fiches produits ou de pages de contenu détaillé, les images jouent souvent un rôle informatif direct : elles montrent un détail, illustrent une étape, identifient un élément que le texte seul ne suffit pas à décrire. La règle par défaut est donc inversée : ces images sont informatives jusqu’à preuve du contraire.
Le texte alternatif doit exprimer ce que l’image apporte spécifiquement. Pour une fiche produit, le texte alternatif ne répètera pas le nom du produit – déjà présent dans le titre – mais pourra préciser l’angle, la couleur, le détail visible qui justifie la présence de cette image plutôt qu’une autre.
Exemple d’une fiche produit
Dans cet exemple issu du site Westwing – site ecommerce de décoration et de mobilier – une assiette au motif feuillage est proposée à la vente. Le motif n’est pas mentionné dans le texte de description de la fiche produit tout comme dans le alt des images.
Le motif de l’assiette n’est pas précisé dans le texte de description. Seules les couleurs Blanc et Vert foncé sont annoncées.
Le texte alternatif renseigné est « Image de la galerie 2 – Assiette plate peinte à la main Swirl ». Le motif d’inspiration feuillage – information absente du texte de description et du alt de l’image – n’est donc pas restitué aux utilisateurs de technologies d’assistance.
Les icônes accompagnant des liens ou boutons
Lorsqu’une icône est seule dans un élément interactif, elle est informative et doit décrire l’action. Lorsqu’un texte visible accompagne l’icône, celle-ci est décorative. Le cas délicat est le pictogramme « nouvelle fenêtre » ou « lien externe » : si le texte du lien ne mentionne pas que celui-ci s’ouvre dans un nouvel onglet, le pictogramme devient informatif.
Cette règle doit être explicitée pour les équipes qui publient des contenus comportant des liens sortants ou des documents téléchargeables.
Les logos
Un logo identifie une marque ou une organisation. Le texte alternatif est le nom de la marque, non le mot « logo ». L’exception s’applique lorsque le nom de la marque est déjà écrit en toutes lettres à proximité immédiate – dans ce cas, le logo peut être traité comme décoratif pour éviter la redondance.
Les infographies et visuels de données
Les infographies et visuels de données sont presque toujours informatives mais leur texte alternatif est souvent rédigé comme une description visuelle (« graphique à barres représentant des données »). Le texte alternatif doit restituer la conclusion ou l’information principale que l’image est censée communiquer. Si l’infographie est complexe, un texte long sous l’infographie ou une description sous la forme d’un aria-describedby (alternative textuelle structurée) peut être nécessaire.
Exemple : Infographie avec statistiques. Un aria-describedby sera nécessaire pour restituer toutes les informations présentes dans cette image sinon une description textuelle sous l’infographie
La conformité RGAA des images ne se maintient pas seule : elle repose sur des règles explicites, intégrées aux outils et partagées par les équipes qui produisent les contenus au quotidien. Sans cadre formalisé, la réponse varie selon les interlocuteurs, les contraintes et les priorités. Un guide éditorial permet de stabiliser ces décisions et d’inscrire l’accessibilité dans les processus de production.