Terug naar Artikelen

Toegankelijke datatabellen

In dit artikel wordt uitgelegd hoe je toegankelijke datatabellen maakt volgens EN 301 549 (voorheen Webrichtlijnen versie 2).

Inleiding

Als je gestructureerde gegevens (data) op je website wilt plaatsen kun je hier het beste tabellen voor gebruiken. Technieken als het gebruik van tabs om kolommen te maken met de gegevens, of het gebruik van het pre element zijn puur visuele manieren om de gegevens te structureren, maar zijn niet toegankelijk en moeten dus niet gebruikt worden. Als tabellen worden gebruikt, is het nog wel belangrijk dat je dan de juiste HTML tabelopmaak gebruikt, zodat de gegevens in de tabel ook toegankelijk zijn voor bijvoorbeeld mensen die blind zijn.

In dit artikel worden de belangrijkste richtlijnen voor het maken van toegankelijke datatabellen volgens de richtlijnen uit een gezet.

Voor een gebruiker die afhankelijk is van een screenreader of brailleleesregel is het lastig om te begrijpen wat de betekenis is van de informatie in een datacel. De cellen in een datatabel worden namelijk één voor één en los van elkaar voorgelezen. Het is dus lastig om te begrijpen wat bijvoorbeeld de waarde '3,60' in de datacel in rij 3 en kolom 5 betekent. De gebruiker heeft namelijk geen overzicht van de gehele tabel, maar heeft slechts toegang tot de inhoud van deze ene datacel. Wanneer de juiste HTML code wordt gebruikt voor het maken van tabellen, kan bij elke datacel de bijbehorende rij- en/of kolomkop gepresenteerd worden. Met de informatie uit de rij- en/of kolomkop is de betekenis duidelijk van de informatie in de datacel.

Bij het maken van toegankelijke datatabellen zijn de volgende punten belangrijk:

  • datatabellen en layouttabellen;
  • tabelkoppen aangeven;
  • koppen expliciet associëren met datacellen: het scope en id / headers attribuut;
  • extra informatie over de tabel: caption element en summary attribuut.

Datatabellen en layouttabellen

Tabellen worden meestal gebruikt om gestructureerde gegevens weer te geven, maar in sommige gevallen ook om de layout van een webpagina te maken. Binnen de toegankelijkheidsrichtlijnen (WCAG 2.0) is het niet verboden om tabellen voor layout te gebruiken. Als je ze gebruikt, moet je er echter wel op letten dat de volgorde waarin de content wordt gepresenteerd, door bijvoorbeeld een screenreader, het nog steeds mogelijk maakt om de informatie te begrijpen. Een screenreader zal bijvoorbeeld de layouttabel rij voor rij voorlezen. Dit gaat bijvoorbeeld mis als je in de eerste rij een aantal afbeeldingen plaatst en in de volgende rij onderschriften bij de afbeeldingen. De tabel positioneert de onderschriften visueel wel goed, zodat ziende bezoekers de juiste tekst bij de juiste afbeelding kunnen 'lezen'. Een screenreader zal echter eerst alle alternatieve teksten van de afbeeldingen voorlezen en daarna pas alle onderschriften. Het is dan niet meer duidelijk welk onderschrift bij welke afbeelding hoort.

Tabelkoppen aangeven

Tabelcellen kunnen twee soorten informatie bevatten: koppen en data. Dit onderscheid maakt het voor user agents (zoals browsers, maar ook hulpapparatuur en screenreaders) mogelijk om de kopcellen anders te renderen dan de datacellen, zelfs als style sheets ontbreken. Visuele user agents kunnen tekst in kopcellen bijvoorbeeld vetgedrukt weergeven en spraaksoftware kan de tekst in kopcellen met een andere intonatie voorlezen.

Als er rij- en/of kolomkoppen aanwezig zijn in een tabel dan moeten deze met de juiste tabelopmaak worden opgemaakt. Voor datacellen wordt de <td> tag gebruikt (td staat voor table data) en voor de rij- en/of kolomkoppen worden <th> tags (th staat voor table header) gebruikt.

Als een tabel correct wordt opgemaakt met th elementen voor de koppen dan kan een screenreader dit onderscheidt ook maken. Dit wordt ook wel impliciete associatie genoemd. Een screenreader kan namelijk uit zichzelf vanuit een datacel kijken of er in de kolom boven of in de rij voor de datacel ergens één of meerdere rij- en/of kolomkoppen (th elementen) staan. De screenreader kan dan de relatie bepalen en de inhoud van die cel of cellen voorlezen.

Koppen expliciet associëren met datacellen: het scope en id / headers attribuut

Datacellen worden expliciet gekoppeld aan hun bijbehorende koppen door of het scope attribuut of de id en headers attributen. Door middel van deze attributen wordt de associatie expliciet vastgelegd zodat niet visuele user agents altijd de juiste kop informatie bij de datacel kunnen presenteren. Het wordt daarom aangeraden om altijd of het scope of het id en headers attribuut te gebruiken, ook bij eenvoudige datatabellen.

