5. IMAGES ET ICONES

Table des matières

5.1 Images décoratives et illustratives

5.1.1 Utiliser une alternative vide sur les images décoratives et illustratives

<IMG> DÉCORATIFS/ILLUSTRATIFS

Lorsqu’une image décorative ou illustrative (image qui ne véhicule pas d’information, ex. background, teaser) est intégrée dans le code HTML, l’attribut « alt » doit être ajouté sur la balise <img /> et laissé vide (sans aucun espace entre les guillemets de alt=”").

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

Dans le cas d’une balise <img/> utilisée avec la balise <picture>, l’attribut aria-hidden=”true” doit aussi être intégré, sinon les lecteurs d’écran liront la source de l’image.

<picture>
   <source srcset="image-decorative.jpg" media="(max-width: 320px)">
   […]
   <img src="image-decorative.png" alt="" aria-hidden="true" /> 
</picture>

L’attribut « alt » est obligatoire sur les images (ne pas l’inscrire est une erreur de sémantique), par contre, l’attribut « title » est facultatif.

<SVG> DÉCORATIFS/ILLUSTRATIFS

Lorsqu’un <svg> est simplement décoratif ou illustratif, lui intégrer aria-hidden=”true”.

Dans l’exemple de code HTML ci-après, le <svg> accompagne simplement le titre « Messages d’erreur » (explicite par nature) :

<h2>
   <svg aria-hidden="true">[…]</svg>
   Messages d'erreur
</h2>

REMARQUES

Autant que possible, si vous n'utiliser pas des images <svg>, préconiser l'utilisation des images décoratives chargées dans la page à partir du CSS (background ou une police d’icônes).

ASTUCES

Afin de savoir à coup sûr si une image est décorative/illustrative ou informative, se demander si l’absence de celle-ci altérerait la compréhension du contenu. Si oui, renseigner le texte de remplacement; si non, laisser le texte de remplacement vide.

5.2 Images informatives

5.2.1 Ne pas utiliser les CSS pour afficher les images informatives

Les CSS ne doivent jamais être utilisés pour afficher des images porteuses d’informations. En d’autres termes, chaque fois qu’une image fournit de l’information, elle doit être intégrée en dur dans le code HTML (avec la balise<img />, <svg> ou une polices d’icônes).

Sont considérées comme informatives toutes les images qui entraîneraient une perte de contenus ou de fonctionnalités, si elles n’étaient pas disponibles :

Logos;
Images-textes;
Liens et boutons-images (seulement si le libellé ne peut être explicite);
Etc.

REMARQUES

L’usage de sprites (images chargées en arrière-plan via CSS) n’est donc pas autorisé pour les images porteuses d’informations.
Lorsque la police de caractères Radio-Canada est utilisée pour afficher des icônes, sa fonction devrait être décrire dans l'attribut "title". Malgré que le libellé soit clair, si l'attribut "title" n'est pas ajouté, seuls les utilisateurs de lecteur d'écran seront informés de la fonction de l'icône. Exemple :

<button 
   class="icon-close" 
   title="Fermer le panneau des émissions"
>
   Fermer <span class="hidden-tag">le paneau des émissions</span>
</button>

<button 
   class="icon-play" 
   title="Radio-Journal (Écouter le segment)"
>
   <span class="hidden-tag">Écouter le Radio-Journal</span>
</button>

ATTENTION

En particulier, la technique qui consiste à sortir un texte de l’écran pour le remplacer par une image d’arrière-plan ne doit jamais être utilisée. Lorsque les styles ne sont pas chargés en totalité, ou qu’ils sont modifiés par l’utilisateur, l’information peut être perdue.

<a href="/" id="logo">[Le texte de mon logo]</a>
 
a#logo{
   display: block;
   background: url(images/logo.png);
   text-indent: -999999px;
   width: 300px;
   height: 100px;
}

Cette technique est à remplacer par l’utilisation de HTML pur. Par la suite, c’est le JavaScript qui doit être utilisé pour modifier dynamiquement l’image au survol si besoin.

<a href="/" id="logo">
   <img src="images/logo.png" alt="[Le texte de mon logo]" />
</a>

Si l’image n’est pas chargée, alors le texte de remplacement sera affiché à la place et l’information ne sera pas perdue.

5.2.2 Préciser un text alternatif sur les images informatives

Lorsqu’une image informative est intégrée dans le code HTML :

EN <IMG> ET <INPUT TYPE=”IMAGE” />

Un attribut « alt » doit être ajouté sur la balise <img /> ou <input type="image" /> .
Cet attribut « alt » doit être précisé avec une information égale ou équivalente à celle véhiculée par l’image.

<img src="logo-radio-canada.png" alt="Radio-Canada.ca">
 
<input id="image" type="image" alt="Connexion" src="login.png">
 
<picture>
   <source srcset="logo-radio-canada.png" media="(max-width: 320px)">
   [...]
   <img src="logo-radio-canada.png" alt="Radio-Canada.ca">
