Omslag van 'Handboek webcontent: meer focus, minder content'

17. Toegankelijk en vindbaar maken van afbeeldingen

Blinde gebruikers en zoekmachines kunnen geen afbeeldingen zien. Gebruik je een afbeelding die extra informatie overbrengt, dan moet je deze afbeelding voorzien van een alt-tekst. Daarvoor gebruik je het alt-attribuut. De lengte van de alt-tekst is maximaal 125 tekens.

17.1 Afbeeldingen plaatsen via html of css

Even een korte technische introductie van afbeeldingen op het web. Afbeeldingen kun je plaatsen in de html-code of via css. In html ziet dat er bijvoorbeeld zo uit:

<img src="leuk-plaatje.jpg" alt="" />

Via css zo:

.home-image { url ('../img/lentekriebels.jpg'); }

Het belangrijkste verschil is of je er een alternatieve tekst bij kunt plaatsen. Deze alternatieve tekst is nodig voor mensen die de afbeelding niet kunnen zien en ook voor zoekmachines. Via de css kun je niet een alternatieve tekst toevoegen, dus plaats je via css alleen afbeeldingen die puur decoratief zijn.

Plaats je de afbeelding in de html, dan kun je kiezen om er wel of niet een alternatieve tekst bij te plaatsen. Deze plaats je met het alt-attribuut, bijvoorbeeld:

<img src="live-12312.jpg" alt="Ariana Grande" />

Er is geen alt-tekst nodig als de afbeelding geen extra betekenis overbrengt.

Plaats wel een leeg alt-attribuut. Doe je dat niet, dan gebruikt de screenreader de bestandsnaam (in het voorbeeld hierboven 'live-12312.jpg') en dat wil je niet! Met een leeg alt-attribuut slaat een screenreader de afbeelding over.

Kun je in jouw cms het veld voor het alt-attribuut niet leeg laten, vul dan een spatie in. Daarmee slaat de screenreader nog steeds de afbeelding over.

17.2 Alt-tekst: afhankelijk van het type afbeelding

Aan de hand van een paar vragen kun je vaststellen of een alt-tekst nodig is en zo ja, welke:

  1. Is de afbeelding aanklikbaar?
    • Nee, ga naar 2
    • Ja, ga naar 3
  2. Is de afbeelding informatief?
    • Nee, hij is decoratief. Gebruik lege alt-tekst.
    • Ja, gebruik alt-tekst. Deze beschrijft de betekenis van de afbeelding.
  3. Staat er een tekst in de link?
    • Ja, gebruik lege alt-tekst
    • Nee. Gebruik alt-tekst. Deze beschrijft de bestemming van de link.
Stroomschema plaatsen alt-tekst, zie uitleg hierboven

17.3 Alt-tekst ook afhankelijk van de content

De alt-tekst bij een betekenisvolle afbeelding is afhankelijk van de context waarin de afbeelding staat.

Bij een afbeelding van een blindegeleidehond (een Golden Retriever in dit geval) bij een uitleg over blindegeleidehonden is de alt-tekst 'blindegeleidehond' voldoende, maar bij een pagina over hondenrassen is de juiste alt-tekst 'Golden Retriever'.

Elke keer dat de afbeelding dus in een webpagina geplaatst wordt, moet je goed kijken welke alt-tekst in de context van de pagina de juiste is.

17.4 Lengte alt-tekst

De alt-tekst is belangrijk voor (a) mensen die de afbeelding niet kunnen zien en (b) voor zoekmachines, om de afbeelding te kunnen indexeren.

De lengte van alt-teksten voor zoekmachines lijkt te liggen bij maximaal 143 tekens.

Voor screenreaders ligt dat net wat anders. Binnen WCAG is hier geen richtlijn voor. Een veel gebruikte screenreader - JAWS - gebruikt maximaal 125 tekens als tekstalternatief bij een afbeelding.

Op basis hiervan hanteren we 125 als het maximale aantal tekens van de alt-tekst.

17.5 Afbeelding is niet aanklikbaar EN informatief

Als een afbeelding niet aanklikbaar is EN extra informatie overbrengt, beschrijf dan in maximaal 125 tekens de betekenis die de afbeelding overbrengt:

<img src="12345.jpg" alt="cover e-book Matomo">

Met spraakuitvoer wordt dan opgelezen "afbeelding van cover e-book Matomo". De spraaksoftware voegt er zelf 'afbeelding van' aan toe.

Twijfel je of een afbeelding decoratief is, dan heb je als redacteur vaak wel de vrijheid om wel of niet een alt-tekst toe te voegen.

Hieronder de pagina van de burgemeester van de gemeente Hilversum. Een alt-tekst hoeft niet, maar mag wel. Gebruik je een alt-tekst, dan is dat 'Pieter Broertjes'.

Wel of niet betekenisvol? Keuze van de redacteur

17.6 Afbeelding is decoratief

Is de afbeelding decoratief of niet-informatief, dan mag de alt-tekst leeg blijven:

<img src="decoratie.jpg" alt="">

Een puur decoratieve afbeelding kun je ook via css plaatsen. Dit is bijvoorbeeld het geval bij onderstaande afbeelding van een bord met eten op de site van de provincie Noord-Brabant.

Decoratieve afbeelding

Vaak is het echter niet mogelijk om als webredacteur dit via de css te regelen en zul je de afbeelding gewoon in de content plaatsen. Gebruik dan een leeg alt-attribuut.

Een afbeelding is ook niet-informatief als de informatie van de afbeelding in de omringende tekst staat. Bijvoorbeeld je hebt een grafiek en onder de grafiek staat een tabel met alle data. Een alt-tekst is dan niet nodig.

