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. In een aantal gevallen verdwijnen de afbeeldingen ook als de bezoeker de hoog contrast mode van zijn browser of besturingssysteem activeert.

Voorbeeld

In dit voorbeeld zijn deze CSS-classes gebruikt:

ul li.goed:before {
  content: url(pre_ok_16x15.png);
	padding-right: 10px;
}    

ul li.fout:before {
  content: url(pre_nok_14x15.png);
	padding-right: 10px;
}

Voorbeeld (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>

Voorbeeld (goed)

Een voor de hand liggende oplossing is om de afbeeldingen niet als achtergrondafbeelding te gebruiken maar ze in te voegen met img-elementen.

U kunt 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>
.verberg {
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px;
}

Hoog contrast modus

In bovenstaand voorbeeld is de afbeelding ingevoegd met het :before pseudo-element. Als de afbeelding informatie bevat en via CSS moet worden ingevoegd, is deze techniek beter dan die met background url (zie hetzelfde voorbeeld met background). Als een slechtziende bezoeker de hoog contrast modus van Windows activeert, verdwijnen alle afbeeldingen die zijn ingevoegd met background url. De overige CSS blijft actief waardoor de verborgen inhoud die we voor screenreaders hebben toegevoegd niet verschijnt. Met :before en :after blijft de afbeelding zichtbaar, ook in hoog contrast modus en zo gaat er dus geen informatie verloren.

Zelf testen

Ga na of er informatie verloren gaat wanneer de achtergrond afbeeldingen niet getoond worden.

Web Developer toolbar in Firefox:

  • Images > Hide background images.
  • Gaat er informatie verloren door achtergrondafbeeldingen te verbergen?
    • Nee; dan is aan dit ijkpunt voldaan.
    • Ja; ga na of er een alternatief voor deze informatie is die door middel van CSS is verborgen.
      • WAVE toolbar, optie Text Only
      • Is de informatie die verloren ging door het verbergen van de achtergrond afbeeldingen nu wel beschikbaar?
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.