Images

Sommaire :

Alternative textuelle

1.1 [A] Alternative obligatoire

Ce critère concerne les éléments suivants :

les images insérées via un élément <img /> ;
les zones actives (les éléments <area> avec un attribut href) d’une image réactive « côté client » (élément <img /> avec un attribut usemap) ;
les boutons de formulaire de type « image » (<input type="image" />).

L’attribut alt (qui ne peut être utilisé que pour ces éléments) est obligatoire (sauf pour les éléments <area> sans attribut href).

Dans le cas d’images réactives « coté serveur » (ismap), prévoir des liens adjacents (<a>) donnant accès aux mêmes fonctions ou aux mêmes ressources.

1.2 [A] Alternative vide (images « décoratives »)

Une image « décorative » est une image utilisée à seule fin de présentation ou de mise en forme, ou une image « d’illustration » ne véhiculant aucune information nécessaire à la compréhension du contenu.

Dans le cas d’une image insérée via un élément <img />, l’attribut alt de cet élément (obligatoire) doit être vide :

<img src="image.png" alt="" />

Les éléments <area /> sans attribut href (correspondant aux zones non actives d’une image réactive) ne peuvent posséder d’attribut alt.

Les conditions suivantes doivent être remplies :

les éléments <svg>, <canvas>, <object> et <embed /> doivent posséder un attribut aria-hidden="true" ;
les éléments <svg> ne doivent comprendre aucun élément <title> ou <desc> ;
les éléments <canvas> et <objet> ne doivent posséder aucun texte entre la balise ouvrante (<>) et la balise fermante (</>).

L’élément <embed /> (HTML5) est un élément vide.

Aucun élément (et aucun élément descendant de cet élément) ne doit posséder un attribut title ou des propriétés ARIA visant à attribuer un label à cet élément (tels que les attributs aria-label, aria-labelledby ou aria-describedby par exemple).

1.3 [A] Alternative pertinente (images véhiculant une information)

L’alternative textuelle doit donner une indication de la nature et du contenu de l’image. Cette alternative doit être courte et concise (80 caractères au maximum).

Images, zones d’images réactives et boutons de type « image »

Ce cas concerne :

les images insérées via un élément <img /> ;
les zones actives des images réactives (les éléments <area /> avec un attribut href) ;
les éléments <input type="image" />.

L’alternative textuelle est donnée par la valeur de l’attribut alt (obligatoire).

Exemple dans le cas d’une image :

<img src="image.png" alt="Texte alternatif" />

Exemple dans le cas d’une zone d’image réactive :

<img usemap="#image_map" src="region.png" alt="" />
<map name="image_map">
  <area shape="rect" coords="0,0,50,50" href="ouest.html"
    alt="Région ouest" />
  <area shape="rect" coords="50,0,100,50" href="est.html"
    alt="Région est" />
</map>

Exemple dans le cas d’un bouton de type « image » :

<input type="image" src="bouton.png" alt="Fonction du bouton" />

En cas d’utilisation d’un attribut title et/ou d’une propriété aria-label ou aria-labelledby, les conditions suivantes doivent être remplies :

la valeur de l’attribut title doit être identique à celle de l’attribut alt ;
la valeur de la propriété aria-label doit être identique à celle de l’attribut alt ;
le contenu de l’élément référencé via la propriété aria-labelledby doit être identique à la valeur de l’attribut alt.

Images vectorielles (SVG)

L’élément <svg> doit posséder un attribut role="img".

L’alternative textuelle doit être donnée simultanément :

au moyen d’un attribut aria-label ;
au moyen d’un élément <desc> (inclus dans l’élément <svg>).

<svg version="1.1" role="img" aria-label="Texte alternatif">
  <desc>Texte alternatif</desc>
</svg>

La valeur de l’attribut aria-label doit être strictement identique au contenu de l’élément <desc>.

Vérifier que l’alternative textuelle est correctement restituée par les technologies d’assistance.

N.B. : L’utilisation d’un attribut title pour l’élément <svg> n’est pas conforme (ceci provoque une erreur de validation : “Attribute title not allowed on element svg at this point.”).

N.B. : Un élément <svg> peut aussi comprendre un élément <title> ; ne pas utiliser cet élément pour donner un texte alternatif à l’image.

Images insérées au moyen des éléments `<canvas>`, `<object>` ou `<embed />`

Le texte compris entre les balises <canvas> et </canvas> peut être considéré comme un texte alternatif ; vérifier dans ce cas qu’il est correctement restitué par les technologies d’assistance.

Le texte compris entre les balises <object> et </object> n’est pas considéré comme une alternative textuelle. L’élément <embed /> est un élément vide (HTML5).

En l’absence de texte alternatif, prévoir de donner accès à une alternative textuelle via un lien adjacent, ou prévoir un mécanisme permettant à l’utilisateur de remplacer l’image par un texte alternatif (ou par une autre image possédant une alternative textuelle).

L’attribut title ne peut être utilisé comme moyen pour donner un texte alternatif à l’image.

Dans le cas d’utilisation d’une propriété aria-label (ou aria-labelledby), la valeur de l’attribut attribut title – si utilisé – doit être identique à celle de la propriété aria-label (ou au contenu de l’élément référencé par aria-labelledby).

Pages : 12345