Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.
Het is belangrijk om de juiste (HTML-)tabelopmaak te gebruiken als je gegevens wilt presenteren in tabellen. In deze datatabellen zijn meestal te onderscheiden: een rij met kolomkoppen, een kolom met rijkoppen en de cellen met de gegevens. Een complexe datatabel heeft voor de kolom- en/of rijkoppen nog een extra niveau: een verdere detaillering van de kopinformatie. Bijvoorbeeld de kolomkop inkomsten is verder onderverdeeld in de jaren 2002 en 2003. Zie W3C ijkpunt 5.2 voor de eisen die gesteld worden aan complexe datatabellen.
In de code van datatabellen gebruik je doorgaans <tr>-tags voor de rijen ("tr" staat voor table row) en <td>-tags voor de datacellen ("td" staat voor table data). Om de rij- en kolomkoppen aan te geven moet je <th>-tags ("th" staat voor table header) gebruiken. Door het gebruik van de <th>-tags is de hulpapparatuur beter in staat om de koppen te indentificeren. Het is dan mogelijk om bij de data in een datacel de bijbehorende kopinformatie te presenteren.
Het gebruik van datatabellen maakt je gegevens beter toegankelijk. Gebruik daarom geen inspringingen of style sheets om je gegevens te presenteren. Als je een tabel alleen gebruikt voor de opmaak van je pagina moet je geen <th>-tags gebruiken. Het wordt ook aanbevolen om geen gebruik te maken van tabellen voor de layout van een pagina, maar in plaats daarvan style sheets te gebruiken. Gebruik alleen tabellen om gegevens te presenteren.
Relevante Webrichtlijnen: R-pd.11.1, R-pd.11.2, R-pd.11.3, R-pd.11.4, R-pd.11.5, R-pd.11.6, R-pd.11.7, R-pd.11.8, R-pd.11.9, R-pd.11.10,
In de onderstaande tabel is te zien dat door het gebruik van de juiste HTML-code de data duidelijk weergegeven wordt. Voor de kolomkoppen zijn <th>-tags gebruikt.
| Soort kaart | 2e klas | 1e klas |
|---|---|---|
| Enkele reis | 8,00 | 12,40 |
| Retour | 14,10 | 21,90 |
| Weekendretour | 14,10 | 21,90 |
De gebruikte tabelopmaak maakt het ook voor hulpapparatuur mogelijk om de informatiestructuur weer te geven. Als een bezoeker bijvoorbeeld de cursor van de derde cel in de tweede kolom (retour 2e klas) naar de derde kolom verplaatst zou de uitvoer van de hulpapparatuur er als volgt uit kunnen zien:
1e klas 21,90
Voor de bezoeker is het nu veel duidelijker in welke kolom hij zich bevindt, waardoor de informatie in de datacellen beter begrepen kan worden. Nu is het bijvoorbeeld duidelijk dat 21,90 de prijs is voor een 1e klas retourtje en niet voor een tweede klas retourtje.
De code die in dit voorbeeld gebruikt is:
<table width="50%" cellspacing="0" cellpadding="0"
border="1" summary="Overzicht tarieven treinreis Utrecht naar Haarlem"><caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs
in euro)</caption><tr><th>Soort kaart</th><th>2e klas</th><th>1e klas</th></tr><tr><th>Enkele reis</th><td align="right">8,00</td><td align="right">12,40</td></tr><tr><th>Retour</th><td align="right">14,10</td><td align="right">21,90</td></tr><tr><th>Weekendretour</th><td align="right">14,10</td><td align="right">21,90</td></tr></table>Als in je tabel ook de eerste kolom koppen bevat, dien je natuurlijk ook voor die cellen de <th>-tags te gebruiken zoals in bovenstaand voorbeeld is gedaan. Het summary attribuut wordt aangeraden maar is prioriteit 3.
Soms worden tabellen gebruikt terwijl eigenlijk layout wordt bedoeld zoals vaak in het geval van een lijst van namen van medewerkers met telefoonnummer. Het is dan voldoende om alleen de kolomkoppen van <th> te voorzien:
| Naam | Telefoon |
|---|---|
| Koschinski | 0345-672378 |
| Manchusario | 0345-672379 |
| Panchomanza | 0345-672354 |
| Zarathusch | 0345-672359 |
Hieronder staat de code van de telefoonlijst. Als die door een schermleesprogramma wordt voorgelezen, dan wordt steeds eerst de naam en dan het nummer opgenoemd. Alleen de kolomkoppen zijn voorzien van table headers
<table width="50%" cellspacing="0" cellpadding="0"
border="1" summary="Telefoonlijst medewerkers"><caption>Telefoonlijst geheime afdeling</caption><tr><th>Naam</th><th>Telefoon</th></tr><tr><td>Koschinski</td><td>0345-672378</td></tr><tr><td>Manchusario</td><td>0345-672379</td></tr><tr><td>Panchomanza</td><td>0345-672354</td></tr><tr><td>Zarathusch</td><td>0345-672359</td></tr></table>Een caption is noodzakelijk. de samenvattting en de afkorting voor lange koppen is prioriteit 3. Ze zijn echter wel erg gewenst. Hieronder staat een tabel met alledrie. De code staat verderop.
| Naam van medewerker | Soort koffie | Wel of niet suiker | Gewone melk, koffiemelk of geen melk | Sterk of normaal |
|---|---|---|---|---|
| Ron | Expresso | Niet | Geen | Sterk |
| Eric | Cappucino | Wel | Melk | Normaal |
| Henk | Gewoon | Niet | Geen | Normaal |
Om te voorkomen dat bij iedere cel de lange versie van een kop wordt voorgelezen is het belangrijk om een kolom of rijkop te voorzien van een afkorting. Die wordt dan door de schermlezer software gebruikt om te worden voorgelezen of omgezet naar braille.
<table width="50%" cellspacing="0" cellpadding="0"
border="1" summary="Koffie en thee medewerkers"><caption>Koffierooster</caption><tr><th>Naam van medewerker</th><th abbr="soort">Soort koffie</th><th abbr="suiker">Wel of niet suiker</th><th abbr="melk">Gewone melk, koffiemelk of geen melk</th><th abbr="sterkte">Sterk of normaal</th></tr><tr><th>Ron</th><td>Expresso</td><td>Niet</td><td>Geen</td><td>Sterk</td></tr><tr><th>Eric</th><td>Cappucino</td><td>Wel</td><td>Melk</td><td>Normaal</td></tr><tr><th>Henk</th><td>Gewoon</td><td>Niet</td><td>Geen</td><td>Normaal</td></tr></table>Datatabel (gegevenstabel)
Een tabel waarin gegevensinformatie wordt gestructureerd. De horizontale en/of verticale positie van de informatie geeft betekenis aan de gegevens die in de datatabel wordt weergegeven.
Mogelijkheid 1: Zoek visueel naar datatabellen en controleer de broncode. Controleer of de kolom- en/of rijkoppen zijn voorzien van <th>-tags!
Mogelijkheid 2: Met de Homepage Reader van IBM kunnen tabellen worden getest op goede werking (dit kan natuurlijk ook met bijvoorbeeld JAWS of Supernova.