Accessibilité des images avec le RGAA

Les critères du référentiel général d'amélioration de l'accessibilité

Auteur : Benjamin Thiers · Publié le : 14/08/2025 · Mis à jour le : 02/01/2026

Benjamin Thiers | Accessibilité sites web | RGAA : Référentiel général d’amélioration de l’accessibilité | Accessibilité des Images (RGAA)

L’accessibilité des images constitue la première thématique du référentiel général pour l’amélioration de l’accessibilité. Si ce volet n’est pas le plus difficile, il demande une certaine réflexion et un sens de l’analyse.

Je vous aide à acquérir les bases de l’accessibilité des images dans le respect des critères du RGAA, sans négliger la dimension SEO qui demeure au cœur de mes compétences.

1. Chaque image porteuse d’information a-t-elle une alternative textuelle ?

Si vous décidez de maîtriser les critères du RGAA, votre toute première mission sera de distinguer les images porteuses d’information des autres images.

Le principe d’équivalence

Gardez à l’esprit que le RGAA prône le principe d’équivalence : toute donnée visible par un utilisateur “ordinaire” doit également être accessible à un internaute en situation de handicap.

La notion d’image porteuse d’information dépend ainsi du contexte. L’image ci-dessous, masquée aux lecteurs d’écran car décrite juste après, présente par exemple une accroche intitulée “Partenaires médias pour maximiser votre impact” et les logos des entreprises Amazon Ads, Google Campaign Manager, Google, TikTok et Meta.

Ces logos sont des images porteuses d’information car les noms des entreprises ne sont pas repris sous les images. Je dois donc préciser l’entreprise comme nom accessible pour chaque logo.

Mais si le nom de l’entreprise avait été précisée sous l’image, celles-ci seraient devenues décoratives car l’information (la liste des partenaires médias) aurait été accessible aux lecteurs d’écran grâce aux intitulés textuels sous les images.

Le nom accessible

Une image qui apporte une information à l’utilisateur doit donc forcément posséder une alternative textuelle. Ce nom accessible permet notamment aux personnes malvoyantes utilisant un lecteur d’écran d’accéder à l’information. Les solutions préconisées par le RGAA dépendent de la nature de l’image.

Images classiques (<img> ou balise possédant l’attribut WAI-ARIA role="img")

Les technologies d’assistance comme les lecteurs d’écran vont prendre comme nom accessible, par ordre de priorité :

L’attribut aria-labelledby (référence vers un texte présent ailleurs dans la page) ;
L’attribut aria-label (texte directement dans l’attribut) ;
L’attribut alt ;
L’attribut title (pour <img> uniquement).

Seul l’élément de plus haut niveau est lu : par exemple, si une image porteuse d’information possède le code <img src=”/monimage.png” aria-label=”Google” alt=”moteur de recherche”>, le nom accessible est Google car l’aria-label a une priorité supérieure au alt.

Zones d’images réactives (<area>)

Alternatives possibles :

Attribut aria-label
Attribut alt

Boutons image (<input type="image">)

Alternatives possibles :

Attribut aria-labelledby
Attribut aria-label
Attribut alt
Attribut title

Images réactives côté serveur (<img ismap>)

Alternative possible :

Fournir un mécanisme équivalent (ex. liens ou boutons permettant la même navigation que le clic sur l’image)

Images vectorielles (<svg>)

Conditions :

Attribut role="img" obligatoire

Alternative via :

Élément &lttitle&gt
Attribut aria-labelledby
Attribut aria-label

Images objet (<object type="image/...">)

Conditions

Attribut role="img" obligatoire

Alternative via :

aria-labelledby
aria-label
title

Ou contenu alternatif (ex. lien ou bouton adjacent, ou mécanisme pour remplacer l’objet)

7. Images embarquées (<embed type="image/...">)

Conditions :

Attribut role="img" obligatoire
Alternative via :
- aria-labelledby
- aria-label
- title
Ou contenu alternatif (lien ou bouton adjacent, ou mécanisme de remplacement)

8. Images bitmap (<canvas>)

Conditions :

Attribut role="img" obligatoire si utilisé comme image
Alternative via :
- aria-labelledby
- aria-label
Ou :
- Contenu alternatif entre &ltcanvas&gt et &lt/canvas&gt
- Lien ou bouton adjacent
- Mécanisme de remplacement

2. Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?

Si les images porteuses d’information doivent avoir une alternative textuelle accessible aux lecteurs d’écran, ce n’est pas le cas pour les images purement décoratives, qui alourdissent et complexifient le contenu restitué aux personnes malvoyantes.

Seules les images décoratives avec des légendes doivent avoir une alternative textuelle.

Image décorative <img> sans légende

Attribut alt="" vide sans autre alternative textuelle
Ou attribut aria-hidden="true"
Ou attribut role="presentation" (ou role="none", bien que moins supporté).

Note : les solutions aria-hidden="true" et role="presentation" sont la meilleure option pour un site à la fois conforme aux critères RGAA et SEO-friendly. Pensez à renseigner votre attribut alt="" !

Zone non cliquable <area> décorative

Attribut alt="" vide sans autre alternative textuelle
Ou attribut aria-hidden="true"
Ou attribut role="presentation" (ou role="none", bien que moins supporté).

Image objet <object type="image/..."> décorative sans légende

Attribut <aria-hidden="true>
Aucune alternative textuelle dans l’élément
Aucun texte entre <object> et /code></object>.

Image vectorielle <svg> décorative sans légende

Attribut aria-hidden="true"
Aucun élément ou attribut fournissant une alternative textuelle
Balises <title> et <desc> absentes ou vides
Aucun attribut title sur <svg> ou ses enfants.

