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

18. 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 70 tekens.

18.1 Alt-tekst: afhankelijk van het type afbeelding

Een afbeelding die betekenis overbrengt moet een alternatieve tekst krijgen, een alt-tekst. Maar niet elke afbeelding brengt betekenis over.

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

18.2 Afbeelding is niet aanklikbaar EN informatief

Als een afbeelding niet aanklikbaar is EN extra informatie overbrengt, beschrijf dan in maximaal 70 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

18.3 Afbeelding is decoratief

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

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

Strikt genomen hoort een decoratieve afbeelding niet in de html, maar hoort deze via de stylesheet (Cascading Style Sheet of css) geplaatst te worden. 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">

18.4 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="pagina.html"><img src="plaatje.png" alt="">Recept voor kitchari</a>
Tekst in de link, geen alt-tekst nodig voor de afbeelding

18.5 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

18.6 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")

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

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

18.9 Enkele voorbeelden

Voorbeeld 1 niet-aanklikbare afbeelding

De alt-tekst is hier niet nodig (mag wel), want de tekst maakt duidelijk waar het over gaat.

Voorbeeld 1: foto bij bericht, alt-tekst is hier niet nodig

Voorbeeld 2 niet-aanklikbare afbeelding

Voorbeeld 2: afbeelding van tekst, PVVN

In dit 2e voorbeeld is er tekst opgenomen in de afbeelding en is er geen alt-tekst gebruikt. De tekst zit in de afbeelding 'ingebakken' en is dus niet los als tekst beschikbaar.

De alt-tekst moet gelijk zijn aan de tekst die leesbaar is, dus 'Welkom op de website van de Patiƫnten Vereniging Voor Neurostimulatie (PVVN)'. Maar in de internationale toegankelijkheidsrichtlijnen WCAG 2 niveau AA is het niet toegestaan om een afbeelding van tekst te maken. De juiste oplossing is hier:

  • Laat de tekst in de afbeelding weg.
  • Plaats de afbeelding als achtergrondafbeelding (en dan kan de afbeelding geen alt-tekst krijgen).
  • Plaats de tekst los in de html en positioneer deze met css.

Het eindresultaat kan er in dit geval precies hetzelfde uitzien.

Voorbeeld 3, aanklikbare afbeelding

Microcontent, bron: bbc.com

Bovenstaand blokje microcontent is in zijn geheel aanklikbaar, maar in de onderliggende html-code staat de link enkel op de titel. Via css is het totale blokje aanklikbaar gemaakt.

Omdat de linktekst de titel is, kun je de afbeelding als decoratief beschouwen. En dus is hier geen alt-tekst nodig. Dat is in dit geval (website BBC) ook niet gedaan.

Voorbeeld 4: aanklikbare afbeelding

Logo website gemeente De Bilt

Hierboven staat het logo van de gemeente De Bilt. Het staat linksboven op de site. Het logo is aanklikbaar en de link leidt naar de homepage. Dus eigenlijk zou de alt-tekst moeten zijn 'home'.

Een logo op een site is een bijzondere afbeelding, omdat het vaak 2 functies heeft:

  • Het geeft aan wie de afzender is.
  • Het is een link.

Het is dus eigenlijk een combinatie van een informatieve niet-aanklikbare afbeelding en een informatieve aanklikbare afbeelding. Daarom beschrijf je beide functies in de alt-tekst. De huidige alt-tekst 'Logo Gemeente De Bilt' is dus niet goed, want de bestemming wordt niet beschreven. De bestemming moet er dus bij. Dat kan heel kort: 'Home Gemeente De Bilt'.

top

Feedback

Contact

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