U bent hier: Home » Usability Update » Een tabel toegankelijk maken in 5 stappen
« vorig artikel  | overzicht UsabilityUpdates |  volgend artikel »

Een tabel toegankelijk maken in 5 stappen

Jaap van de Putte, 2 use it | 12 juni 2011

In het algemeen kun je op het web beter geen tabel gebruiken. Maar als het toch moet, dan kan dit artikel je helpen om de tabel ook toegankelijk te maken. Daarmee wordt de tabel toegankelijk voor mensen die spraak- en/of braille-uitvoer gebruiken. De aanpassingen zijn niet moeilijk, maar enige HTML-kennis is wel nodig. In 5 stappen leg ik hoe je van complexe tabel een toegankelijke tabel kunt maken. Geen zin om uitgebreid te lezen? Bekijk dan alleen de checklist hier direct onder.

Checklist opmaak toegankelijke tabel

Vooraf: Gebruik liever geen tabel. Kijk of een tabel wel echt nodig is.

  1. Splits een grote tabel in meerdere kleine tabellen.
  2. Geef de tabel een kop en een samenvatting. Een kop kan met een heading (h1, h2, h3 enzovoort). Het gebruik van de caption-tag is niet nodig. Plaats onder de titel van de tabel - indien nodig - een samenvatting. Gebruik van het summary-attribuut is niet nodig.
  3. Voeg rij- en kolomkoppen toe met <th>.
  4. Geef het bereik van de kop aan met het scope-attribuut, dus bijvoorbeeld <th scope="col">.
  5. Voorkom het samenvoegen van cellen. Mogelijkheden:
    • Splits de cel op en herhaal de kop in elke cel
    • Combineer de inhoud van meerdere cellen.

Uitgangssituatie

We gaan uit van een bestaande tabel op een website van een waterschap. De tabel ziet er als volgt uit:


Voorbeeld van de tabel die we toegankelijk gaan maken

Het is een complexe tabel, onder andere omdat deze groot is en omdat kolommen zijn samengevoegd. We gaan deze tabel in stapjes omzetten naar een toegankelijke tabel.

Stap 1: Splits tabel

De tabel wordt een stuk eenvoudiger door deze op te splitsen in verschillende tabellen. Van één tabel maken we 5 tabellen. De titel - die nu in een samengevoegde cel staat - plaatsen we boven (en buiten) de tabel.

De eerste tabel ziet er dan zo uit:


Kleine tabel, opgeknipt uit de grote tabel

Stap 2: Geef de tabel goede kop en samenvatting

In veel gevallen is een titel en samenvatting bij een tabel handig. Zo ook bij de tabel uit stap 1.

Een titel op het web is in feite een hele korte samenvatting van de inhoud die er onder staat, in dit geval de inhoud van de tabel. De titel kan als <caption> bij de tabel, maar wij kiezen voor een heading (h2), zodat deze ook wordt meegenomen in de headingslist bij spraak- en brailleuitvoer. Mogelijk is een heading voor zoekmachines ook beter.

De tabel hierboven (bij stap 1) heeft als titel: Gebruikers (ingezetenen). Deze titel vinden wij niet voldoende begrijpelijk. "Ingezetenen" is ons inziens organisatie-jargon en niet een woord dat hoort bij de woordenschat van de gemiddelde bezoeker.

Om direct duidelijk te maken waar de tabel over gaat voegen wij ook een samenvatting toe, direct onder de titel. Let op dat een samenvatting geen inleiding is, maar echt een samenvatting, dus kernachtig de inhoud van de tabel samenvat. Zie de uitwerking hieronder.

Inwoners

Mensen die wonen in het gebied van het waterschap zijn inwoners. Het waterschap noemt hen ook gebruikers of ingezetenen. De tarieven worden berekend per huishouden. Een gezin met 3 kinderen, dat in één huis woont, betaalt dus hetzelfde als een alleenstaand iemand.

Voorbeeld van een titel en samenvatting bij tabel

Stap 3: Voeg rij- en kolomkoppen toe met <th>

