Een tabel op mobiel leesbaar houden

Voor je iets oplost, bepaal je welk probleem je hebt. Open de pagina op een telefoon en controleer drie dingen:

• Overloop: schuift de hele pagina zijwaarts, zodat de bezoeker de rest van de inhoud kwijtraakt?
• Afgeknepen tekst: is de tekst zo klein dat je moet inzoomen?
• Verloren verband: weet je bij het scrollen nog bij welke rij of kolom een cel hoort?

Zie je overloop van de hele pagina, dan zit het probleem in de tabelbreedte, niet in de tabelinhoud. Zie je verloren verband, dan helpt het alleen inkrimpen niet, want de bezoeker mist de koppen. Noteer per tabel op je site welk van de drie symptomen speelt. De oplossing hangt daarvan af. Deze controle meet je zelf op echte toestellen, niet via een publieke scan.

Een tabel die niet leesbaar is, voelt traag aan, ook als hij snel laadt. De MDN-pagina over webperformance omschrijft prestaties als zowel objectieve metingen als de ervaren gebruikerservaring van laad- en runtimegedrag, en noemt soepel scrollen als voorbeeld. De bron zegt niets specifieks over tabellen; of een zijwaarts scrollende tabel op jouw pagina haperend aanvoelt, controleer je zelf op echte toestellen.

Let op de tabel zelf: bij een zeer grote tabel kun je zelf testen of de weergave merkbaar zwaarder aanvoelt. Is dat zo, overweeg dan om rijen te beperken of te splitsen in plaats van alles in één blok te tonen. De leergang Learn Performance op web.dev behandelt de basis van laden en weergeven. Gebruik die als achtergrond om te beoordelen of je pagina een algemeen laadprobleem heeft, los van de tabel.

De keuze volgt uit hoe de lezer de tabel gebruikt. Gebruik deze matrix:

De laatste regel verdient aandacht: gebruik een tabel voor data met rij- en kolomverbanden, niet voor opmaak. Staat er geen verband in, dan los je het probleem het best op door de tabel af te schaffen.

1. Beslis per tabel met de matrix hierboven en schrijf de keuze op.
2. Zorg dat de tabel echte kop- en gegevenscellen gebruikt, zodat de koppen aan hun cellen gekoppeld blijven.
3. Bij een scrollcontainer: plaats de tabel in een omhulling die zijwaarts kan scrollen, zodat de rest van de pagina niet meeschuift. Laat de container toetsenbord- en schermlezerbereikbaar zijn.
4. Bij herschikken: laat elke waarde haar kolomkop behouden, zodat een cel niet losstaat van zijn betekenis.
5. Bied een korte toelichting boven de tabel als hij zijwaarts scrolt, zodat de lezer weet dat er meer inhoud is.
6. Test het resultaat op minstens één smal en één breder scherm.

De toegankelijkheidstutorials van W3C bevatten een onderdeel over tabellen, met voorbeelden voor eenvoudige en complexe structuren. Raadpleeg dat voor de concrete markup. Welke aanpak jouw CMS of thema ondersteunt, controleer je in je eigen omgeving.

Stel dat een kmo drie abonnementen vergelijkt in een tabel met vijf kolommen: naam, prijs per maand, inbegrepen gebruikers, opslag en looptijd. Dit is de invoer, zonder verzonnen cijfers:

• Gebruik: lezers vergelijken de drie abonnementen onderling, dus ze lezen over kolommen heen.
• Diagnose op telefoon: de pagina schuift zijwaarts en de abonnementsnaam verdwijnt bij het scrollen.
• Keuze volgens de matrix: scrollcontainer met de eerste kolom (abonnementsnaam) vast zichtbaar.
• Alternatief: als slechts prijs en looptijd echt tellen, toon die twee kolommen en verwijs naar het volledige overzicht.

Te controleren na de wijziging (afhankelijk van jouw implementatie): schuift de pagina zelf niet meer zijwaarts, alleen de tabel; blijft elke cel aan zijn kolomkop gekoppeld; blijft de eerste kolom herkenbaar bij het scrollen; de tabel is met het toetsenbord te bereiken. Welke tijd of welk effect dit oplevert, laat dit voorbeeld bewust open.

Test op echte toestellen, niet alleen in de verkleinde weergave van een browser. Controleer:

• Blijft de rest van de pagina op zijn plaats terwijl de tabel scrolt?
• Kun je met het toetsenbord in de scrollcontainer komen en erin navigeren?
• Leest een schermlezer elke cel samen met zijn kop voor? Probeer dit zelf met een schermlezer, want automatische controles dekken dit niet volledig.
• Is de tekst leesbaar zonder in te zoomen?

De W3C-tutorialpagina geeft aan dat de tutorials best practices combineren en dat een bredere dekking elders in de WCAG-materialen staat. Deze gids is dus geen volledige toegankelijkheidscontrole. Wil je zien welke zichtbare signalen je website nu geeft, bekijk dan je site via Marketing Scan. Een publieke scan beoordeelt niet hoe een tabel zich op elk toestel gedraagt.