Afbeeldingen

Afbeeldingen zijn belangrijk in digitale communicatie. Ze maken content zoals websitepagina’s of artikelen aantrekkelijk, verduidelijken moeilijke informatie en kunnen emoties oproepen. Maar niet iedereen ervaart afbeeldingen op dezelfde manier. Om ervoor te zorgen dat afbeeldingen toegankelijk zijn voor iedereen, ongeacht eventuele beperkingen, moeten afbeeldingen voldoen aan de richtlijnen van de Web Content Accessibility Guidelines (WCAG). 

Informatieve afbeeldingen

Afbeeldingen die informatie overdragen noemen we informatieve afbeeldingen. Informatieve afbeeldingen worden toegankelijk door er in de code een alternatieve tekst aan toe te voegen. Mensen met een visuele beperking kunnen niet zien wat er op de afbeelding staat en krijgen via deze alternatieve tekst dezelfde informatie mee.

  • Gebruik een alternatieve tekst door aan het ' img' element het attribuut alt=" beschrijvende tekst" toe te voegen als dit met een korte, duidelijke zin kan
  • Als dit niet lukt, omschrijf de afbeelding als begeleidende tekst naast of voor de afbeelding
  • Een logo is per definitie een informatieve afbeelding. Als aan het logo ook tekst toegevoegd is, moet deze tekst in zijn geheel terugkomen in de alternatieve tekst van de afbeelding.
  • Iconen zijn informatieve afbeeldingen. Denk bijvoorbeeld aan pijltjes, een vergrootglas of een kruisje. In de code moet hiervoor een stukje tekst worden toegevoegd die alleen voor hulpsoftware beschikbaar is. Bijvoorbeeld <span class=" sr-only"> Link opent op nieuwe pagina</span>

Ingewikkelde afbeeldingen

Bij complexe afbeeldingen, zoals grafieken, voldoet een alternatieve tekst niet. Je moet dan de informatie op een andere manier beschikbaar maken. Dat kan bijvoorbeeld door de afbeelding in de tekst toe te lichten, of door de informatie ook in een andere vorm (bijvoorbeeld een tabel) te weergeven.

Afbeeldingen met tekst

Het gebruik van afbeeldingen met tekst wordt afgeraden.

  • Teksten op afbeeldingen worden niet opgepikt door hulpsoftware zoals een screenreader
  • Teksten op afbeeldingen worden vaak niet goed weergegeven op afwijkende schermformaten.

Gebruik je toch afbeeldingen met tekst, zorg er dan voor dat de gehele tekst op de afbeeling ook terugkomt in de alternatieve tekst van de afbeelding. Gaat het om veel tekst, zorg dan voor een ander tekstalternatief.

Decoratieve afbeeldingen

Als de afbeelding geen functie heeft, moet aan de afbeelding alsnog het alt-attribuut worden toegevoegd. Deze mag dan leeg zijn zodat hulpsoftware weet dat deze afbeeldingsinformatie overgeslagen kan worden. 

  • alt=" " , of 
  • alt

Kleur

Voor mensen die kleurenblindheid of slechtziend zijn, is voldoende contrast tussen de afbeelding en de achtergrond essentieel. Controleer daarom het contrast van je afbeeldingen: gebruik tools zoals een kleurcontrastchecker om aan de WCAG-niveaus te voldoen (minimaal niveau AA). 

Vermijd ook afhankelijkheid van kleur door bijvoorbeeld in een grafiek niet alleen verschillende kleuren te gebruiken, maar ook arcering. Gebruik op een kaart niet alleen verschillende kleuren om specifieke locaties aan te geven, maar zorg er voor dat deze elementen ook een andere vorm hebben. 

Tip

Op de website van Digitoegankelijk zijn veel tips te vinden over het gebruik van afbeeldingen op de website.

Infographics