Als 3e stap voegen we rij- en kolomkoppen toe. Het is namelijk nodig voor spraak- en braille-uitvoer om aan te geven of de inhoud van een tabelcel een kop bevat of de gegevens.

Bij de tabel bij stap 2 zijn de rij-koppen Verontreinigingsheffing, Zuiveringsheffing, Watersysteemheffing en Wegenheffing.

In de HTML van een tabel wordt voor een cel normaal een <td> (table data) gebruikt. Voor kolom- en rij-koppen moet je daar een <th> (table header) van maken. We maken direct de tekst wat korter: in plaats van "van de WOZ-waarde" maken we "WOZ-waarde".

De code wordt dan voor de 1e rij:

<th>Verontreinigingsheffing</th>

<td>€ 50,25 per vervuilingseenheid</td>

Via de CSS kun je er voor zorgen dat de <th> ook de gewenst opmaak krijgt, bijvoorbeeld vetgedrukt.

Het goede nieuws is dat deze eenvoudige tabel met deze 3 stappen al volledig toegankelijk is. Er zijn slechts 2 kolommen en er zijn geen kolomkoppen nodig. Dat betekent dat deze tabel begrijpelijk is voor mensen met spraak/braille-uitvoer.

Stap 4: Geef het bereik van de kop aan met het scope-attribuut

Als er rij- en kolomkoppen zijn dan is het nodig om bij de <th> ook aan te geven dat de kop betrekking heeft op een rij of een kolom. Dat gebeurt met het scope-attribuut. Hieronder een voorbeeld van een tabel met rij- en kolomkoppen.


Voorbeeld van een tabel met rij- en kolomkoppen

Voor een rij-kop gebruik je:

<th scope="row">

En voor een kolomkop:

<th scope="col">

De HTML-code voor de hierboven genoemde tabel wordt dan:

<table>
     <tr>
         <td>&nbsp;</td>
         <th scope="col">Watersysteemheffing</th>
         <th scope="col">Wegenheffing</th>
     </tr><tr>
         <th scope="row">Binnendijks</th>
         <td>0,0327 % WOZ-waarde</td>
         <td>0,0081 % WOZ-waarde</td>
     </tr><tr>
         <th scope="row">Buitendijks</th>
         <td>0,0082 % WOZ-waarde</td>
         <td>0,0081 % WOZ-waarde</td>
     </tr>
</table>

In spraakuitvoer wordt deze tabel nu begrijpelijk opgelezen, bijvoorbeeld:

Binnendijks, Watersysteemheffing, 0,0327 % WOZ-waarde

Ter vergelijking: zonder gebruik van het scope-attribuut werd de tekst achter elkaar voorgelezen:

Binnendijks, 0,0327 % WOZ-waarde, 0,0081 % WOZ-waarde

Stap 5: Splits samengevoegde cellen

Doordat we de oorspronkelijke tabel hebben gesplitst hebben we ook gelijk het probleem van de samengevoegde kolommen opgelost. Stel dat er toch sprake was van samengevoegde rijen en/of kolommen, zoals in het (gefingeerde) voorbeeld hieronder:


Voorbeeld van een complexe tabel met samengevoegde rijen

Je kunt hier code toevoegen die aan spraak- en braille-uitvoer duidelijk moet maken dat het gaat om een samengevoegde rij, maar dat heeft 2 nadelen:

De oplossingen:

Een combinatie van beide oplossingen laten we zien in onderstaande tabel.


Voorbeeld van een tabel zonder samengevoegde rijen

Complexe tabellen

Er zijn tabellen die zo complex zijn dat het meer werk eist om ze goed toegankelijk te krijgen. In dit artikel gaan we hier niet verder op in. In de literatuurlijst hieronder staan webpagina's genoemd die hier wel uitleg over geven.

Aanbevolen en geraadpleegde literatuur

Tabellen, www.webrichtlijnen.nl/aan-de-slag/tabellen 

Creating Accessible Tables, www.webaim.org/techniques/tables/ 

naar begin pagina

Meer weten?

Neem contact met ons op via het contactformulier.

Overzicht alle artikelen