Grafische informatie, gegevens staan in tabel onder de grafiek

Als je een onderschrift bij een afbeelding gebruikt, kan de alt-tekst ook leeg blijven. Eventueel kun je dan wel in de alt-tekst verwijzen naar de tekst in het onderschrift:

<img src="grafiek.jpg" alt="zie onderschrift">

17.7 Afbeelding is aanklikbaar EN er is wel linktekst

Als de afbeelding in een link staat met een tekst erbij, dan is de afbeelding ook niet-informatief en ook dan volstaat een leeg alt-attribuut. De screenreader leest dan de linktekst op.

<a href="simon-besters.html"><img src="simon13123.png" alt="">Simon Besters</a>
Tekst in de link, geen alt-tekst nodig voor de afbeelding

17.8 Afbeelding is aanklikbaar EN er is geen linktekst

Als de afbeelding aanklikbaar is en in de link staat geen tekst, dan gebruik je wel een alt-tekst en beschrijf je waar de afbeelding naartoe linkt.

Het verschil in alt-tekst tussen wel en niet aanklikbaar kunnen we het beste even uitleggen met een voorbeeld van het twitter-icoon:

  • Als de afbeelding niet aanklikbaar is, omschrijf je wat er te zien is. In dit geval is de alt-tekst 'twitter-icoon'.
  • Is de afbeelding wel aanklikbaar, dan omschrijf je de bestemming. Dus de alt-tekst is dan 'twitter'.
Twitter-icoon

17.9 Afbeelding met complexe informatie

Sommige afbeeldingen bevatten veel informatie, te veel om in een alt-tekst of in een onderschrift te kunnen plaatsen. Als voorbeeld nemen we het kaartje hieronder. In dit kaartje staan de verschillende parkeergebieden van een gemeente.

Kaartje: complexe informatie

Er zijn 2 manieren om dit op te lossen:

  • Plaats de uitleg in de omringende tekst. Dit kan bijvoorbeeld bij een eenvoudige grafiek.
  • Plaats een extra uitleg op een aparte pagina

In het voorbeeld hierboven zouden we een extra uitleg plaatsen op een aparte pagina. Plaats de link naar die pagina direct onder het kaartje.

Deze link kun je gewoon zichtbaar plaatsen (heeft de voorkeur) of via CSS verbergen, zodat alleen gebruikers van screenreaders deze krijgen. Op deze manier hoeft de afbeelding zelf niet toegankelijk te zijn.

Eventueel kun je in de alt-tekst verwijzen naar de link onder de afbeelding (bijvoorbeeld alt="parkeergebieden, zie uitleg onder de afbeelding")

17.10 Het logo van een site: informatief EN aanklikbaar

Een bijzondere afbeelding op een site is het logo. Dat heeft 2 functies:

  • Het informeert de bezoeker wie de afzender is.
  • Het is een link die leidt naar de homepage.

Wat moet je hier dan kiezen? Duidelijk maken wat er op de afbeelding te zien is of de bestemming beschrijven? De oplossing: allebei!

De alt-tekst vertelt wat er te zien is op het logo EN de bestemming. Bijvoorbeeld: bij het logo van de gemeente Delft wordt de alt-tekst 'Home gemeente Delft' of 'gemeente Delft, home'.

17.11 Title-attribuut: niet gebruiken

Behalve een alt-tekst kun je ook nog een titel aan een afbeelding toevoegen. Dat doe je met het title-attribuut. Deze titel geeft de mouseover-tekst bij een afbeelding, zoals hieronder te zien is.

Afbeelding met title-attribuut (geeft tekst bij mouseover)

Gebruik dit title-attribuut niet op je website, deze is altijd nutteloos en bijna altijd een dubbeling met de andere informatie. Een uitzondering kun je maken voor webapplicaties of andere platforms waarbij gebruikers dagelijks de applicatie gebruiken.

17.12 Gebruik geen afbeeldingen van tekst

Afbeeldingen van tekst kun je niet gebruiken; ze zijn niet toegankelijk en ook niet gebruiksvriendelijk. De enige uitzondering zijn logo's.

Je kunt wel tekst op een afbeelding plaatsen, zodat het er uit ziet alsof de tekst in de afbeelding is. Als de tekst op de afbeelding zit, kan deze vergroot en verkleind worden en kan een screenreader deze ook makkelijk lezen.

Hieronder een voorbeeld van tekst op een afbeelding. Het bericht is opgebouwd uit 3 elementen:

  • foto van het zwembad
  • half doorzichtige grijze afbeelding
  • tekst

Via CSS wordt het samengevoegd tot 1 element.

Het is niet altijd direct te zien of de tekst los is van de afbeelding of dat de tekst is opgenomen in de afbeelding.

Selecteer dan alle tekst met Ctr-A op een webpagina. Is alleen de tekst van de afbeelding geselecteerd, dan weet je dat de tekst los is van de afbeelding. En dat is dus goed!

17.13 Afbeelding met bijschrift

Vaak is het handig om bij een afbeelding die betekenis overbrengt een bijschrift te gebruiken.

Daarvoor moet je wel een speciale html-tag gebruiken: <figure> en voor het bijschrift <figcaption>. Het alt-attribuut bij de afbeelding laat je leeg.

De code is:

<figure> <img src="eikenprocessierups.jpg" alt=""> <figcaption>Eikenprocessierups</figcaption> </figure>

Op deze manier is het bijschrift ook voor Google en gebruikers van schermlezers gekoppeld aan de afbeelding.

Ook ziet het er met gebruik van het figcaption-element een stuk beter uit. Hieronder 2 afbeeldingen met bijschriften: in de linker is figcaption gebruikt, in de rechter is het gewoon onder de afbeelding gezet.

top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.