Geef afbeeldingen die informatie overdragen een tekstueel alternatief

Voorzie afbeeldingen die informatie overdragen van een tekstueel alternatief (alt-tekst), waarin je beschrijft wat op de afbeelding te zien is.

Hoe pas ik dit toe?

In het CMS is het meestal mogelijk om een alternatieve tekst voor een afbeelding op te geven (ook wel de alt-tekst genoemd). Alle afbeeldingen die informatie overdragen moeten voorzien zijn van een alt-tekst. Daaronder vallen ook afbeeldingen van tekst en grafieken. Zorg dat de beschrijving dezelfde informatie overdraagt als de afbeelding.

Voorbeelden

Afbeelding die informatie overdraagt

Bij een nieuwsbericht over de onthulling van een nieuw kunstwerk staat een afbeelding van het kunstwerk. De alternatieve tekst beschrijft wat op de afbeelding te zien is:


<img src="kunstwerk.jpg" alt="Levensgroot bronzen beeldhouwwerk van een kind met een ballon in de hand">

Decoratieve afbeelding

Afbeeldingen die alleen ter decoratie dienen mogen juist geen alternatieve tekst hebben. Een afbeelding is decoratief als deze niet bijdraagt aan het begrip van de tekst en geen betekenis heeft voor de bezoeker. Het alt-attribuut moet wel aanwezig zijn, maar mag geen tekst bevatten:

<img src="golvende-lijnen.jpg" alt="" />

Alhoewel bovenstaand voorbeeld is toegestaan, is het beter om decoratieve afbeeldingen met een stylesheet (CSS) te plaatsen.

Afbeelding van grafiek

Bij een afbeelding van een grafiek moet de inhoud van de grafiek worden beschreven in de alt-tekst. De grafiek kan worden opgedeeld in meerdere kleine afbeeldingen met een alt-tekst, maar een samenvatting van de inhoud van de grafiek is ook afdoende:

<img src="grafiek-gebruikIE6.png" alt="Het gebruik van IE6 is gedurende de periode 2008-2012 afgenomen van 12% tot 1.6%" />

Afbeelding van tekst

Soms wordt in plaats van ‘echte’ tekst een afbeelding met een tekst gebruikt. Bijvoorbeeld om een speciaal lettertype te kunnen gebruiken. In de alt-tekst moet in dit geval de tekst staan die in het plaatje te zien is.

<img src="feest.jpg" alt="Het is feest!" />

Afbeelding gebruikt als ondersteunend icoon

Als een afbeelding als icoon wordt gebruikt naast een tekst (bijvoorbeeld om een categorie aan te duiden), moet de alt-tekst van het icoon leeg worden gelaten. Dit omdat de alt-tekst anders waarschijnlijk gelijk zou zijn aan de tekst erna, en dit zou voor een vervelende herhaling zorgen als het wordt voorgelezen door een spraakbrowser.

<a href="home.html"><img src="home.jpg" alt="" />Home</a>

Hoe draagt dit bij aan een betere website?

Mensen met een visuele beperking kunnen afbeeldingen niet zien. Door een beschrijving van de afbeelding te geven, is de informatie uit de afbeelding voor hen toch beschikbaar. Het opgeven van tekstalternatieven is ook gunstig voor de vindbaarheid van je website in zoekmachines.

Bouwer of redacteur?

De bouwer moet zorgen dat afbeeldingen in het CMS een alternatieve tekst kunnen krijgen. Voor afbeeldingen die niet via het CMS te beheren zijn moet de bouwer zelf zorgen dat er, als dat nodig is, een alternatieve tekst is geplaatst. De redacteur is verantwoordelijk voor het schrijven en plaatsen van alternatieve teksten voor afbeeldingen die hij via het CMS plaatst.

Technische details