U bent hier:

  1. Handleiding
  2. Ontwikkeling
  3. Afbeeldingen
  4. Achtergrondafbeeldingen

Afbeeldingen en alternatieve tekst: Achtergrondafbeeldingen

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.

Decoratieve afbeeldingen via CSS

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.

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ë?">

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

Richtlijn R-pd.7.6

“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. Hierdoor kan de vormgeving van de informatie worden geregeld vanuit één locatie: het CSS-bestand.

Wanneer CSS niet door een browser wordt ondersteund, wordt de normale tekst getoond. Daarmee voorkomt deze techniek het probleem van ontbrekende alternatieve tekst voor achtergrondafbeeldingen. Het werpt echter ook een nieuw probleem op: wanneer CSS wel, maar afbeeldingen niet ondersteund worden, zal de afbeelding niet zichtbaar zijn en de normale tekst evenmin.

Voor dit probleem is op dit moment nog geen sluitende oplossing gevonden. Hierom wordt het gebruik van CSS Image Replacement-technieken die worden toegepast op essentiële informatie vooralsnog afgeraden.

Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden.

Richtlijn R-pd.7.7


 Webrichtlijnen versie 1.3, november 2007.