Hoe kan ik data toegankelijk maken met tabellen?

Tabellen zijn een uitstekende manier om complexe data inzichtelijk te maken. Om deze data toegankelijk te maken, is het belangrijk om niet alleen op visuele kenmerken te bouwen. Ieder element van de tabel moet geïdentificeerd worden en alle data moet te interpreteren zijn voor alle gebruikers. Daarnaast zorgt een heldere structuur ervoor dat de relatie tussen cellen duidelijk is voor mensen met een visuele beperking, zodat de website digitaal toegankelijk is voor iedereen. Dit is van groot belang bij bijvoorbeeld data analyse, waar inzicht in gegevens voor iedereen begrijpelijk moet zijn.

Maak toegankelijke tabellen door headers en cellen te onderscheiden

Als je een toegankelijke site ontwikkelt, is het belangrijk dat je een geldige HTML-opbouw aanhoudt. Deze opbouw is ook van toepassing op tabellen. De bovenste kolommen in een rij, die aankondigen waar de tabel over gaat (de headers), krijgen het element <th> mee. Voor cellen met data wordt het element <td> gebruikt:

<table>
<tr>
<th>Datum</th>
<th>Evenement</th>
<th>Locatie</th>
</tr>
<tr>
<td>16 juli</td>
<td>Verjaardag</td>
<td>Arnhem</td>
</tr>
</table>

Dit is een standaardopbouw van een digitaal toegankelijke tabel. © codewall.co.uk

Maak data toegankelijk met alternatieve teksten

Volgens WCAG 1.1.1 heeft inhoud zonder tekst, zoals een tabel, alternatieve tekst nodig om toegankelijk te zijn voor mensen die ondersteunende technologieën, zoals schermlezers, gebruiken. Voor overheidsorganisaties is dit zelfs een verplichting. Dit geldt ook voor een document, grafieken of afbeeldingen die data weergeven. Deze tekst beschrijft de informatie en het doel van de tabel in een paar zinnen, zodat iedereen begrijpt wat de tabel laat zien, ook zonder het visueel te zien. Bijvoorbeeld: “Deze tabel toont de verkoopcijfers van januari tot juni, verdeeld per productcategorie.” Zo weet je wat de kern van de tabel is, ook als de data verzameld is uit meerdere bronnen. Dit is essentieel voor een data driven werkwijze waarbij heldere communicatie van informatie centraal staat.

Meer aanduidingen voor geavanceerde tabellen

Soms is een tabel geen keurige lijst die van boven naar beneden loopt. HTML kent een aantal attributen om complexe tabellen te identificeren. Heeft een tabel headers aan de bovenkant en linkerkant, dan geef je met het scope-attribuut aan of een header in een rij staat (row) of in een kolom (col). Dat wordt geïllustreerd in onderstaand voorbeeld. Voor uitgebreide voorbeelden van toegankelijkheid en toegankelijke tabellen kun je terecht op de website van het Web Accessibility Initative. Een chief data officer of iemand die verantwoordelijk is voor datagedreven werken binnen een organisatie zou hier veel waarde aan hechten.

<table>
<caption>Afleverdatums:</caption>
<tr>
<td></td>
<th scope=”col”>Maandag</th>
<th scope=”col”>Dinsdag</th>
<th scope=”col”>Woensdag</th>
<th scope=”col”>Donderdag</th>
<th scope=”col”>Vrijdag</th>
</tr>
<tr>
<th scope=”row”>09:00 – 11:00</th>
<td>Gesloten</td>
<td>Open</td>
<td>Open</td>
<td>Gesloten</td>
<td>Open</td>
</tr>
<tr>
<th scope=”row”>11:00 – 13:00</th>
<td>Open</td>
<td>Open</td>
<td>Gesloten</td>
<td>Gesloten</td>
<td>Gesloten</td>
</tr>
</table>

Wanneer je ervoor kiest om een toegankelijke PDF te maken met tabellen, gelden grotendeels dezelfde principes. Zorg ervoor dat structuurelementen correct worden toegepast, zodat ook in de PDF de inhoud begrijpelijk is voor mensen met een visuele beperking. Ervoor zorgen dat de documentstructuur klopt, draagt bij aan een betere gebruikservaring. ‘Neem contact op’, vermeld bovendien altijd een e-mailadres of contactmogelijkheid voor ondersteuning of vragen over de toegankelijkheid.

Een goede visualisatie van data en correcte verwerking zijn essentieel bij het presenteren van informatie. Denk hierbij ook aan diagrammen, die net als grafieken en afbeeldingen begrijpelijk moeten zijn voor iedereen. Zo blijft informatie duidelijk en toegankelijk voor alle gebruikers, ongeacht hun mogelijkheden.