Een infographic toegankelijk maken

Waarom zou u een infographic maken? Omdat een stappenplan, een tijdlijn of een paar cijfers in één beeld sneller te begrijpen zijn dan in drie alinea’s. Dat is ook precies het probleem. Alles wat de infographic zo handig maakt, zit in het beeld. Iemand die blind is, hoort alleen de alt-tekst. Iemand die slecht ziet en inzoomt, raakt het overzicht kwijt. Een toegankelijke infographic zorgt dat de informatie ook buiten het beeld beschikbaar is. Dat klinkt als extra werk, maar met de juiste volgorde valt het mee.

Begin bij de tekst, niet bij het ontwerp

De meeste infographics ontstaan zo: iemand schrijft een paar punten op, een ontwerper maakt er een mooi beeld van, en de tekst verdwijnt in een map. Draai dat om. Bewaar de tekst als het eigenlijke product en zie het beeld als een visuele versie ervan.

Schrijf dus eerst de inhoud uit in een gewoon document:

• Een titel die zegt waar de infographic over gaat.
• De kernboodschap in één of twee zinnen.
• Alle stappen, cijfers of onderdelen in een logische volgorde.
• De bron van gegevens, als die er zijn.

Die tekst wordt straks de tekstversie op uw pagina. U heeft hem dan al, in plaats van hem achteraf uit het beeld te moeten overtypen.

Twee lagen: een korte alt en een volledige beschrijving

Een infographic bevat te veel informatie voor een alt-tekst. Een alt van tweehonderd woorden is voor screenreadergebruikers geen pretje: ze kunnen er niet in terugspringen, niet in navigeren en niet doorheen bladeren. Gebruik daarom twee lagen.

Laag 1: de alt-tekst

Kort en samenvattend. Wat is het, en waar staat de volledige inhoud? Bijvoorbeeld: “Infographic: in vijf stappen naar een nieuwe website. De volledige tekst staat onder de afbeelding.”

Laag 2: de volledige tekstversie

Direct onder of naast de infographic, in gewone html. Met koppen, lijsten en waar nodig een tabel. Zo kan een screenreadergebruiker er doorheen navigeren zoals door elke andere tekst, en kan iemand die inzoomt de tekst gewoon lezen.

<figure>
  <img src="vijf-stappen.png"
       alt="Infographic: in vijf stappen naar een nieuwe website. De volledige tekst staat hieronder.">
  <figcaption>In vijf stappen naar een nieuwe website</figcaption>
</figure>

<details>
  <summary>Lees de infographic als tekst</summary>
  <ol>
    <li>Kennismaking: ...</li>
    <li>Ontwerp: ...</li>
  </ol>
</details>

Het uitklapblok met details en summary houdt de pagina rustig voor wie het beeld genoeg vindt, en werkt zonder extra code met toetsenbord en screenreader. Een gewone sectie onder de afbeelding is ook prima, en zelfs iets vindbaarder. Kies wat bij de pagina past.

Bevat de infographic vooral cijfers die zich lenen voor rijen en kolommen, gebruik dan een echte tabel als tekstversie. Hoe die goed in elkaar zit, staat in tabellen op uw website toegankelijk maken.

Het beeld zelf: waar u op let

Ook met een goede tekstversie blijft het beeld voor veel bezoekers de eerste ingang. Een paar punten maken het voor meer mensen leesbaar:

• Contrast. Tekst in de infographic moet goed afsteken tegen de achtergrond. Houd minimaal 4,5:1 aan voor kleine tekst en 3:1 voor grote tekst en grafische onderdelen zoals lijnen in een grafiek.
• Niet alleen kleur. Gebruikt u groen voor “ja” en rood voor “nee”, zet er dan ook een vinkje of kruisje of een woord bij. Waarom dat nodig is, leest u in kleur mag niet het enige signaal zijn.
• Leesvolgorde. Maak duidelijk waar het begint en welke kant het opgaat, met nummers of pijlen.
• Lettergrootte. Geen piepkleine bronvermeldingen of voetnoten in het beeld. Zet die in de tekst eronder.
• Formaat. Een lange, smalle infographic is op een telefoon met inzoomen bijna niet te volgen. Overweeg om hem op te knippen in een paar losse beelden, elk met een eigen kop in de tekst.

En als de infographic in een pdf zit?

Veel organisaties publiceren een infographic als pdf, bijvoorbeeld als bijlage bij een jaarverslag. Dan gelden dezelfde principes, maar in een pdf is de techniek anders: tags, leesvolgorde en alternatieve tekst moeten in het pdf-bestand zelf goed zijn ingesteld. Een tekstversie op de webpagina naast de download is vaak de eenvoudigste oplossing. Hoe u pdf’s zelf toegankelijk maakt, leest u bij pdf-documenten toegankelijk maken.

Drie fouten die vaak voorkomen

De tekstversie loopt achter. Iemand past het beeld aan, bijvoorbeeld een nieuw cijfer of een extra stap, en vergeet de tekst eronder. Dan krijgen bezoekers die de tekst lezen verouderde informatie. Spreek af dat beeld en tekst altijd samen worden bijgewerkt.

De tekstversie staat op een aparte pagina. Een link “tekstversie” naar een andere pagina werkt technisch, maar het is een omweg. Wie de link mist, mist de inhoud. Op dezelfde pagina is beter.

De alt herhaalt de figcaption letterlijk. Staat de titel al in het bijschrift, dan hoeft de alt die niet woord voor woord te herhalen. Laat de alt vooral zeggen dat het om een infographic gaat en waar de volledige tekst staat.

Checklist voor uw volgende infographic

1. Tekst eerst geschreven en bewaard.
2. Korte alt-tekst die samenvat en naar de tekstversie verwijst.
3. Volledige tekstversie in html op dezelfde pagina, met koppen of een lijst.
4. Cijfers in een tabel als dat logischer is.
5. Contrast in het beeld gecontroleerd.
6. Geen informatie die alleen via kleur wordt overgebracht.
7. Bronnen en voetnoten in de tekst, niet alleen in het beeld.
8. Op een telefoon bekeken, ook ingezoomd.

Heeft u al infographics online staan, begin dan met de meest bezochte. Vaak heeft de ontwerper de oorspronkelijke tekst nog. Anders typt u hem over uit het beeld, wat minder werk is dan het lijkt.

Het hoort bij het grotere plaatje

Een infographic is één onderdeel van uw content. Dezelfde gedachte, informatie niet opsluiten in één vorm, keert terug bij video, pdf’s en afbeeldingen. Op de pagina digitale toegankelijkheid vindt u hoe die onderdelen samenhangen en waar u het best kunt beginnen.