Het grootste voordeel van een tabel is dat het visueel informatie ordent, waardoor de lezer visueel wordt geholpen om de gegevens te vinden die nodig zijn. Naast het snel vinden van informatie kunnen middels een tabel sneller groeperingen en patronen ontdekt worden, of meerdere mogelijkheden vergeleken worden. In een interactieve tabel is het mogelijk om informatie te filteren of te sorteren. Een belangrijke voorwaarde is hierbij dat alle kolommen, rijen en cellen op een duidelijke en logische manier gemarkeerd zijn.
Ontoegankelijke tabellen
Er zijn twee veelvoorkomende fouten die tabellen voor lezers met een (visuele) beperking bijzonder moeilijk leesbaar maken, namelijk:
- Het ontbreken van semantische opmaak in de broncode van de tabel: als bijvoorbeeld een tabel als een afbeelding is ingesloten. Of als de tabel visueel er wel uitziet als een tabel, maar in de code bestaat uit ongerelateerde blokken tekst met specifieke uitlijning.
- Het ontbreken van duidelijke verbanden tussen gegevens in de tabel: bijvoorbeeld als de semantische structuur binnen een tabel ontbreekt waardoor onduidelijk wordt bij elke kop of rij een specifieke cel hoort.
Daarnaast kan het voorkomen dat er onterecht een semantische tabel wordt toegevoegd aan een publicatie. Bijvoorbeeld als een tabel vooral als visuele indeling wordt gebruikt in plaats van voor het ordenen van gegevens. Een lezer die gebruik maakt van hulpsoftware wordt dan mogelijk onnodig lastiggevallen met irrelevante informatie over cellen, bijbehorende kolomkoppen en rijen.
Wat zijn toegankelijke tabellen?
Een toegankelijke tabel is niet alleen visueel goed gestructureerd, maar ook op de juiste manier gemarkeerd voor het gebruik van bijvoorbeeld een schermlezer. ‘Onder water’ is de tabel zo opgebouwd dat de betekenis van elementen en gegevens allemaal duidelijk zijn.
In tabellen worden gegevens zowel visueel als semantisch geordend:
- Visueel dienen kolommen, rijen, rasterlijnen, randstijlen, visuele markers en samengevoegde cellen om de verbanden in de gegevens te verduidelijken.
- Semantisch gezien kan en zou ieder aspect dat visueel informatie over de ordening overbrengt in de broncode van het document dezelfde informatie over deze ordening mee moeten krijgen. Zodat software deze informatie ook kan herkennen.
Toegankelijke tabellen worden dus alleen gebruikt om aan elkaar gerelateerde informatie of data te structureren. Niet om visueel een lay-out te bewerkstelligen. De tabellen zijn zo eenvoudig mogelijk in opbouw. Het samenvoegen en splitsen van cellen wordt zoveel mogelijk vermeden. Tabellen in cellen wordt volledig vermeden. Eventueel wordt een complexe tabel opgesplitst in meerdere tabellen en onderscheiden door koppen. Daarnaast is duidelijk welke cellen de kolom- of rijkoppen zijn. Hoe dat moet lees je in de paragrafen hierna.
Informatie kan visueel verder verduidelijkt worden door bijvoorbeeld ook de achtergrondkleuren van (actieve) rijen of kolommen aan te passen en/of de omlijning ervan een bepaalde dikte of kleur te geven. Probeer je hierbij altijd voor te stellen welke informatie er verloren gaat als je niet alles in de tabel kunnen waarnemen. Bijvoorbeeld voor iemand die kleurenblind of slechtziend is, maar ook voor iemand die de tabel op een kleiner scherm zoals van een smartphone probeert te lezen. Zorg ervoor dat deze informatie ook op andere manier beschikbaar is zoals in tekst of door goede semantische opmaak.
De WCAG (Web Content Accessibility Guidelines) bieden ook enkele criteria en richtlijnen voor het toegankelijk maken van tabellen.
Toegankelijke tabellen in een teksteditor
In een teksteditor (zoals bijvoorbeeld Microsoft Word) is het middels de functionaliteiten van het programma mogelijk om een tabel semantisch en dus toegankelijk op te maken. Je kunt de gewenste structuur van de tabel bepalen, net als de hoeveelheid rijen en kolommen. Ook kun je de kolom- en rijkoppen op je juiste manier markeren. Deze kolom- en rijkoppen worden door software gebruikt om de relaties binnen een tabel vast te stellen. Bijvoorbeeld om aan de lezer informatie te geven over bij welke kolomkop en rijnummer een cel hoort. Bij complexe tabellen kan indien nodig een beschrijving toegevoegd worden. Verder zit er in de meeste teksteditors een ingebouwde toegankelijkheidscontrole die ook ondersteuning biedt bij het identificeren van eventuele fouten, zoals ontbrekende kopteksten.
Toegankelijke tabellen in HTML
In HTML-code is het belangrijk dat je de juiste tags gebruikt, die horen bij een tabel. Werk altijd met een <thead>-tag (table header) en <tbody>-tag (table body), en daaronder <tr> (table row) en vervolgens <td> (table data). Zo is de structuur van de tabel duidelijk leesbaar voor zowel een gebruiker als eventuele hulptechnologieën. Eventueel kun je ook werken met een <caption>-tag waarin je boven in de tabel een beschrijving of titel kunt meegeven. Maar bedenk dat de tabel vooropgesteld vooral functioneel moet zijn, dus zonder te veel verfraaiingen. Verdere opmaak kun je middels een stylesheet (CSS) alsnog toevoegen.
<!— Start HTML-code: voorbeeld tabel met gebruik van caption, tablehead en tablebody -->
<table>
<caption>Onze producten</caption>
<thead>
<tr>
<th>Product</th>
<th>Prijs</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>€1.000</td>
</tr>
<tr>
<td>Product 2</td>
<td>€1.100</td>
</tr>
</tbody>
</table>
<!—Einde HTML-code -->
Hoe toets ik of de tabel toegankelijk is
Om tabellen goed te kunnen beoordelen is het nodig om ‘onder water’ (dus in de HTML-code) te kijken naar de inhoud en de semantische opmaak van een document. Stel eerst inhoudelijk vast of een tabel wel de juiste manier is om de informatie te presenteren. Controleer daarna of de tabel in code op de juiste manier is opgemaakt. Let daarbij vooral ook op de aanwezigheid van tabel- en rijkoppen, samengevoegde of geneste cellen en de inhoud van cellen, maar ook of er een duidelijk bijschrift aanwezig is. Bevat de tabel de juiste semantische elementen en worden de tags op de juiste manier gebruikt? Een aantal toegankelijkheidscheckers voor met name webpagina’s geven visueel aan uit welke elementen (tabel, rij, kolom, cel, kop) is opgebouwd.
Als je zelf kundig bent in het gebruiken van een schermlezer, bijvoorbeeld NVDA (Windows) of VoiceOver (macOS/iOS), kun je deze ook gebruiken om te testen. Controleer of de schermlezer de kopjes en data in de tabel correct en op de juiste volgorde voorleest. Belangrijk is dat de schermlezer duidelijk kan maken welke rij en kolom je op dat moment leest. Navigeer ook door de tabel en ga na of de betekenis van de cellen duidelijk is. Welke informatie over rijen, kolommen en cellen er direct of na aanvraag via sneltoetsen wordt gegeven door een schermlezer, hangt af van je instellingen.
Waarom en voor wie is het belangrijk?
Gebruikers met een visuele beperking gebruiken vaak een schermlezer of brailleleesregel die alle elementen van een tabel zal aankondigen en voorlezen. Vervolgens maken zij een mentale ‘kaart’ van de tabel, ofwel: ze vertalen de informatie mentaal naar een rasterweergave van de tabel. Dat is moeilijk en alleen mogelijk als er relevante semantische opmaak beschikbaar is. Als de semantiek incompleet of incorrect is, zullen visueel beperkte gebruikers, die de tabel niet of slechts gedeeltelijk kunnen zien, een slechte ervaring hebben.
Daarnaast zijn er gebruikers die vergrotingshulpmiddelen gebruiken of moeite hebben met het begrijpen en verwerken van grote hoeveelheden informatie of een complexe tabel. Maar ook ‘beperkingen’ zoals een kleiner beeldscherm, denk aan bijvoorbeeld een smartphone of tablet, kan ervoor zorgen dat een tabel niet volledig te zien is, waardoor bepaalde content moeilijk of zelfs niet gevonden kan worden.
Verder lezen over semantische opmaak
Lees meer over het belang van semantische opmaak in artikel Wat is semantische opmaak en waarom toepassen? Met semantische opmaak voldoe je aan een aantal WCAG-criteria. Welke dat zijn lees je in artikel WCAG en semantische opmaak. Hoe je specifieke elementen kunt toetsen op toegankelijke semantische opmaak, lees je in deze artikelen:
