Afbeeldingen

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=" bechrijvende tekst" toe te voegen, of
  • 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 geheelt erugkomen in de alternatieve tekst van de afbeelding.
  • Bij gewone afbeeldingen met tekst, moet deze tekst ook terugkomen in de alternatieve tekst.

Let er op dat ook  iconen informatieve afbeeldingen zijn. 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>

Decoratieve afbeeldingen

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

  • alt=" " , of 
  • alt

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.