Image bitmap <canvas> décorative sans légende

Attribut aria-hidden="true"
Aucun contenu alternatif dans ou entre les balises <canvas>
Aucun élément enfant fournissant une alternative textuelle.

Image embarquée <embed type="image/..."> décorative sans légende

Attribut aria-hidden="true"
Aucun contenu alternatif ni texte enfant.

Astuces et tutoriels sur l'accessibilité Web

3. Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente ?

La présence d’une alternative textuelle pour les images porteuses d’information est un critère d’accessibilité présent dans le RGAA. Mais la pertinence de ce texte est aussi importante que sa présence : celui-ci doit permettre aux utilisateurs de lecteurs d’écran d’avoir accès à une information similaire aux internautes utilisant un navigateur web classique.

Par exemple, pour une image servant de bouton de validation d’une action :

Attribut alt=”Bouton” : non pertinent ;
Attribut alt=”Valider le formulaire” : pertinent.

4. Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?

Pour chaque type d’élément :

<img>,
zone <aera> d’image réactive,
bouton image <input type="image">,
image objet <object>,
image embarquée <embed;gt,
image vectorielle
image bitmap <canvas>

L’alternative textuelle ou le contenu alternatif doit être pertinent quand il est présent. Les attributs concernés sont :

alt
title
aria-label
Texte associé via aria-labelledby
Et, le cas échéant, le contenu alternatif intégré (notamment pour <object>, <embed />, <canvas>).

Vous devez vous assurer que ces alternatives transmettent correctement l’information ou la fonction attendue, sans ambiguïté ni confusion, et qu’elles reflètent fidèlement la finalité du CAPTCHA ou du test visuel.

5. Pour chaque image utilisée comme CAPTCHA, une solution d’accès alternatif au contenu ou à la fonction du CAPTCHA est-elle présente ?

Cette règle permet aux utilisateurs en situation de handicap de répondre aux conditions de réussite du CAPTCHA, qu’il s’agisse de l’image du CAPTCHA ou du bouton associé à celle-ci.

Pour les images utilisées comme CAPTCHA

Les images au format :

<img>
<area>
<object>
&ltembed>
<svg>
<canvas>
Attribut WAI-ARIA <role="img">

Doivent être accessibles par l’une de ces deux options :

Au moins un CAPTCHA non graphique est également proposé (ex : CAPTCHA audio, envoi du code par SMS, etc.) ;
Il existe une autre solution d’accès à la fonctionnalité qui est sécurisée par le CAPTCHA.

Pour les boutons associés au CAPTCHA

Les boutons doivent également être accessibles par l’une de ces deux options :

Au moins une autre forme de CAPTCHA non graphique est également disponible(ex : CAPTCHA audio, envoi du code par SMS, etc.) ;
L’utilisateur se voit proposer une autre solution d’accès à la fonctionnalité sécurisée par le CAPTCHA.

6. Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?

La longue description apporte une information plus complète sur l’image. Par exemple, la longue description d’une infographie va détailler les données chiffrées présentées sur l’infographie.

Notez que l’élément longdesc est déprécié aujourd’hui.

Trois solutions vous permettent de répondre aux critères du RGAA :

Attribut longdesc vers une page ou section contenant la description détaillée
Alternative textuelle mentionnant la description détaillée adjacente
Lien ou bouton adjacent permettant d’accéder à la description détaillée

<svg>

Quatre options sont possibles :

aria-label contenant l’alternative et la référence à la description ;
aria-labelledby associant alternative et description ;
aria-describedby associant la description ;
Lien ou bouton adjacent vers la description.

Quatre options sont possibles pour les images &ltcanvas&gt :

aria-label contenant l’alternative et référence à la description
aria-labelledby associant alternative et description
Contenu textuel entre &ltcanvas&gt et &lt/canvas&gt faisant référence ou servant de description détaillée
Lien ou bouton adjacent vers la description

Tous types avec aria-describedby

Balises concernées :

<img>,
<input type="image">,
<area>,
<object>,
<embed>,
<svg>,
<canvas>
élément avec role="img"

Pour ces balises, vous devez vérifier que aria-describedby pointe bien vers la description détaillée

Élément avec role="img"

Quatre solutions s’ouvrent à vous :

aria-label contenant l’alternative et référence à la description
aria-labelledby associant alternative et description
aria-describedby associant la description
Lien ou bouton adjacent vers la description

7. Pour chaque image porteuse d’information ayant une description détaillée, cette description est-elle pertinente ?

Le contenu de la description longue doit être pertinent.

Dans le référentiel général d’amélioration de l’accessibilité, vous devez associer ce point avec les spécifications du point précédent “Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?” :

Vous avez contrôlé la présence d’une description détaillée ;
Vous vérifiez la pertinence de celle-ci.

Qu-entend-on par description détaillée pertinente ?

Une description détaillée pertinente, dans l’esprit du RGAA, doit reprendre les informations importantes communiquées par l’image afin de les rendre accessibles aux utilisateurs de lecteurs d’écran. Par exemple, pour une infographie qui présente une étude, la description détaillée affichera les résultats et les chiffres de l’étude.

8. Chaque image texte porteuse d’information, en l’absence d’un mécanisme de remplacement, doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée ?

Le texte stylé est un texte mis en forme par une feuille de styles dans le vocabulaire utilisé par les rédacteurs du RGAA.

Images texte porteuses d’information

Types d’images concernées :

<img>
Elément avec role="img"
<inpu type="image">
<object>
<embed>
<svg>

En l’absence de mécanisme de remplacement, un texte stylé doit être proposé (hors cas particulier).