W3C ijkpunt 5.2 Gebruik voor datatabellen met twee of meer logische niveaus van rij- of kolomheaders opmaak om data- en headercellen te associëren

Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.

Beschrijving

Voor een gebruiker die afhankelijk is van een schermleesprogramma of brailleleesregel is het lastig om na te gaan in welke rij en kolom een bepaalde cel zich bevindt. Deze gebruiker heeft namelijk geen overzicht van de gehele tabel, maar heeft slechts toegang tot de inhoud van één of enkele cellen. Wanneer de juiste code wordt gebruikt voor het aanmaken van tabellen, kan bij elke datacel de bijbehorende rij- of kolomkop gepresenteerd worden.

De tabellen die onder W3C IJkpunt 5.2 vallen hebben twee of meer logische niveaus voor de rij- of kolomkoppen.

Voor de associatie van de datacellen met de rij- en kolomkoppen kan gebruik worden gemaakt van headers-attributen of scope-attributen. Het headers-attribuut dient te verwijzen naar de id's van alle headercellen die geassocieerd moeten worden met de betreffende cel. Het scope-attribuut geeft daarentegen aan welk bereik van cellen (een rij of een kolom) met de betreffende header geassocieerd dient te worden. Het headers-attribuut kost meer inspanning, maar kan in elke situatie gebruikt worden. Het scope-attribuut is eenvoudiger in gebruik, maar wordt alleen aangeraden voor eenvoudige tabellen met duidelijke rijen en kolommen.

Relevante Webrichtlijnen: (zie ook W3C toegankelijkheids ijkpunt 5.1) 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,

Voordelen

• Mensen die websites voor laten lezen via bijvoorbeeld mobiele telefoon of spraakprogramma's. De relatie van een datacel met meerdere niveaus van rij- of kolomkoppen kan goed worden omgezet naar spraak zodat ook ingewikkelde datatabellen begrijpelijk worden voorgelezen.
• Blinden, slechtzienden en mensen met een verstandelijke handicap hebben het meest voordeel van deze richtlijn. Door de juiste broncode te gebruiken in datatabellen worden de informatie en de structuur gescheiden van de presentatie. Het scheiden van informatie en structuur van presentatie maakt het mogelijk om informatie op alternatieve manieren te presenteren zonder verlies van informatie of structuur.

Criteria voor toetsing

• In datatabellen met een structurele onderverdeling van de informatie onder de rijen en kolommen is de juiste markup gebruikt om die onderverdelingen aan te geven.

Voorbeeld

De tabellen die onder W3C IJkpunt 5.2 vallen hebben twee of meer logische niveaus voor de rij- of kolomkoppen. Hieronder staat een voorbeeld waar in de prijsinformatie tabel van een treinkaartje ook de prijzen staan voor de 2de en 1ste klas. Voor beide klassen is er nog een extra onderverdeling (niveau) voor vol tarief en reductie. Met name voor deze complexe datatabellen is het belangrijk om de data expliciet met alle bijbehorende rij- en kolomkoppen te associëren.

Vraag de broncode van deze pagina op om de code van bovenstaande tabel te zien. Hulpapparatuur zou de informatie uit de tabel hierboven als volgt kunnen presenteren:

2de klas vol tarief enkele reis
8,00

In dit geval wordt dus zowel de kolomkop informatie van het eerste niveau getoond (2e klas) als de informatie van het tweede niveau (vol tarief). Afhankelijk van de software kan ook de bijbehorende rij informatie worden weergegeven.

Oplossing

Om de mogelijkheden van hulpapparatuur maximaal te benutten dient met de juiste code de associatie tussen de data- en headercellen gelegd te worden. Om dat te bereiken kunnen headers- en/of scope-attributen gebruikt worden.

Gebruik van headers-attributen:

Gebruik <th>-tags om de rij- en de kolomkoppen aan te geven en geef elke kop een unieke id (uniek binnen de hele pagina!). Het kan handig zijn een combinatie van letter met cijfer te gebruiken, waarbij de letter aangeeft welke soort header het is. In dit voorbeeld is voor de klasse koppen een id gebruikt met de "k" van klasse, voor de tarief soort is de "t" gebruikt en voor de soort kaart de "s". Een goede keuze voor de id's maakt de HTML-code beter leesbaar en kan daarmee eventueel fouten voorkomen.

1. <th id="k2" colspan="2">2e klas</th>

Gebruik <td>-tags om de datacellen te definiëren en gebruik het headers-attribuut om de inhoud van die cel te koppelen aan de bijbehorende rij- en kolomkoppen. In dit voorbeeld ziet het er als volgt uit voor de enkele reis (id="s2") 2e klas (id="k2"), vol tarief (id="t1"):

1. <td headers="s2 k2 t1" align="right">8,00</td>

Gebruik van scope-attributen:

Gebruik <th>-tags om de rij- en de kolomkoppen aan te geven. Geef met behulp van een scope-attribuut aan wat het bereik van de kop is; voor de kolomkoppen is de waarde "col", voor de rijkoppen "row". Dit kun je dus alleen gebruiken als de headercel dient als kop voor alle cellen binnen de opgegeven scope. Als voor een kolomkop met het "colspan"-attribuut aangegeven is dat die kop twee kolommen "omspant", zal die header ook voor beide kolommen gelden. In het bovenstaande voorbeeld zou dat er zo uit kunnen zien:

1. <th scope="col" colspan="2">2e klas</th>

Voor de datacellen gebruik je alleen de <td>-tags.

Je kunt eventueel de "headers"-attributen en "scope"-scope attributen door elkaar gebruiken. Bijvoorbeeld "headers"-attributen voor de asscociatie van de kolomkoppen en "scope"-attributen voor de associatie van de rijkoppen.

Definities

Geen

Verwijzingen

• R-pd.11.3 Groepeer rijen met alleen th (table header) cellen met het thead (table head) element. Groepeer de rest van de tabel met het tbody (table body) element.
• R-pd.11.4 Gebruik het scope attribuut voor het associëren van tabellabels (th cellen) met kolommen of rijen.
• R-pd.11.5 Gebruik het header en id elementen voor het associëren van tabellabels (th cellen) met individuele cellen in complexe tabellen.
• R-pd.2.9 Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.