Hoe maak je een datatabel toegankelijk?

Het probleem

Screenreaders en brailleleesregels lezen de cellen in een datatabel één voor één en los van elkaar voor. De software heeft toegang tot één cel tegelijk en weet niet welke koppen er boven de betreffende kolom staan als deze niet correct zijn opgemaakt. Iemand die gebruikmaakt van deze software weet dan niet wat bijvoorbeeld de waarde '3,60' in de datacel in rij 3 en kolom 5 betekent. Hij krijgt alleen het getal 3,60 mee, zonder enige context.

Oplossing

Wanneer je de tabel met de juiste HTML-code maakt, wordt bij elke datacel de bijbehorende rij- en/of kolomkop gepresenteerd. Zo wordt de betekenis van de celinhoud duidelijk voor de blinde of slechtziende webbezoeker. Hoe je cellen en koppen op de juiste manier aan elkaar koppelt, lees je hieronder. Er zijn twee manieren waarop je dit kunt aanpakken: via impliciete associatie en via expliciete associatie.

Impliciete associatie

Tabelcellen kunnen twee soorten informatie bevatten: data en koppen. Aan de datacellen ken je <td>-tags (td = table data) toe, aan de rij- en/of kolomkoppen <th>-tags (th = table header). Bij een tabel die op deze manier correct is opgemaakt, kan een screenreader uit zichzelf vanuit een datacel (td-element) kijken of er in de kolom boven of in de rij voor de datacel ergens één of meer koppen (th-elementen) staan. De screenreader kan dan de relatie bepalen en de inhoud van die cel of cellen voorlezen.

Dit wordt impliciete associatie genoemd. Omdat niet alle schermlezers de tags herkennen, is het beter om data en koppen expliciet aan elkaar te koppelen, ook bij eenvoudige gegevenstabellen.

Expliciet associëren

Je kunt datacellen expliciet aan de bijbehorende koppen koppelen door ofwel het scope-attribuut ofwel de id- en headers-attribuut te gebruiken.

Het scope-attribuut gaat uit van een rij- of kolomkop en geeft vervolgens aan van welke datacellen het een kop is. Bij het id- en headers-attribuut is dit omgekeerd. Dit attribuut gaat uit van een datacel en geeft bij deze cel aan welke rij- of kolomkoppen erop van toepassing zijn. Het scope-attribuut is relatief eenvoudig in gebruik en wordt vooral aangeraden voor eenvoudige tabellen met duidelijke rijen en kolommen.

Het id- en headers-attribuut is bewerkelijker, maar heeft het voordeel dat het in elke situatie kan worden ingezet.

Het scope-attribuut gebruiken

Het scope-attribuut voeg je toe aan een rij- of kolomkop. Je geeft ermee aan dat de kop van toepassing is op alle datacellen naast de rijkop of onder de kolomkop. Bij een rij heeft het scope-attribuut  de waarde 'row', bij een kolom de waarde 'col'.

In het voorbeeld hieronder is het scope-attribuut gebruikt in een eenvoudige datatabel om datacellen en bijbehorende koppen expliciet met elkaar te associëren. De tabelcellen 'Enkele reis' en 'Retour' zijn rijkoppen. Daarom krijgen deze tabelkoppen het attribuut scope="row". De tabelcellen '2e klas' en '1e klas' zijn kolomkoppen en krijgen daarom het attribuut scope="col".

Voorbeeld tabel

Voorbeeld code

<table>
  <caption>Reiskosten</caption>
  <tr>
    <td></td>
    <th scope="col">2e klas</th>
    <th scope="col">1e klas</th>
  </tr>
  <tr>
    <th scope="row">Enkele reis</th>
    <td>8,00</td>
    <td>12,40</td>
  </tr>
  <tr>
    <th scope="row">Retour</th>
    <td>14,10</td>
    <td>21,90</td>
  </tr>
</table>

Het id- en headers-attribuut gebruiken

Bij een id- en headers-attribuut voorzie je alle rij- en kolomkoppen van id-attributen met unieke waardes. Het headers-attribuut wordt vervolgens toegepast op alle datacellen, en de waarde van het headers-attribuut bestaat uit een door spaties gescheiden lijst van verwijzingen naar alle id's van de koppen die van toepassing zijn op een datacel.

In het voorbeeld hieronder zijn de tabelcellen 'Enkele reis' en 'Retour' rijkoppen. Zij krijgen een id-attribuut met elk een unieke waarde. De tabelcellen '2e klas' en '1e klas' zijn kolomkoppen en hebben ook een id- attribuut met unieke waarde gekregen. De datacellen met de prijzen van de treinreis hebben allemaal een headers-attribuut gekregen met waardes die identiek zijn aan de id-waardes van de bijbehorende rij- en kolomkoppen. Een screenreader kan nu bij het voorlezen van de datacel '12,40' de bijbehorende koppen 'Enkele reis' (id="r1") en '1e klas (id="k1") ook voorlezen.

Voorbeeld tabel

Voorbeeld code bij de tabel

<table>
  <caption>Reiskosten</caption>
  <tr>
    <td></td>
    <th id="k2">2e klas</th>
    <th id="k1">1e klas</th>
  </tr>
  <tr>
    <th id="r1">Enkele reis</th>
    <td headers="r1 k2">8,00</td>
    <td headers="r1 k1">12,40</td>
  </tr>
  <tr>
    <th id="r2">Retour</th>
    <td headers="r2 k2">14,10</td>
    <td headers="r2 k1">21,90</td>
  </tr>
</table>

Uitleg over de tabel geven

Het is mogelijk om extra informatie over de tabel mee te geven. Dit kan via het caption-element, Dit hebben we in voorgaande voorbeelden gebruikt. Er is ook nog zoiets als een summary-attribuut, maar die bestaat niet meer in HTML5.

Het caption-element wordt normaliter visueel weergegeven. Vroeger werd voor uitgebreide uitleg het summary-attribuut gebruikt, maar die was enkel leesbaar met screenreaders. Heb je een complexe tabel probeer daar dan een zinvolle uitleg of beschrijving bij de tabel te plaatsen, die voor iedereen te lezen is.