Plaats een bijschrift of een samenvatting voor een datatabel

Waar gaat deze tabel over? Bezoekers die de tabel zien kunnen zich hier meestal snel een beeld van vormen. Voor bezoekers die de tabel laten voorlezen is het vaak een stuk lastiger. Een bijschrift of een samenvatting helpt deze bezoekers.

Hoe pas ik dit toe?

Met het <caption>-element van HTML kun je een tabel een eigen kop geven. Daarnaast kun je een uitleg geven over hoe de tabel in elkaar zit, als het gaat om een ingewikkelde tabel. Voorheen werd vaak het summary-attribuut van het <table>-element in HTML hiervoor gebruikt. Tegenwoordig wordt dit niet meer aangeraden, omdat alleen gebruikers van hulptechnologie toegang hebben tot de informatie in dit attribuut, en het bovendien in de nieuwe versie van HTML (HTML5) niet meer ondersteund wordt. Je kunt de uitleg wel op andere manieren toevoegen.

Voorbeelden

Een bijschrift toevoegen

Het bijschrift, of de kop van de tabel, geef je aan met het <caption>-element van HTML. Het komt direct na het <table>-element.

<table>
<caption>Maandelijkse uitgaven in 2015</caption>
…
</table>  

Een uitleg toevoegen bij een complexe tabel

Wil je toelichten hoe een complexe tabel in elkaar zit? Vraag je dan eerst af of de tabel niet te complex is. Als een tabel zo ingewikkeld is dat een uitleg van de structuur nodig is, dan kan de tabel misschien beter vereenvoudigd worden.

Wil je toch een uitleg toevoegen, dan kan dat onder andere op de volgende manieren:

Binnen <caption>-element

Een uitleg plaatsen binnen het <caption>-element van de tabel. In onderstaand voorbeeld staat de uitleg in een <span>-element. Dit is niet verplicht maar kan handig zijn om de uitleg een andere vormgeving te geven.

<table>
<caption>Maandelijkse uitgaven in 2015 <br>
<span>In de eerste kolom staat de maand, de overige kolommen bevatten de uitgaven uitgesplitst per categorie.</caption>
…
</table>

Met het aria-describedby-attribuut

Een paragraaf met uitleg koppelen aan de tabel met het aria-describedby-attribuut. let op: aria-attributen worden nog niet door alle hulptechnologie ondersteund.

<p id=”uitleg”>In de eerste kolom staat de maand, de overige kolommen bevatten de uitgaven uitgesplitst per categorie.</p>

<table aria-describedby="uitleg">
<caption>Maandelijkse uitgaven in 2015</caption>
…
</table>

Hoe draagt dit bij aan een betere website?

Door met een bijschrift of uitleg aan te geven waar de tabel over gaat en hoe deze in elkaar zit wordt de tabel toegankelijker voor bezoekers die hulptechnologie gebruiken. Zij kunnen de tabel niet in één keer overzien, en hebben daarom baat bij een korte toelichting.

Bouwer of redacteur?

De redacteur moet zorgen dat tabellen een duidelijke kop hebben en eventueel een extra uitleg van de structuur, als deze erg complex is.

Technische details

Hoort bij