• Accueil
•   >  Recueil
•   >  Quelques notes sur les thématiques du RGAA
•   >  Images

Images

RGAA : Images

• Nom accessible
• Images décorative
  • Bitmap
  • Vectorielles
• Images porteuses d’information
  • Bitmap
  • Vectorielles
• 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é :

1. aria-labelledby
2. aria-label
3. alt
4. title
5. 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 natif
• aria-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'altest 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 fonction
• alt sur chaque area

<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