Tabellen: Toegankelijkheid en tabellen

Een tabel is een handige, maar vaak ook complexe vorm van informatie. Het kost een bezoeker inspanning alle individuele informatie in de tabel in het juiste verband te zien. Voor bezoekers die blind zijn, is het een nog grotere opgave. Zij moeten zich immers een mentaal beeld van de tabel vormen, omdat ze zich deze niet kunnen visualiseren. Webontwikkelaars en contentbeheerders kunnen de toegankelijkheid van tabellen voor deze groep bezoekers vergroten.

Schermleesprogramma’s en brailleleesregels lopen stapsgewijs, van begin tot einde, door een tabel heen. Zonder interventie van de gebruiker draagt een dergelijk programma cel voor cel de inhoud voor. Als het programma kan vaststellen wat de labels zijn voor een kolom of een rij, kunnen deze geassocieerd worden met de individuele cellen.

Gebruikers kunnen ook het programma verzoeken om de inhoud van een specifieke cel. Bijvoorbeeld ‘Het deelnemersaantal van de activiteit Voorlichtingsavond stadsrenovatie.

De belangrijkste start voor het toegankelijk maken is al gedaan: het gebruik van cellen voor informatie (td) en cellen voor labelling (th).

Tabellabels associëren met rijen of kolommen: het scope attribuut

Table header (th) cellen vormen een label voor zowel een rij als een kolom. Visueel is te onderscheiden dat het label geldt voor een kolom óf een rij, maar als de tabel stap voor stap (seriëel) wordt voorgedragen, is dit minder duidelijk. Daarvoor is het scope attribuut bedacht. Dit attribuut op een th cel vertelt het schermleesprogramma of de brailleregel dat het label geassocieerd moet worden met een rij of kolom.

Gebruik het scope attribuut voor het associëren van tabellabels (th cellen) met kolommen of rijen.

Richtlijn R-pd.11.4

Toepassing van het scope attribuut (HTML)

<th scope="col">Activiteit:</th>

Webontwikkelaars en content-beheerders die tabellen met relationele informatie produceren, moeten, waar mogelijk, gebruikmaken van het scope attribuut op tabellabels.

Dit attribuut is ook toe te passen op cellen die meerdere kolommen of rijen beslaan. In dat geval zullen meerdere rijen of kolommen een associatie met het label hebben.

Tabellabels en complexe associaties: het headers attribuut

Meestal zal het gebruik van het scope attribuut voldoende zijn om tabellabels te associëren met kolommen of rijen. Soms is de constructie echter zo complex dat dit attribuut niet langer volstaat. Er kan dan een expliciete relatie tussen specifieke cellen en tabellabels gelegd worden door middel van het headers attribuut en het id attribuut.

Het id attribuut wordt toegepast op de th cel.

Het headers attribuut wordt toegepast op cellen die geassocieerd dienen te worden met de th cel(len). Het headers attribuut bevat één of meerdere waardes – de waardes van de id attributen op de th cellen – gescheiden door spaties.

Voorbeeld van een constructie met het headers attribuut (HTML)

<th id="activiteit">Activiteit:</th>
...
<th id="locatie">Den Haag e.o.:</th>
...
<td headers="activiteit locatie">Informatiedag Europese betrekkingen</td>

Gebruik het header en id attribuut voor het associëren van tabellabels (th cellen) met individuele cellen in complexe tabellen.

Richtlijn R-pd.11.5

Nogmaals, de toepassing van deze techniek is alleen nodig als de webontwikkelaar of contentbeheerder niet voldoende heeft aan het scope attribuut. Het gebruik van headers en id attributen voor het leggen van expliciete associaties is een complexe, veeleisende taak. Vanwege het vele werk leent dit zich niet zo goed voor tabellen waarop regelmatig wijzigingen of aanvullingen worden gedaan.

Het scope attribuut kan, desgewenst, worden toegepast in combinatie met het headers en id attribuut.

Tabellabels afkorten

Soms kunnen tabellabels vrij lang worden, zoals “Werkzaamheden in de Randstad en omstreken”. Het kan voor een gebruiker verwarrend of irriterend werken als dit label door het schermleesprogramma of brailleregel wordt voorgedragen voor elke cel die hiermee wordt geassocieerd. th cellen kunnen het abbr attribuut meekrijgen waaraan een afgekorte versie van het label kan worden meegeven.

Geef afkortingen voor tabellabels (th cellen) via het abbr (abbreviation) attribuut wanneer de lengte van de inhoud van het tabellabel zodanig van lengte is dat herhaling in een spraakbrowser irritatie kan wekken.

Richtlijn R-pd.11.6

Voorbeeld van het abbr attribuut op een th cel (HTML)

<th abbr="Werkzaamheden Randstad">Werkzaamheden in de Randstad en omstreken</th>

De inhoud van tabellen samenvatten

Voor niet-blinde gebruikers is gemakkelijk snel te zien waar een tabel over gaat. Dit geldt niet voor blinde gebruikers. Via het summary attribuut op de <table> tag, is het mogelijk blinde gebruikers (maar ook zoek-spiders) te voorzien van een korte beschrijving van een tabel.

Het summary attribuut (HTML)

<table summary="Een agenda van de internationale activiteiten van gemeente Den Haag voor de komende 6 maanden">

Tabellen en titels

Niet elke tabel heeft een samenvatting nodig. Een goede kopregel boven een tabel kan net zo beschrijvend zijn, zowel voor blinden als niet-blinden. Hiervoor is een heading element te gebruiken (h1 tot en met h6), maar er is ook een element dat speciaal voor tabellen is gemaakt: het caption element. Plaats caption markup altijd gelijk na de <table> tag.

Het caption element, direct na de <table> tag (HTML)

<table>
  <caption>Agenda internationale activiteiten</caption>
  <tr>
  ...

Gebruik het caption element of heading markup voor het geven van een koptekst boven een tabel.

Richtlijn R-pd.11.7

(uitleg)


 Webrichtlijnen versie 1.3, november 2007.