Afbeeldingen (foto’s)
Afbeeldingen en foto’s zijn een uiting van beeld. Er zijn meerdere mogelijkheden om beeld te presenteren in je website. Vooral bij afbeeldingen is het belangrijk deze goed in te richten zodat iedere bezoeker deze goed kan ‘zien’.
Automatisch geschaald
Afbeeldingen worden bij het uploaden in WordPress automatisch geschaald en geknipt naar kleine formaten. Dit scheelt vaak in laadtijd en dat is o.a. goed voor de snelheid van je website.
- Thumbnail: breedte max. 150 px
- Gemiddelde afbeelding: breedte max. 300 px
- Grote afbeelding: breedte max. 1024 px
Hoe kom ik aan beeldmateriaal?
Er zijn verschillende manieren om aan beeldmateriaal te komen. Je bent hiervoor zelf verantwoordelijk; AWP biedt geen eigen beeldbank.
Voorbeelden van afbeeldingen
Decoratieve afbeelding
Een decoratieve afbeelding is een afbeelding die geen inhoudelijke of functionele betekenis heeft en puur wordt gebruikt voor visuele verfraaiing. In digitale toegankelijkheid wordt een decoratieve afbeelding genegeerd door schermlezers, zodat gebruikers met een visuele beperking niet onnodig worden afgeleid.
Je stelt een afbeelding is als ‘decoratief’ door de alt-tekst leeg te laten.
Voorbeeld
Een voorbeeld van een decoratieve afbeelding, deze afbeelding heeft een leeg alt=”” attribuut.

Informatieve afbeelding
Een informatieve afbeelding bevat belangrijke visuele informatie die essentieel is voor het begrip van de inhoud. Dit kan bijvoorbeeld een pictogram of foto zijn die iets verduidelijkt. Om toegankelijk te zijn, moet zo’n afbeelding een beschrijvende alt-tekst krijgen die de betekenis duidelijk maakt voor gebruikers van schermlezers.
Je stelt een afbeelding in als ‘informatief’ door deze te voorzien van een alt-tekst.
Voorbeeld
Een voorbeeld van een informatieve afbeelding, deze afbeelding heeft een alt=”” attribuut die omschrijft wat er op de afbeelding is te zien.

Functionele afbeelding
Een functionele afbeelding is een afbeelding die een actie vertegenwoordigt, zoals een icoon voor een knop of link (bijvoorbeeld een vergrootglas voor zoeken of een winkelwagen voor een webshop). De alt-tekst moet de functie beschrijven, niet de vorm, bijvoorbeeld “Zoeken” in plaats van “Vergrootglas”. Zo blijft de functionaliteit duidelijk voor gebruikers van schermlezers.
Voorbeeld
Een voorbeeld van een functionele afbeelding, deze afbeelding is opgenomen in een link en alt=”” attribuut die het linkdoel omschrijft.
Complexe afbeelding
Een complexe afbeelding bevat veel gedetailleerde informatie, zoals een grafiek, diagram, kaart of infographic. Omdat een eenvoudige alt-tekst niet voldoende is om de inhoud goed over te brengen, moet er een uitgebreide tekstuele beschrijving beschikbaar zijn. Dit kan direct in de omringende tekst of via een aparte link of beschrijving onder de afbeelding. De alt-tekst kan kort aangeven wat de afbeelding toont, bijvoorbeeld “Lijngrafiek met omzetgroei”. De volledige omschrijving van de complexe afbeelding kan bijvoorbeeld in een accordeon toegevoegd worden direct na de afbeelding met de titel “Afbeelding beschrijving”
Voorbeeld
Een voorbeeld van een complexe afbeelding, deze afbeelding heeft een alt=”” attribuut die kort de afbeelding omschrijft. Na de afbeelding is een accordeon opgenomen waarin de volledige afbeelding is beschreven.

