- Accueil
- > Recueil
- > Quelques notes sur les thématiques du RGAA
- > Images
Images
31 janvier 2023- Nom accessible
- Images décorative
- Images porteuses d’information
- SEO
- Image map
- Images description détaillée
- Image captcha
- Texte en image
- Images légendées
Nom accessible
Utiliser par les lecteurs d'écran, le nom accessible n'est pas toujours affiché (le alt
par exemple)
<img src="img.png"
alt="2019 EESC Civil society prize Award ceremony 12 december 2019"
aria-label="image"/>
Le nom accessible de l'exemple sera : « image »
En cas d’implémentation multiple, le nom accessible utilisera par ordre de priorité :
aria-labelledby
aria-label
alt
title
- Si aucune des attributs précédents est valide, il n'y aura pas de nom accessible attribué
Images décorative
- Pas d'information dans l'image ni de volonté d'en transmettre une
- Une image peut comporter du texte sans que celui-ci soit à but d'informatif, elle peut être juste décorative pour habiller une section
Bitmap
alt=""
préféré cet attribut car natifaria-hidden="true"
role="presentation"
<img src="image.png" alt="" />
<img src="image.png" aria-hidden="true"/>
<img src="image.png" role="presentation"/>
Vectorielles
aria-hidden="true"
sur l’élément<svg>
- Aucun des attributs suivants ne doit être présent :
aria-label
,aria-describedby
,aria-labelledby
,role="img"
,title
- Les balises
<title>
et<desc>
doivent être vides ou absentes
<svg aria-hidden="true">
…
</svg>
Images porteuses d’information
Vérifier auprès du contributeur ou de ce qu'a fait le bloc quelle information il veut véhiculer
Bitmap
alt
renseigné, solution a privilégiétitle
aria-label
aria-labelledby
Ne pas cumuler les méthodes car ça peut être contre-productif
aria-label
écrasera le rendu de alt
aria-labelledby
écrasera le rendu de tous le reste !
<img src="image.png" alt="2019 EESC Civil society prize Award ceremony 12 december 2019" />
Vectorielles
Il faut utiliser ses deux attributs sur l’élément
role="img"
aria-label
contenant l’alternative de l’image
<svg role="img" aria-label="Profil renseigné à 90%">
…
</svg>
Un alternative existe, mais balise title
n'est pas bien supporté, préféré la première version
<svg role="img" aria-labelledby="title_svg">
<title id="title_svg">Profil renseigné à 90%</title>
…
</svg>
SEO
- Mettre plein de mot clé dans l'
alt
est une idée reçue, ça ne fonctionne pas - Si l'équipe SEO impose de mettre du contenu dans le alt, ajouter
aria-hidden="true"
pour que le texte ne soit pas interprété pour les utilisateurs
<img src="" alt="Carte France Production Usine" aria-hidden="true" />
Image map
alt
sur l'img
pour décrire sa fonctionalt
sur chaquearea
<img src="" alt="Carte de France" usemap="#LIEUX" />
<map id="lieux" name="LIEUX">
<area href="regi42" alt="Alsace">
<area href="regi53" alt="Bretagne">
</map>
Images description détaillée
Description détaillée adjacente où bien lien adjacent
Exemple :
access42.net (description détaillée adjacente)

Commme aria-label
et aria-labelledby
ne sont exploités que par les lecteurs d’écrans.
La meilleure solution est de proposer une alternative (modal, nouvelle page ou afficher/masquer)
Mettre un alt
trés général puis le bouton «lire la description détaillée de l'infographie» par exemple
<img src="img.png" alt="infographie" />
<a href="description.html">Description détaillée de l'infographie</a>
<img src="img.png" alt="infographie" />
<button aria-expanded="false">Description détaillée de l'infographie</button>
Image captcha
L’alternative de l’image doit permettre d’identifier la nature de l’image
<img src="" alt="Code de confirmation à saisir"/>
Proposer une alternative
- Captcha sonore; pas idéal, le son peut être dangereux pour certaines typologies
- Captcha de logique; pas conseiller car problématique pour certaines typologies
- Envoi du code par email/SMS; Recommander si possible car plus lourd techniquement
Le captcha de google est conforme !
Texte en image
Interdit sauf pour les logos
ou proposer un mécanisme de remplacement :
- Déclencher par l'utilisateur via une option accessibilité
- via un plugin

Images légendées
Légende : texte adjacent à une image
Si un alt
est renseigné, il faudrat reporter son contenu dans le aria-label
et dans la figcaption
<figure role="group|figure" aria-label="alt-image Légende de l’image">
<img src="…" alt="alt-image" />
<figcaption>
alt-image Légende de l’image
</figcaption>
</figure>
<figure role="group|figure" aria-label="Légende de l’image">
<img src="…" alt="" />
<figcaption>
Légende de l’image
</figcaption>
</figure>
Si un lien est présent dans le figcaption
, reporté unique son intitulé dans le aria-label