Functionele afbeeldingen

Afbeeldingen hebben soms een functie. Bijvoorbeeld:

• Een afbeelding waar je op kan klikken om naar een andere pagina te gaan. De afbeelding is dan een link geworden.
• De afbeelding opent in het groot in een dialoogvenster op de pagina. De afbeelding is dan een knop geworden.

Overwegingen

Vragen die je jezelf kunt stellen als je een functionele afbeelding plaatst:

• Waarom wil ik deze afbeelding plaatsen?
• Wat is het doel van de afbeelding?
• Wat gebeurt er als een bezoeker op de afbeelding klikt?

Hier beschrijf je niet wat op de afbeelding staat, maar wat de bezoeker ermee kan doen. De bezoeker weet anders niet wat er gaat gebeuren na het klikken op de link of knop.

Bijvoorbeeld:

• Een vergrootglas in een knop naast een zoekfunctie heeft als alternatieve tekst 'Zoeken', in plaats van 'Vergrootglas'.
• Een prullenbak in een knop naast een geüpload bestand heeft als alternatieve tekst 'Bestand overzicht.pdf verwijderen', in plaats van 'Rode prullenbak'.
• Een icoon in een link dat aangeeft dat een link naar een externe pagina gaat heeft als alternatieve tekst '(gaat naar externe pagina)', in plaats van 'Vierkant met daarin een pijl die naar rechtsboven wijst'.
• Een huis in een link in het broodkruimelpad waarmee je naar de homepage kunt navigeren heeft als alternatieve tekst 'Terug naar de homepage', in plaats van 'Blauw huisje'.

Logo als link naar de homepage

Veel websites hebben een logo dat ook een link is naar de homepage. Dit logo staat dan bovenaan iedere pagina, meestal naast het navigatiemenu. Hier is het belangrijk om zowel te benoemen dat het een logo is, als waar de link naar de naartoe gaat. In die zin is een logo zowel een informatieve als een functionele afbeelding.

Doen

Benoem de organisatie, dat het om een logo gaat en waar de link naar verwijst

Alternatieve tekst: NL Design System logo, naar de homepage

Lees ook onze blog "De toegankelijke naam van een link op een logo in de header".

Waar stel je de alternatieve tekst van het logo als link naar de homepage in?

Het verschilt per contentmanagementsysteem (CMS) waar je dit aan kunt passen en of je dit als contentmaker zelf kunt doen. Meestal zit deze optie in de thema-instellingen van het CMS. Het kan daarom zijn dat je geen rechten hebt om de alternatieve tekst van het logo bovenaan iedere pagina zelf aan te passen. Vraag dit dan aan de beheerder of leverancier van je website.

Meer lezen over gerelateerde WCAG-succescriteria op NL Design System

Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.

• Succescriterium 1.1.1 Niet-tekstuele content
• Succescriterium 2.4.4 Linkdoel (in context)

Over deze richtlijnen

Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.