TOEGANKELIJKHEID ≠ OVERLAY · 36
Toegankelijke tabellen: gegevens hebben context nodig, geen overlay
📅 9 november 2026 · ⏱ 8 min leestijd
Een tabel kan overzichtelijk lijken en toch onbegrijpelijk zijn voor iemand die luistert of vergroting gebruikt. Toegankelijkheid vereist dat het verband tussen elke waarde, de bijbehorende rij en de kolom behouden blijft.
01. Een los getal zegt weinig
Stel dat je openingstijden opzoekt en alleen “09:00, 10:00, 11:00, 12:00” hoort. Zonder te weten bij welke dag en welke dienst een tijd hoort, kun je geen bruikbare beslissing nemen. De drempel ontstaat wanneer de context volledig afhangt van naar boven of naar links kijken. De gegevens zijn zichtbaar, maar de software kan de benodigde verbanden niet vaststellen.
Hetzelfde gebeurt bij een prijstabel. Een bedrag kan een maandtarief, een jaarprijs of een toeslag voorstellen. Als bezoekers de positie van alle kolommen moeten onthouden, wordt informatie zoeken een reconstructieoefening. Het doel is dat iemand zelfstandig een concrete vraag kan beantwoorden, zonder de betekenis van een getal te hoeven raden.
02. Bepaal of de informatie een tabel nodig heeft
Een tabel is geschikt wanneer vergelijken tussen rijen en kolommen betekenis oplevert: openingstijden, tarieven, eigenschappen of resultaten. Een reeks instructies of een korte beschrijving kan duidelijker zijn als lijst of gewone alinea’s. Kies op basis van de informatie, niet omdat de editor een aantrekkelijk raster aanbiedt.
Gebruik tabellen ook niet om twee onafhankelijke inhoudsblokken naast elkaar te plaatsen. CSS en opmaakcomponenten regelen de presentatie. Het mengen van vormgeving en gegevens creëert een structuur die hulpsoftware kan aankondigen zonder dat dit de lezer helpt. Beschrijf vooraf welke vergelijking iemand moet maken en verwijder kolommen die niets aan die taak bijdragen. Dat maakt later onderhoud eveneens eenvoudiger.
03. Koppen moeten ook in de code bestaan
De eerste rij vet maken of een blauwe achtergrond geven, maakt de cellen nog geen echte koppen. Cellen die rijen of kolommen identificeren horen th te gebruiken; gewone gegevenscellen gebruiken td. In eenvoudige tabellen kunnen scope="col" en scope="row" de richting van de relevante relaties expliciet maken.
Bijvoorbeeld: “Dienst”, “Maandag” en “Dinsdag” benoemen kolommen. “Consulten” en “Ondersteuning” kunnen rijen benoemen. Bij het opzoeken van een tijd zijn de dienst en de dag allebei nodig. Voeg niet standaard ARIA toe om bestaande HTML-semantiek te herhalen. Controleer eerst de gegenereerde HTML en daarna hoe de gebruikte combinatie van browser en schermlezer de verbanden tussen verschillende cellen weergeeft.
| Dienst | Maandag | Dinsdag |
|---|---|---|
| Consulten | 09:00 | 10:00 |
| Ondersteuning | 11:00 | 12:00 |
04. Een bruikbare titel en korte toelichting
Een caption helpt om de tabel te herkennen. “Openingstijden van onze diensten” vertelt meer dan “Tabel 1”. De titel moet de tabel van andere tabellen onderscheiden zonder dat alle voorgaande alinea’s moeten worden gelezen. Als periode, valuta of eenheid essentieel zijn, moeten die duidelijk in de tabel of een gekoppelde toelichting staan.
Een complexe tabel kan daarnaast een korte uitleg over de opbouw nodig hebben. Leg bijvoorbeeld uit dat elke kolomgroep een kwartaal voorstelt. Deze uitleg vervangt de koppen van de afzonderlijke cellen niet. Vermijd lange beschrijvingen die alle waarden herhalen: het doel is gericht zoeken makkelijker maken, niet iemand verplichten dezelfde informatie tweemaal te beluisteren voordat de juiste cel wordt bereikt.
05. Vereenvoudig voordat je cellen samenvoegt
Samengevoegde cellen en koppen met meerdere niveaus maken interpretatie en onderhoud lastiger. Onderzoek eerst of de informatie kan worden verdeeld over kleinere tabellen met precieze titels. Twee perioden scheiden kan de begrijpelijkheid meer verbeteren dan extra attributen aan een enorm raster toevoegen.
Als de complexiteit noodzakelijk is, moeten groepen en relaties bewust worden vastgelegd. Afhankelijk van de structuur kunnen scope="colgroup", scope="rowgroup" of verbindingen via id en headers geschikt zijn. Dit zijn geen onderling uitwisselbare recepten voor iedere tabel. Controleer de werkelijke relaties en test middelste cellen, grenzen en verschillende groepen. Een correct voorgelezen eerste rij bewijst niet dat de volledige tabel begrijpelijk is.
06. Mobiele weergaven moeten verbanden behouden
Tekst verkleinen totdat de hele tabel op een telefoon past, maakt de informatie moeilijk leesbaar. Kolommen verbergen zonder een andere toegang tot hun inhoud lost het probleem evenmin op. Een responsief ontwerp moet de gegevens behouden die nodig zijn om te vergelijken en te beslissen, ook wanneer iemand vergroting gebruikt.
Een horizontaal schuifbaar gebied kan redelijk zijn voor gegevens die twee dimensies vereisen. Waar nodig moet het met het toetsenbord te bedienen zijn en duidelijk aangeven dat er meer inhoud beschikbaar is. Als rijen veranderen in kaarten, behoud dan labels en betekenis in de DOM. Controleer of de visuele verandering geen semantiek verwijdert en bezoekers niet laat raden welk label bij een waarde hoort.
07. Kleur, afkortingen en lege cellen
Een groene cel verklaart niet zelfstandig “beschikbaar”, en rood betekent niet vanzelf “volgeboekt”. Voeg tekst of een ander begrijpelijk equivalent toe en controleer het contrast van tekst, bedieningselementen en relevante indicatoren. Afwisselende rijkleuren kunnen helpen bij het volgen van een rij, maar mogen niet de enige aanwijzing voor een verband zijn.
Leg onbekende afkortingen uit en gebruik eenheden consequent. Maak onderscheid tussen nul, onbekende gegevens en een niet beschikbare dienst: dit zijn verschillende situaties. Lege cellen kunnen zowel visueel als bij voorlezen dubbelzinnig zijn. Een redactionele keuze zoals “Geen gegevens” voorkomt dat stilte wordt opgevat als een numerieke waarde of een storing van de schermlezer. Pas die afspraak overal consequent toe.
08. Maak sorteren en filteren bruikbaar
Als een kop sorteren mogelijk maakt, moet die actie beschikbaar zijn via een duidelijk benoemd bedieningselement dat met het toetsenbord werkt. Geef de sorteertoestand waar nodig programmatisch door; aria-sort kan deze toestand bij de relevante kopcel aangeven. Een klein driehoekje verklaart niet welke kolom de huidige volgorde bepaalt.
Houd na filteren de focus voorspelbaar en communiceer relevante resultaten zonder voortdurend nieuwe meldingen te veroorzaken. Test ook de situatie zonder resultaten en het herstellen van het filter. Verander een informatietabel niet in een interactief raster met speciale toetsenbordnavigatie tenzij dat werkelijk nodig is. Elk aanvullend gedrag moet bewust worden ontworpen en getest, niet automatisch als een verbetering worden beschouwd.
09. Test taken in plaats van alleen elementen
Kies een vraag met een controleerbaar antwoord: “Hoe laat is ondersteuning op dinsdag beschikbaar?” Beantwoord die eerst visueel en daarna met een schermlezer en de bijbehorende opdrachten voor tabelnavigatie. De nuttige test is niet horen dat er een tabel bestaat, maar de juiste waarde en koppen vinden zonder het verband kwijt te raken.
Herhaal de taak met vergroting en een smal venster. Gebruik het toetsenbord voor knoppen, filters en schuifbare gebieden waar dat nodig is. Niet iedere cel in een statische tabel hoeft een afzonderlijke Tab-stop te worden. Noteer browser, hulptechnologie, waargenomen gedrag en het juiste antwoord dat iemand zelfstandig moet kunnen vinden. Daardoor kan een latere correctie gericht opnieuw worden gecontroleerd.
10. Wat automatische hulpmiddelen en WCAG bijdragen
Een automatische controle kan bepaalde structuurproblemen signaleren, maar bepaalt niet of een kop de gegevens goed beschrijft of kleinere tabellen vergelijken makkelijker maken. Ook worden niet zelfstandig alle filtertoestanden gevalideerd. Combineer meldingen met code-inspectie, redactionele beoordeling en handmatige taken.
Binnen WCAG 2.2 is criterium 1.3.1, Info en relaties, bijzonder relevant voor tabelstructuur. Afhankelijk van het component kunnen ook toetsenbordbediening, contrast, reflow en statusberichten van belang zijn. De reflow-uitzondering voor inhoud die twee dimensies nodig heeft, geldt niet voor de hele pagina. Beoordeel iedere toepasselijke eis afzonderlijk en presenteer een bepaalde HTML-oplossing niet als garantie voor volledige conformiteit van de complete website.
11. Herstel WordPress en Divi bij de bron
Bekijk de HTML die de tabelmodule of plugin na het opslaan genereert. Een editor kan de eerste rij benadrukken en toch uitsluitend td-cellen publiceren. Plakken vanuit een spreadsheet kan ook onnodige stijlen en samengevoegde cellen toevoegen. Beoordeel het werkelijke resultaat, niet alleen de weergave binnen de paginabouwer.
Als veel berichten hetzelfde probleem hebben, herstel dan het gedeelde component of sjabloon en documenteer een redactionele afspraak. Een overlay kan niet betrouwbaar afleiden of een getal een prijs, termijn of percentage is, of welke vergelijking de bezoeker nodig heeft. Uiterlijke instellingen kunnen aanvullend helpen, maar de relaties tussen koppen en gegevens moeten in de oorspronkelijke inhoud aanwezig zijn.
12. Ook morgen begrijpelijke informatie
Controleer vóór publicatie de titel, eenheden, koppen, relaties en het gedrag op smalle schermen. Neem een concrete taak op in de redactionele controle en herhaal die als gegevens of de plugin veranderen. Een correcte tabel kan verslechteren wanneer iemand een kolom toevoegt, cellen samenvoegt of beschrijvende labels door pictogrammen vervangt.
Betrek waar mogelijk mensen die hulptechnologie gebruiken en neem hun werkelijke problemen serieus. De beste tabel bevat niet de meeste attributen. Ze maakt raadplegen en vergelijken mogelijk zonder de structuur in gedachten te reconstrueren. Toegankelijkheid blijkt wanneer iemand de juiste waarde vindt, begrijpt wat deze betekent en de informatie kan gebruiken om een eigen beslissing te nemen.