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

22. 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.

22.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.

22.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

22.3 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.

22.4 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

22.5 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">

22.6 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

22.7 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

22.8 Afbeelding met complexe informatie

Sommige afbeeldingen bevatten veel informatie, teveel 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")

22.9 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'.

22.10 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 mouse-overtekst bij een afbeelding, zoals hieronder te zien is.

Afbeelding met title-attribuut (geeft mouse-overtekst)

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.

top

Was dit nuttig?

Feedback

Contact

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