u bent hier: Home > In de praktijk > AnySurfer checklist > 2.3.3 Informatiedragende achtergrondafbeeldingen hebben een alternatief
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;
}
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. 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>
.verberg {
position: absolute;
left: 0;
top: -10000px;
overflow: hidden;
}
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.
- CSS>disable styles>all styles
- 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.