R-pd.7.6

Decoratieve afbeeldingen dienen zoveel mogelijk door CSS geplaatst te worden. Informatieve afbeeldingen dienen door HTML geplaatst te worden.

Rol:: Ontwikkelaar,; Webredacteur.
Projectfase:: Bouw,; Contentcreatie/-migratie,; Beheer.
Voordeel:: Hoge bouwkwaliteit,; Klantvriendelijkheid,; Meer mensen bereiken,; Vindbaarheid van info,; Werkt op alle systemen.
Onderwerp:: Afbeeldingen,; Alternatieve tekst,; Scheiding structuur/vorm.
Conformiteitsniveau:: Webrichtlijnen.

Decoratieve afbeeldingen via CSS

Decoratieve afbeeldingen, zoals achtergrondafbeeldingen, kunnen het best met CSS geplaatst worden. Voor het plaatsen van een achtergrondafbeelding is het beter CSS (Cascading Style Sheets) te gebruiken dan een achterhaald en ongeldig background attribuut in de HTML.

Uitleg van deze richtlijn

Decoratieve afbeeldingen moeten zoveel mogelijk door middel van CSS worden geplaatst. Informatieve afbeeldingen daarentegen – afbeeldingen die een essentiële boodschap of functie hebben – moeten door middel van HTML geplaatst worden, door onder meer het img (image) element.

“Use style sheets to control lay-out and presentation”

W3C Web Content Accessibility Guidelines ijkpunt 3.3

Geen alternatieve tekst op achtergrondafbeeldingen

Voor het img element kan een alternatieve tekst worden opgegeven; voor afbeeldingen via CSS kan dit niet. Omdat ondersteuning voor CSS door browsers optioneel is, moet een webpagina ook leesbaar en bruikbaar zijn zonder CSS. Essentiële afbeeldingen die worden geplaatst via CSS betekenen dat er belangrijke informatie verloren gaat wanneer CSS niet ondersteund wordt door een browser.

“Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.”

W3C Web Content Accessibility Guidelines ijkpunt 6.1

CSS Image Replacement

Een op dit moment zeer populaire techniek is CSS Image Replacement. Deze techniek bestaat uit het verbergen van normale tekst in een HTML-document en het weergeven van een achtergrondafbeelding als alternatief. Het gebruik van CSS Image Replacement-technieken die worden toegepast op essentiële informatie wordt vooralsnog afgeraden. Zie voor meer informatie R-pd.7.7: Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden.

Voorbeelden

Een decoratieve achtergrondafbeelding, geplaatst via CSS

```
body {
```

  background-image : url("/images/background.jpg");

```
}
```

Voorbeeld van een informatieve afbeelding met alternatieve tekst (HTML)

<img src="/images/belgie.gif" alt="Reist u deze zomer naar Belgi&euml;?">

Gerelateerde richtlijnen

R-pd.1.3: Maak de functie van de website niet afhankelijk van optionele technologie, zoals CSS en client-side script: optionele technologie dient de informatie op de site en het gebruik ervan te complementeren en niet de toegang ertoe te belemmeren wanneer deze technologie niet ondersteund wordt.
R-pd.7.1: Het alt (alternative) attribuut dient te worden gebruikt op ieder img (image) en area element en dient te worden voorzien van een effectieve alternatieve tekst.
R-pd.7.7: Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden.
R-pd.9.2: Pagina's dienen bruikbaar te blijven wanneer CSS door een webbrowser niet ondersteund wordt.

Bijbehorende ijkpunten normdocument

IJkpunt 6.1: Organiseer documenten zo dat ze zonder style sheets gelezen kunnen worden.