2.3.3 Informatiedragende achtergrondafbeeldingen hebben een alternatief

Afbeeldingen die informatie bevatten, voegt u in met een img-element en decoratieve afbeeldingen als achtergrondafbeelding. Als u afwijkt van deze vuistregel moet u er rekening mee houden dat achtergrondafbeeldingen geen alt-tekst kunnen krijgen.

Als een achtergrondafbeelding tekst of informatie bevat, moet u die ook op een andere manier overbrengen.

Waarom?

Screenreadergebruikers merken achtergrondafbeeldingen niet op. Hetzelfde geldt voor browsers en apparaten zonder CSS-ondersteuning.

Voorbeeld

In dit voorbeeld zijn deze CSS-classes gebruikt:

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

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

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

Niet goed

<ul>
  <li class="goed">Brussel is de hoofdstad van België</li>
  <li class="fout">Het atomium staat in Antwerpen</li>
  <li class="goed">De zomer komt na de lente</li>
  <li class="fout">Een toegankelijke website maken is moeilijk</li>
</ul>

Goed

Een voor de hand liggende oplossing is om de afbeeldingen niet als achtergrondafbeelding te gebruiken maar ze in te voegen met img-elementen. Een andere mogelijke oplossing is de juiste en foute antwoorden te groeperen en aan te kondigen met een hoofding.

<h2>Goede antwoorden</h2>
<ul>
  <li class="goed">Brussel is de hoofdstad van België</li>
  <li class="goed">De zomer komt na de lente</li>
</ul>
<h2>Foute antwoorden</h2>
<ul>
  <li class="fout">Het atomium staat in Antwerpen</li>
  <li class="fout">Een toegankelijke website maken is moeilijk</li>
</ul>

Als u niet aan de vormgeving wilt raken, kunt u ook de woorden 'goed' of 'fout' tussen haakjes vermelden. Met behulp van CSS kunt u ze vervolgens verbergen (image replacement). Screenreadergebruikers zullen de woordjes wel opmerken.

<ul>
  <li class="goed">
    Brussel is de hoofdstad van België
    <span class="verberg"> (goed)</span></li>
  <li class="fout">
    Het atomium staat in Antwerpen
    <span class="verberg">(fout)</span></li>
  <li class="goed">
    De zomer komt na de lente<span class="verberg"> (goed)</span>
  </li>
  <li class="fout">
    Een toegankelijke website maken is moeilijk
    <span class="verberg"> (fout)</span></li>
</ul>