Een infographic is een complexe afbeelding met tekst en wordt vaak gebruikt om een moeilijk proces  in beeld uit te leggen. Veel mensen vinden een infographic prettig,  een beeld zegt meer dan 1000 woorden. Maar dit geldt niet voor iedereen. Sommige mensen lezen de informatie liever in tekst. Dit geldt zeker voor mensen met een visuele beperking. Daarom moet er altijd een alternatief beschikbaar zijn.

Hou rekening met de volgende punten bij het maken van een infographic.

De infographic komt online

Omdat mensen die niet kunnen zien dezelfde informatie moeten meekrijgen als ziende mensen, is het belangrijk dat voor de groep mensen met een visuele beperking een alternatief in tekst beschikbaar is voor de infographic. 

  • Geef de alternatieve tekst van de afbeelding  een korte beschrijving mee, bijvoorbeeld alt="onderwerp...".
  • Plaats op dezelfde pagina alle informatie uit de infographic in tekst. Je mag ook een link naar een andere pagina plaatsen bij de infographic waar de tekst in zijn geheel uitgeschreven is

Een infographic wordt online geplaatst als alle informatie op de afbeelding ook in tekst wordt aangeleverd.

De infographic wordt geprint in bijvoorbeeld een rapport

Veel voorwaarden die voor online gelden, gelden ook voor een geprinte infographic. 

  • Zorg er voor dat álle informatie die op de infographic te zien is, vooraf in tekst wordt weergegeven.
  • Houd rekening met de huisstijl en het gebruik van kleuren

Huisstijl (online en print)

We vinden het belangrijk dat al onze producten in huisstijl worden opgemaakt. Houd voor de opmaak van een infographic dus rekening met de kleuren en de juiste lettertypen (Oranda en Source Sans Pro)  uit het huisstijlhandboek van gemeente Nijmegen.  Gemeente Nijmegen heeft ook een iconenbank, waar eerder gemaakte iconen makkelijk te hergebruiken zijn. Mail voor de meest recente versie van het huisstijlhandboek en de iconenbank naar teamonline@nijmegen.nl.

Kleurcontrast (online en print)

Het kleurcontrast moet aan de volgende eisen voldoen:

  • Tekst kleiner dan 18pt (24px) heeft een kleurcontrast van minimaal 4,5:1 met de achtergrond
  • Tekst groter dan 18pt (24px) of groter dan 14pt vetgedrukt (18,7px) heeft een kleurcontrast van minimaal 3,0:1 met de achtergrond
  • Alle niet tekstuele content (lijntjes, iconen, knoppen)  heeft een kleurcontrast van minimaal 3,0:1 met de achtergrond
  • Gebruik niet alleen kleur om verschillende onderdelen van elkaar te onderscheiden, maar ook tekst of patronen zoals lijnen en stippen. Bijvoorbeeld bij de staven van een staafdiagram.
  • Hyperlink in de tekst? Zorg dat deze niet alleen door een andere kleur herkenbaar is, maar ook door de link te onderstrepen.

Gebruik je de goede kleurcombinaties? Test dit  online.

Begrijpelijk (online en print)

Een infographic moet niet alleen toegankelijk zijn, maar ook begrijpelijk. Gebruik geen lastige iconen zoals een icoon dat iets heel specifieks vertaalt. Maak een heldere structuur en gebruik letters die voldoende groot zijn. Als er tekst gebruikt wordt, zorg dan dat dit in B1 niveau geschreven is.

Verwijs je in tekst naar een website, overleg met teamonline@nijmegen.nl of er een zogenaamde verkorte url beschikbaar is.

Formaten (online en print)

Soms zijn meerdere formaten van de infographic nodig voor verschillende doelen.
De volgende afmetingen zijn prettig in gebruik:

  • Print: Vullend document: A4 (21 x 29,7cm)
  • Online: breedte 890 pixels en lengte naar keuze
  • Online via pop-up (alleen als normaal op de website niet mogelijk is): 1200 pixels breedte

Er worden geen infographics geplaatst op social media.