Hoe kan ik data toegankelijk maken met tabellen?

Tabellen zijn een uitstekende manier om complexe data inzichtelijk te maken. Deze data kun je toegankelijk maken door 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 moet de relatie tussen cellen duidelijk zijn voor mensen met een visuele beperking.

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 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 websites van de overheid is dit zelfs een verplichting. Dit geldt ook voor een document, grafieken of afbeeldingen die data weergeven. Deze tekst beschrijft de inhoud 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 iedereen wat de kern van de tabel is.

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.

<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>