</picture>

EN <SVG>

L’englober d’une balise de type block ( <div> , par exemple).
Intégrer aria-hidden="true" dans ses balises enfants <g> et <path> .
Ajouter une balise <text> dans le <svg> et la renseigner avec une information égale ou équivalente à celle véhiculée par l’image.
Cacher ce texte de remplacement en intégrant opacity="0" dans la balise <text>.

Dans l’exemple de code HTML ci-après, le <svg> indique que le lien « Conditions Générales de Vente » s’ouvre dans une nouvelle fenêtre :

<a …>
   <svg …> 
      <text opacity="0" …>(nouvelle fenêtre)</text> 
      <g aria-hidden="true"> 
         <path aria-hidden="true" …></path> 
      </g> 
   </svg>
</a>

REMARQUES

Parfois, l’image véhicule des informations riches qu’il n’est pas possible de retranscrire sous forme de texte brut, via le simple attribut « alt » (schémas, graphiques complexes, etc.).

Dans cette situation, une bonne pratique d’accessibilité consiste à :

Renseigner un court texte de remplacement dans l’attribut « alt » qui décrit globalement la fonction de l’image. Pour cette description, le plus possible, s'en tenir à un texte de 60 caractères maximum. Indiquer entre parenthèses à la fin du texte de remplacement le moyen d’accéder à la description plus détaillée (ex. description détaillée disponible via le lien ci-dessous).

Prévoir une zone de contenu dans laquelle proposer une description détaillée de l’image directement sous l’image. Dans le cas de graphiques ou schémas complexes, la description détaillée la plus adaptée est souvent un tableau de données ou une liste.

* À noter que l’attribut longdesc n’est pas supporté par tous les lecteurs d’écran. Il faut donc jumeler son utilisation à celle d’un accordéon qui masque la description longue (au clic du lien, la description va s’afficher directement en dessous).

Par exemple, dans le cas d’une carte du monde qui expose les différents pays où une marque est présente. On affiche l'image, un lien pour voir la liste en HTML et la liste (qui est masquée jusqu'à ce que l'usager actionne le lien) :

<img src="images/carte-implantations.png" 
   longdesc=”a11y-nom-image” 
   alt="La liste des pays où la marque Spartacus est présente sur le globe 
   (description détaillée disponible via le lien ci-dessous)" 
/>
 
<a href="/zones-d-implantations/" name=”a11y-nom-image”>
   Voir la liste des pays où la marque Spartacus est présente
</a>
 
<div id=”a11y-nom-image”>Long descriptif</div>

Lorsqu’il y a des images informatives de type teaser ou des images dont la description se limite à du texte, la description de l’image doit être écrite dans son attribut « alt ».

ATTENTION

Il est fortement déconseillé de rédiger le texte de remplacement d’une image en commençant par "Image […]" dans le cas de la balise <img> ou <svg>, ou par "Bouton [...]" ou "Lien vers […]" dans le cas de la balise <input type="image" /> ou d'une image cliquable. Cette information est implicite et pourra être restituée aux utilisateurs de lecteurs d’écran.

RESSOURCES

5.3 Images mappées

5.3.1 Préciser l’attribut « alt » de chaque image mappée et de ses balises

Lorsqu’une image mappée est intégrée dans le code HTML :

Un attribut « alt » doit être ajouté sur la balise <img /> ainsi que sur chaque balise <area />.
L’attribut « alt » de la balise <img /> doit annoncer la fonction de l’image mappée.
L’attribut « alt » de chaque balise <area /> doit exprimer la fonction du lien.

Par exemple, dans le cas d’une carte de France où chaque département est cliquable et guide l’utilisateur vers une fiche associée au département :

<img src="images/carte-france.png" alt="Carte de France" usemap="#carte-france" />
 
<map name="carte-france">
   <area shape="poly" coords="[…]" href="ain.html" alt="Ain (01)" />
   <area shape="poly" coords="[…]" href="aisne.html" alt="Aisne (02)" />
   <area shape="poly" coords="[…]" href="allier.html" alt="Allier (03)" />
   […]
</map>

REMARQUES

Les images mappées ne sont pas dépréciées, mais par convention, on ne les utilise que si nécessaire. Ex. l’espace cliquable n’est ni carrée ni rectangle.

CAPTURES D'ÉCRAN

Dans l’exemple si dessus, chaque révélation (nom et images de la personne) est cliquable vers sa page respective. Comme les liens sont des parallélogrammes, l’utilisation de la balise « map » est acceptée.

5.3.2 Intégrer les balises <map> et <area /> immédiatement après chaque image mappée dans le flux HTML

Chaque fois qu’une image mappée est utilisée, les balises <map> et <area /> doivent immédiatement suivre la balise <img /> associée dans l’ordre du flux HTML.

ASTUCES - BONIFICATION

Doubler les images dotées d'un attribut « ismap » avec des liens alternatifs.