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. Dans certains cas, les modes haut-contraste des navigateurs suppriment les images d'arrière-plan.

En pratique

Évitez 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 ajoutez un texte de remplacement caché visuellement mais visible pour les lecteurs d'écran.

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:before {
  content: url(ok.png);
  padding: 0 0 0 15px;
}    

.faux:before{
  content: url(pas_ok.png);
  padding: 0 0 0 15px;
}

Exemple incorrect : pas de texte de remplacement

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 correct : texte de remplacement fourni

Dans le cas de l'exemple donné, vous pouvez 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>
.cacher {
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px;
 }  

Mode haut contraste

Dans l'exemple ci-dessus, l'image est insérée avec :before. Dans le cas d'une image porteuse d'information c'est une meilleure solution que background (voir le même exemple avec background). Lorsqu'un utilisateur malvoyant active le mode haut contraste de Windows, les images d'arrière-plan (insérées avec background) sont supprimées mais les feuilles de style ne sont pas désactivées donc le contenu caché reste caché. Avec :before, l'image n'est pas supprimée en mode haut contraste aucune information n'est perdue.

comment tester

  • Utilisez la barre d'outils Web Developer dans Firefox pour cacher les images d'arrière-plan
  • Cliquez sur Images > Cacher les images d'arrière-plan
  • Est-ce qu'il y a des l'information qui disparait?
    • Non : c'et OK.
    • Oui ; vérifiez s'il y a une alternative pour le contenu de l'image d'arrière-plan
      • Barre d'outil WAVE, option Text Only
      • Est-ce que l'information de l'image d'arrière-plan est disponible sous forme de texte?
        • Oui : c'est OK.
        • Non : pas OK, il faut adapter le site.