2.3.3 Les images d'arrière-plan qui contiennent de l'information ont une variante accessible

De manière générale, les images qui véhiculent une information doivent être insérées dans des balises img et les images décoratives sont insérées comme image d'arrière-plan. Si vous déviez de cette règle, vous devez prendre en compte le fait qu'une image d'arrière-plan n'a pas d'attribut alt et ne peut donc pas avoir de texte alternatif.

Si une image d'arrière-plan contient du texte ou une information quelconque, il faut rendre cette information accessible d'une autre manière.

Pourquoi?

Vous ne pouvez jamais vous assurer que vos visiteurs ont leur navigateur configuré pour afficher les images d'arrière-plan. Les utilisateurs de lecteurs d'écran ainsi que les navigateurs ne supportant pas les CSS ne les verront pas.

En pratique

L'idéal est d'éviter d'utiliser des images d'arrière-plan qui contiennent de l'information et d'utiliser plutôt la balise img. Si ce n'est pas possible ou souhaitable, les exemples ci-dessous illustrent comment l'information peut quand même être rendue accessible.

Dans ces exemples, on utilise des classes CSS pour ajouter des pictogrammes en arrière-plan des réponses afin d'indiquer si elles sont justes ou fausses :

.juste {
  background: url(ok.gif) center center no-repeat;
  padding: 0 0 0 15px;
}    

.faux{
  background: url(pasOK.gif) center center no-repeat;
  padding: 0 0 0 15px;
}

.cacher {
  display: block;
  position: absolute;
  top: -10000px;
}

Exemple de pratique incorrecte

Dans cet exemple, l'information véhiculée par les images d'arrière plan n'est pas fournie d'une autre manière

<ul>
  <li class="juste">Bruxelles est la capitale de la Belgique</li>
  <li class="faux">Anvers est en Wallonie</li>
  <li class="juste">L'hiver suit l'automne</li>
  <li class="faux">Il est difficile de rendre un site web accessible</li>
</ul>

Exemple de solution : regroupement des réponses

Une solution évidente est de ne pas utiliser des images d'arrière-plan et d'utiliser des balises img. Une autre solution possible est de regrouper les réponses correctes et fausses et d'annoncer la réponse dans un titre. C'est ce qui est fait dans l'exemple ci-dessous.

<h2>Juste</h2>
<ul>
  <li class="juste">Bruxelles est la capitale de la Belgique</li>
  <li class="juste">L'hiver suit l'automne</li>
</ul>
<h2>Faux</h2>
<ul>
  <li class="faux">Anvers est en Wallonie</li>
  <li class="faux">Il est difficile de rendre un site web accessible</li>
</ul>

Exemple de solution: image replacement

L'image replacement consiste à proposer un texte qui n'est pas perceptible de manière visuelle lorsque la feuille de style est activée mais qui sera lu par un logiciel de lecteur d'écran et qui apparaît également lorsque la feuille de style est désactivée.

Dans le cas de l'exemple donné, si vous ne voulez pas toucher à la forme, vous pouvez également ajouter les mots 'juste' et 'faux' entre parenthèses. Avec l'aide de CSS, vous pouvez cacher ces mots dans les navigateurs visuels. Les utilisateurs de lecteurs d'écran entendront ces mots. Lorsque la feuille de style est désactivée, les mots "juste" et "faux" seront visibles.

<ul>
  <li class="juste">Bruxelles est la capitale de la Belgique
    <span class="cacher"> (juste)</span></li>
  <li class="faux"> Anvers est en Wallonie
    <span class="cacher">(faux)</span></li>
  <li class="juste"> L'hiver suit l'automne
    <span class="cacher"> (juste)</span></li>
  <li class="faux"> Il est difficile de rendre un site web accessible
    <span class="cacher"> (faux)</span></li>
</ul>