Images IMG

Implémentation des images <img> selon qu'elles sont décoratives, informatives ou illustratives.

Image IMG décorative : pas d’alternative textuelle

Pour savoir si une image est décorative, le plus simple est d’imaginer qu’il n’y a pas d’image et de se poser ensuite la question : « Est-ce que je perds de l’information ? ». Si la réponse à la question est « Non », alors l’image est décorative.

Quand les images sont décoratives, on n’ajoute pas d’alternative textuelle (alt). On peut alors coder l’image de plusieurs manières :

avec une alternative textuelle vide alt="" :

<img src="mon_image_decorative.png" alt="">

Image IMG illustrative ou informative

Cas d’une image « simple »

On posera un attribut alt décrivant l’information contenue dans l’image. Si l’image comporte du texte, on reprendra a minima celui-ci dans l’attribut alt.
Un exemple typique est celui du logotype.

Visuel

Code HTML

<img src="/images/logo-sofeve.webp" alt="Sofève-Concept">

Cas d’une image « complexe »

Typiquement, une image complexe est un graphique, une infographie ; bref, une image qui nécessite une description détaillée car nécessitant plus de 6 mots pour la décrire (la longueur recommandée pour remplir l’attribut alt’ est de 5 à 6 mots).
Dans ce cas la description de l’image serait trop longue pour être contenu dans un attribut alt , on proposera alors sa description dans un texte proche de l’image concernée.

La théorie…

En théorie, d’après la documentation du W3C, il est tout à fait possible de proposer une description longue de l’image en utilisant l’attribut aria-describedby ou l’attribut longdesc. L’attribut aria-describedby ou l’attribut longdesc font alors référence à un id posé sur l’élément qui décrira l’image ; l’attribut alt qui sera quand même renseigné en reprenant (ou pas) le début de la description longue.

Visuel
Répartition des handicaps selon leur visibilité

Code HTML

Dans cet exemple, le texte descriptif ne peut être lu que par les logiciels de synthèse vocale via la classe de style «.sr-only».

<img src="/images/handicap-repartition.webp" aria-describedby="description" alt="Répartition des handicaps selon leur visibilité">
<p id="description" class="sr-only">Répartition des handicaps selon leur visibilité. 20% des handicaps sont visibles (handicap moteur, handicap visuel) et 80% des handicaps sont invisibles (handicap auditif, psychique, mental et maladie invalidante).</p>

<img src="/images/handicap-repartition.webp" longdesc="description" alt="Répartition des handicaps selon leur visibilité">
<div id="description" class="sr-only">
     <p>Répartition des handicaps selon leur visibilité. 20% des handicaps sont visibles (handicap moteur, handicap visuel) et 80% des handicaps sont invisibles (handicap auditif, psychique, mental et maladie invalidante).</p>
</div>

La classe de style .sr-only est une classe de style qui permet de masquer un contenu en le rendant malgré tout restituable par les logiciels de synthèse vocale. La meilleure syntaxe permettant cet effet est celle indiquée ci-après (source Cache-cache CSS)

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
			clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

Hélas, cette implémentation conforme à celle préconisée par le W3C est mal ou pas restituée par les synthétiseurs vocaux. On priviligiera donc l’implémentation suivante…

L’implémentation 100% compatible avec les synthétiseurs vocaux

Pour s’assurer de la restitution de la description de l’image quel que soit le navigateur et le logiciel de synthèse vocale utilisé, le texte descriptif sera proposé juste après l’image.
Au choix du concepteur, la description sera proposée sous forme de texte pliant/dépliant, d’un lien vers une nouvelle page, d’un bouton ouvrant une fenêtre modale…

Exemple avec la description détaillée en-dessous de l’image

<p>
<img src="/images/handicap-repartition.webp" alt="Répartition des handicaps selon leur visibilité (description ci-après)"><br>
Répartition des handicaps selon leur visibilité. 20% des handicaps sont visibles (handicap moteur, handicap visuel) et 80% des handicaps sont invisibles (handicap auditif, psychique, mental et maladie invalidante).
</p>

Exemple avec la description sous forme de texte affiché / masqué
Pour afficher / masquer le texte, on aura alors recours à du javascript. Un exemple complet est disponible sur le site du W3C.

<img src="/images/handicap-repartition.webp" alt="Répartition des handicaps selon leur visibilité (description ci-après)">
<button aria-expanded="false" aria-controls="description">Description détaillée de la répartition des handicaps selon leur visibilité</button>
<div id="description" class="sr-only">
     <p>Répartition des handicaps selon leur visibilité. 20% des handicaps sont visibles (handicap moteur, handicap visuel) et 80% des handicaps sont invisibles (handicap auditif, psychique, mental et maladie invalidante).</p>
</div>

Images utilisées seules comme liens ou boutons

Dans le cas où une image seule sert de lien (une exemple typique est l’image en forme de maison pour représenter le lien vers la page d’accueil) :

la balise a du lien ne contiendra aucune description (pas de title ou pas de aria-label) ; idem pour une balise button ;
l’alternative textuelle alt de l’image servira d’intitulé du lien.

Exemple pour une image-lien

<a href="/">
   <img src="maison.png" alt="Accueil" />
</a>

Exemple pour une image-bouton

<button>
    <img src="astuce.png" alt="Astuce">
</button>

Image-bouton utilisant input type="image"

<input type="image" src="loupe.svg" alt="Lancer la recherche" />

Images utilisées avec du texte comme liens ou boutons

Dans le cas où un lien ou un bouton est représenté à la fois par une image et du texte, alors l’image sera considérée comme décorative et donc implémentée avec un attribut alt vide.

<a href="/">
   <img src="maison.png" alt="" />Accueil
</a>

<button>
    <img src="astuce.png" alt="">Astuce
</button>

N.B. : il est aussi tout à fait possible dans ce cas, d’implémenter l’image via CSS.