Gebruik van het scope attribuut

Het scope attribuut kan worden toegevoegd aan een rij- of kolomkop. Het scope attribuut geeft aan dat de kop van toepassing is op alle datacellen naast de rijkop of onder de kolomkop. Het scope attribuut kan de waarde 'row' hebben bij een rijkop of 'col' als er sprake is van een kolomkop.

In het geval dat een tabelcel informatie bevat die zowel data bevat alsook een kop is dan wordt het td element met het scope attribuut gebruikt. Het td element geeft aan dat de tabelcel data bevat en het scope attribuut geeft aan dat de informatie in de datacel ook kop informatie is.

Het onderstaande voorbeeld laat zien hoe het scope attribuut gebruikt kan worden bij een eenvoudige datatabel om de datacellen expliciet te associëren met hun bijbehorende koppen. 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".

<table>
<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 onderstaande voorbeeld laat een tabel zien, waarbij tabelcellen informatie bevatten die zowel data zijn als ook kopinformatie geven. In dat geval wordt een td element gebruikt in combinatie met het scope-attribuut. Het gaat hierbij om de rijkoppen 'Enkele reis' en 'Retour', die ook data zijn onder de kolomkop 'Soort kaart'.

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

Gebruik van het id en headers attribuut

Naast het scope attribuut kan ook een id en headers attribuut worden gebruikt. Alle rij- en kolomkoppen worden dan voorzien van id attributen met unieke waardes. Het headers attribuut wordt vervolgens toegepast op alle datacellen en de waarde van het headers attribuut heeft een door spaties gescheiden lijst van verwijzingen naar alle id's van de koppen die van toepassing zijn op een datacel.

Het onderstaande voorbeeld laat zien hoe het id en headers attribuut gebruikt kan worden. De tabelcellen 'Enkele reis' en 'Retour' zijn rijkoppen en krijgen een id attribuut met elk een unieke waarde. De tabelcellen '2e klas' en '1e klas' zijn kolomkoppen en hebben dus 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.

<table>
<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>

Het verschil

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. Het id en headers attribuut gaat uit van een datacel en geeft bij deze datacel aan welke rij- of kolomkoppen van toepassing zijn op de datacel. Het scope attribuut is eenvoudiger in gebruik, en wordt vooral aangeraden voor eenvoudige tabellen met duidelijke rijen en kolommen. Het id en headers attribuut kost meer inspanning, maar kan in elke situatie gebruikt worden.

Extra informatie over de tabel: caption element en summary attribuut

Het is mogelijk om extra informatie over de tabel mee te geven. Dit kan via het caption element en het summary attribuut. Het caption element is bedoeld om een titel te geven aan de tabel. Het summary attribuut is bedoeld om een korte beschrijving te geven van de organisatie van een tabel of een uitleg hoe de tabel te gebruiken. De informatie in het summary attribuut is vooral bedoeld voor mensen die een screenreader gebruiken, daarom wordt de informatie van de summary niet visueel weergegeven (de caption wordt standaard wel weergegeven). Het summary attribuut is handig als een tabel een complexe structuur heeft. Een tabel kan zowel een summary als een caption hebben maar deze mogen niet dezelfde informatie bieden.
Let op: als een tabel gebruikt wordt voor layout zorg er dan voor dat het summary attribuut niet gebruikt wordt, of dat ze leeggelaten wordt (summary="").

De tabel in onderstaand voorbeeld gebruikt het summary attribuut voor de uitleg van de tabelstructuur en het caption element voor de titel van de tabel.

<table summary="In deze tabel wordt het winstoverzicht van Stichting X weergegeven. In de eerste kolom staan de jaartallen, in de tweede kolom het bruto winstpercentage en in de derde kolom de bruto winst modes per maand">
<caption>Winstoverzicht Stichting X</caption> 
<tr>
<th scope="col">Jaar</th>
<th scope="col">Bruto winst</th>
<th scope="col">Modes p/m</th>
</tr>
<tr>
<td scope="row">2013</td>
<td>12%</td>
<td>1.5%</td>
</tr> 
<tr>
<td scope="row">2012</td>
<td>14%</td>
<td>1.9%</td>
</tr> 
</table>

Leer meer over WCAG 2.0 en Webrichtlijnen 2

Meer leren over de WCAG 2.0 en Webrichtlijnen 2.0 (WCAG 2.0 + extra kwaliteitsrichtlijnen)? Dat kan! Onze trainingen met praktijkvoorbeelden leren je meer over deze nieuwe toegankelijkheidsrichtlijnen en bieden ruimte voor je eigen vragen:

We geven ook trainingen, speciaal voor redacteuren:

Bekijk onze trainingen pagina voor een overzicht van al onze trainingen.

  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn