Toegankelijke tabellen

Tabellen zijn een veelgebruikte manier om cijfers, gegevens en hun onderlinge relaties inzichtelijk te maken. Ze worden gebruikt voor uiteenlopende zaken als financiële jaarcijfers of productoverzichten. Als tabellen goed zijn opgemaakt, zijn ze ook voor gebruikers van hulpsoftware als screenreaders prima te gebruiken.

De problemen met tabellen

Het gebruik van complexe tabellen wordt regelmatig afgeraden en daar zijn goede redenen voor. 

Het eerste, en gelijk vaak moeilijkste, probleem is dat tabellen een beroep doen op het cognitieve vermogen van de bezoeker om de informatie te verwerken. Voor sommige mensen zijn tabellen uitermate geschikt om veel informatie compact te presenteren. Voor anderen kan dit erg moeilijk zijn en zien ze door de bomen het bos niet meer.

Het tweede probleem is een technisch probleem. Om informatie uit een tabel voor mensen met een visuele beperking inzichtelijk te maken, is het belangrijk dat de code van de tabel goed is opgemaakt. Alleen dan kan een screenreader alle informatie uit de tabel halen.

Als een bezoeker met een screenreader op een tabel terecht komt, wordt er daarna cel voor cel door de tabel genavigeerd. Elke cel uit de tabel wordt dus los voorgelezen.

Als een tabel niet goed is opgemaakt, is er geen informatie over de rij en kolom waarin de cel zich bevindt. De betekenis van de cel is dan niet duidelijk te bepalen.

Tabellen toegankelijk maken voor mensen; het cognitieve probleem oplossen.

Zoals gezegd, dit is wellicht het lastigste probleem om op te lossen.

Het is goed om eerst te kijken of je de informatie op een simpelere manier kunt aanbieden. Op deze manier maak je het toegankelijker voor meer mensen. Kijk of je de informatie verder kunt opsplitsen over meerdere kleine tabellen of informatie kunt presenteren in de vorm van lijsten.

Het is niet altijd mogelijk om de informatie te vereenvoudigen. Er kan bijvoorbeeld een wettelijke verplichting zijn om de informatie in een bepaalde vorm te publiceren. Een alternatief is dan om de informatie in een tekstuele vorm te presenteren, naast de tabel.

Tabellen toegankelijk maken voor computers; het technische probleem oplossen.

Tabellen kunnen technisch goed toegankelijk gemaakt worden, zelfs als ze ingewikkeld worden. Uiteraard neemt de technische complexiteit daarmee ook toe en niet elke CMS-systeem bied deze mogelijkheid.

Een goede tabel wordt met de juiste HTML-elementen opgemaakt:

• table: De container waarin alle informatie geplaatst wordt.
• caption: Het eerste subelement van de tabel. Hierin bijschrijf je de inhoud en andere informatie kort. Dit wordt eenmalig voorgelezen als een screenreader bij de tabel aankomt.
• tr: De tabel rij, de container van elke rij in je tabel.
• th: De tabel headers of koppen, hiermee wordt het onderwerp van een kolom of rij aangegeven.
• td: de tabel data cellen waarin je informatie komt.

Impliciete associatie

De HTML-elementen van een tabel hebben wat we noemen impliciete associatie. Dat betekent dat onderlinge relaties automatisch gelegd kunnen worden als de tabel goed is opgemaakt. Een screenreader kan daardoor van een cel bepalen welke header(s) erbij horen.

Deze impliciete associatie werkt in de meeste screenreaders goed voor eenvoudige tabellen.

Expliciete associatie

Om een betrouwbare programmatische verbinding tussen data cellen (td) en tabel headers (th) te leggen kunnen we extra attributen toevoegen. Dit noemen we expliciete associatie. 

Bij tabellen die ingewikkelder zijn van opmaak, bijvoorbeeld als er samengevoegde cellen worden toegepast via colspan of rowspan, is het aan te raden zelf de juiste verbindingen te leggen.

De scope aangeven

Om bij tabellen de verbindingen betrouwbaarder te maken kun je het scope attribuut toevoegen. Hiermee geef je aan of de tabel header voor een rij of kolom bedoeld is. 

Het scope attribuut kent twee waarden:

• scope="col"⁣: Hiermee geef je aan dat het th element een kop is voor de kolom.
• scope="row"⁣: Hiermee geef je aan dat het th element een kop is voor de rij.

Hieronder zie je een code voorbeeld van een simpele tabel waarbij met het scope attribuut de verbindingen expliciet zijn aangemerkt.

<table>
  <caption>entreekosten zwembad (in euro's)</caption>
  <tr>
    <td></td>
    <th scope="col">Los zwemmen</th>
    <th scope="col">10-baden kaart</th>
  </tr>
  <tr>
    <th scope="row">Vrij zwemmen</th>
    <td>5,25</td>
    <td>47,50</td>
  </tr>
  <tr>
    <th scope="row">Banen zwemmen</th>
    <td>4,50</td>
    <td>40,00</td>
  </tr>
</table>

De id en header attributen

Een tweede manier om deze verbindingen vast te leggen is het gebruik van id en headers attributen. Hiermee maak je voor elke data cel (td) een relatie aan.

Deze methode werkt, door eerst met het id attribuut op alle tabel headers (th) een unieke waarde te koppelen, bijvoorbeeld <th id="c1">.

Deze id waardes gebruik je vervolgens in het headers attribuut op de td cel elementen. Je combineert daarbij de id waarden als volgt: <td headers="c1 r2">. Waarden worden met spaties gescheiden en worden op de ingevulde volgorde voorgelezen.

Het eerdere code voorbeeld komt er met headers en id attributen als volgt uit te zien:

<table>
  <caption>entreekosten zwembad (in euro's)</caption>
  <tr>
    <td></td>
    <th id="c1">Los zwemmen</th>
    <th id="c2">10-baden kaart</th>
  </tr>
  <tr>
    <th id="r1">Vrij zwemmen</th>
    <td headers="c1 r1">5,25</td>
    <td headers="c2 r1">47,50</td>
  </tr>
  <tr>
    <th id="r2">Banen zwemmen</th>
    <td headers="c2 r1">4,50</td>
    <td headers="c2 r2">40,00</td>
  </tr>
</table>

Resultaat is dat een screenreader nu voor elke cel de gekoppelde th elementen zal voorlezen.

Ondersteuning bij toegankelijke tabellen

Zoals je hebt kunnen lezen is het mogelijk om tabellen toegankelijk aan te bieden, zolang je aandacht houdt voor de gebruiker en de technische oplossingen.

Houdt er rekening mee dat de meeste CMS'en geen ondersteuning hebben voor dit soort complexe tabellen en dat het vaak nodig is deze handmatig te programmeren.