• gepubliceerd
  • leestijd
    ± 4 minuten

Zo maak je toeganke­lijke tabellen en grafieken

Gebruik je tabellen en grafieken op je website? In deze blogpost geven we je tips om ze snel digitaal toeganke­lijk te maken!

Bied je informatie op je website aan in de vorm van tabellen en grafieken? In deze blogpost geven we je tips om ze snel toeganke­lijk te maken! Tabellen en kunnen handig zijn om informatie gestructureerd aan te bieden. Toch zijn ze niet altijd bruikbaar voor bezoekers met een functiebeperking. Zonde, want zo bedien je niet je hele doelgroep. Tijd om je grafieken en tabellen eens tegen het licht te houden.

Een vel papier met grafieken

Zoals je waarschijn­lijk al weet, moet informatie op overheidswebsites voor iedereen bruikbaar zijn. Veel overheidsinstanties zijn daarom hard aan de slag om hun online informatie toeganke­lijk te maken. Een specifiek, maar geen onbelangrijk onderwerp, zijn online tabellen en grafieken. Want een tabel of grafiek die voor een lezer zonder functiebeperking goed te volgen is, kan voor iemand mét een functiebeperking volkomen onbegrijpe­lijk zijn. Dat zit zo:

Hoe blinden en slechtzienden je tabellen en grafieken ‘lezen’

  • Hulpapparatuur zoals screenreaders en brailleleesregels lezen online informatie niet eenvoudigweg van links naar rechts voor.
  • Screenreaders bijvoorbeeld lezen cellen in data tabellen één voor één voor, waardoor mensen met een functiebeperking lastiger de context van de hele tabel kunnen volgen.
  • Deze screenreaders lezen lay-out in een tabel, zoals afbeeldingen, per regel voor. Zet je het onderschrift op een andere rij, dan is het voor blinden en slechtzienden niet meer te volgen welk onderschrift bij welke afbeelding hoort. Kortom, het oogt mooi, maar mist z’n doel. Dus zet informatie die bij elkaar hoort, op één rij.

Belangrijkste uitgangspunt voor toeganke­lijke content: zet je gebruiker centraal

Goede en toeganke­lijke content is afgestemd op wat de gebruikers van jouw site willen lezen. Bedenk voordat je je tabellen en grafieken aanpast daarom eerst of je doelgroep op deze informatie zit te wachten. Wat voor jouw organisatie belangrijk is, kan voor je doelgroep niet relevant zijn om te lezen. Hiermee kunt je al een eerste onderscheid maken van wat je online laat staan en welke informatie je toeganke­lijk(er) gaat maken. Ga daarnaast na of een tabel of grafiek wel de juiste manier is om je informatie over te brengen. Misschien is een lopende tekst beter? Bied duide­lijke en relevante informatie aan, de vorm waarmee je dit doet is daaraan ondergeschikt.

Tabellen: houd ze simpel en overzichte­lijk

Het voordeel van tabellen is dat je veel informatie in één keer kunt aanbieden. Het risico is dat je er te veel informatie in wilt zetten. Hierdoor wordt het voor je lezer onduide­lijk wat je boodschap precies is.

  • Gebruik tabellen daarom alleen als ze de informatie duide­lijker maken en niet (alleen) voor een mooie lay-out.
  • Kies liever voor twee eenvoudige tabellen dan één grote en ingewikkelde. Dat is voor iedereen prettiger en zo kan spraaksoftware de juiste informatie voorlezen.

Door de juiste HTML-codes in je tabellen te gebruiken, kan voorleesapparatuur je tabellen bovendien beter uitlezen:

  • Gebruik de <td> tag voor datacellen en voor rij- en kolomkoppen <th> tags. Door <th> tags kunnen screenreaders beter onderscheid maken tussen rij- of kolomkoppen.
  • Met het scope- of id/headersattribuut koppel je datacellen expliciet aan de bijbehorende koppen. Door deze attributen aan de rij (row)- of kolom(col)kop toe te voegen geef je aan voorleesapparatuur aan dat de kop geldt voor alle datacellen naast of onder de kolomkop.
  • Extra informatie over de tabel kun je weergeven met het caption element (om titels aan tabellen te geven) en met het summary attribuut geef je een korte beschrijving van hoe je tabel is georganiseerd en hoe je doelgroep deze kan gebruiken. Dit attribuut is vooral handig voor mensen die een screenreader gebruiken.

Tip: maak toeganke­lijke HTML-tabellen met de HTML Table Generator.

Grafieken: wat wil je gebruiker weten?

Het voordeel van een grafiek is dat je in één beeld veel informatie kunt overdragen. Grafieken zijn meestal gebaseerd op tabellen. Zoals hierboven staat uitgelegd kun je die goed toeganke­lijk maken. Daarom is een tabel voor toeganke­lijkheid vaak beter. Wil je toch een grafiek gebruiken? Benut dan deze tips om je grafiek toeganke­lijk te maken.

  • Denk eerst na over de functie van een grafiek: gaat het om precieze informatie of wil je bijvoorbeeld enkel een trend laten zien?
  • Zet bij een grafiek in de ALT-tekst alle belangrijke informatie die de grafiek weergeeft.
  • Geef bij ingewikkelde grafieken eronder een samenvatting met de belangrijkste conclusies.
  • Beschrijf bij eenvoudige grafieken de belangrijkste informatie, zoals stijgende of dalende lijnen, extremen, etc.
  • Zorg voor daarnaast voldoende contrast tussen de kleuren in je grafiek, zodat het verschil in de lijnen ook voor kleurenblinden en slechtzienden te onderscheiden is.
  • Gebruik per lijn figuurtjes voor elk datapunt. Zo is elke lijn goed herkenbaar voor mensen die kleurenblind zijn.
  • Tekst moet zichtbaar zijn voor voorleessoftware, dus verwerk tekst niet in de afbeelding maar erbovenop in een aparte laag.
  • Zorg dat je gebruiker met visuele of motorische beperking alle informatie uit de grafiek via een muisklik, toetsenbord of een touchscreen kan opvragen.
  • Omzeil ontoeganke­lijke grafieken met een skiplink.

Sparringpartner nodig? Wij denken graag met je mee!

Zoals je leest komt er best wat kijken bij het toeganke­lijk maken van je tabellen en grafieken. Ben jij hier ook mee bezig en kun je er hulp gebruiken? Neem gerust contact met ons op. Wij denken graag met je mee en zorgen ervoor dat al jouw content toeganke­lijk is. Zo is jouw website straks ook voor iedereen bruikbaar!