IJkpunt 5.2 - Webrichtlijnen 1

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. De grote vraag is dus wanneer sprake is van twee of meer 'logische niveaus'. Met 'logische niveaus' worden niet het aantal rijen met kolomkoppen bedoeld of het aantal kolommen met rijkoppen. Er kan dan nog steeds sprake zijn van één logisch niveau. Als er één set met data aanwezig is met bijbehorende koppen, spreekt men van één logisch niveau. Er is sprake van meerdere niveau's als meerdere datasets en bijbehorende koppen in een datatabel staan. In bijna alle gevallen is dan sprake van koppen die zelf ook data zijn en weer eigen koppen hebben ("koppen van koppen"). De koppen die zelf ook data zijn, vormen dan de tweede dataset met bijbehorende eigen koppen. Verderop volgen een aantal voorbeelden.

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

Eén logisch niveau

De tabellen die onder W3C IJkpunt 5.2 vallen hebben twee of meer logische niveaus voor de rij- of kolomkoppen. Met 'logische niveaus' worden dus niet het aantal rijen met kolomkoppen bedoeld of het aantal kolommen met rijkoppen. Hieronder volgt een datatabel met treinreis gegevens. Deze tabel bevat slechts één logisch niveau met rij- of kolomheaders. Alhoewel er meerdere rijen en kolommen zijn met koppen is hier toch sprake van slechts één logisch niveau. Er is één set met data aanwezig en ook één set met koppen die bij die data horen. Alleen het aangeven van de rij- en kolomkoppen volstaat dan voor dit ijkpunt en voor ijkpunt 5.1.

De code van bovenstaande tabel ziet er dan als volgt uit.

1. <table cellspacing="0" cellpadding="5" border="1" summary="Overzicht tarieven treinreis Utrecht naar Haarlem. Gebruik de eerste kolom van links om te kiezen of u doordeweeks reist of in het weekend. Gebruik de tweede kolom van links om de soort reis uit te kiezen; een enkele reis, een retour of een weekendretour. Vervolgens is de eerst genoemde prijs, de prijs van een 2de klas kaartje zonder reductie en de prijs genoemd in de cel daarnaast een 2de klas kaartje met reductie. De twee cellen hierna geven hetzelfde aan voor 1ste klas kaartjes.">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in €)</caption>
3. <tr>
4. <td colspan="2" rowspan="2"> </td>
5. <th colspan="2">2e klas</th>
6. <th colspan="2">1e klas</th>
7. </tr>
8. <tr>
9. <th>vol tarief</th>
10. <th>reductie</th>
11. <th>vol tarief</th>
12. <th>reductie</th>
13. </tr>
14. <tr>
15. <th rowspan="2">Doordeweek</th>
16. <th>Enkele reis</th>
17. <td align="right">8,00</td>
18. <td align="right">4,80</td>
19. <td align="right">12,40</td>
20. <td align="right">7,40</td>
21. </tr>
22. <tr>
23. <th>Retour</th>
24. <td align="right">14,10</td>
25. <td align="right">8,40</td>
26. <td align="right">21,90</td>
27. <td align="right">13,10</td>
28. </tr>
29. <tr>
30. <th rowspan="2">Weekend</th>
31. <th>Enkele reis</th>
32. <td align="right">6,00</td>
33. <td align="right">3,80</td>
34. <td align="right">11,40</td>
35. <td align="right">6,40</td>
36. </tr>
37. <tr>
38. <th>Weekendretour</th>
39. <td align="right">12,10</td>
40. <td align="right">7,40</td>
41. <td align="right">19,90</td>
42. <td align="right">11,10</td>
43. </tr>
44. </table>

In bovenstaande tabel zijn de associaties niet expliciet gemaakt. Als bij ieder th element een scope attribuut wordt toegevoegd met bijbehorende waarde, dan zijn de associaties expliciet.

Twee logische niveau's

Er is sprake van meerdere niveau's als meerdere datasets en bijbehorende koppen in een datatabel staan. In bijna alle gevallen is dan sprake van koppen die zelf ook data zijn en weer eigen koppen hebben. De koppen die zelf ook data zijn, vormen dan de tweede dataset met bijbehorende eigen koppen. De tabel hieronder laat dit zien. De eerste dataset bestaat uit de bedragen in euro's. Alle koppen die boven en links van de bedragen staan zijn koppen van deze dataset. De tweede dataset (een soort datatabel binnen een datatabel) bestaat uit de soorten kaarten: "Senior", "Student" en "Overig". De kop die hier bij hoort is "Soort kaart". Omdat de soorten kaarten zowel koppen zijn (voor de bedragen) als zelf ook data, is gekozen voor het td element om aan te geven dat het data is. Doordat een id attribuut gebruikt is en er met het headers attribuut bij de bedragen naar is verwezen fungeert ze ook als koppen.

De code van bovenstaande tabel ziet er dan als volgt uit.

1. <table cellspacing="0" cellpadding="5" border="1" summary="Overzicht van tarieven voor treinreis Utrecht Haarlem">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in €)</caption>
3. <tr>
4. <td style="width: 20%;"> </td>
5. <th id="w1" colspan="2">Weekend</th>
6. <th id="w2" colspan="2">Weekdagen</th>
7. </tr>
8. <tr>
9. <th id="sk1">Soort kaart</th>
10. <th id="k1" style="width: 20%;">1e klas</th>
11. <th id="k2" style="width: 20%;">2e klas</th>
12. <th id="k3" style="width: 20%;">1e klas</th>
13. <th id="k4" style="width: 20%;">2e klas</th>
14. </tr>
15. <tr>
16. <td id="s1" headers="sk1">Senior</td>
17. <td headers="s1 k1 w1" align="right">8,00</td>
18. <td headers="s1 k2 w1" align="right">4,80</td>
19. <td headers="s1 k1 w2" align="right">12,40</td>
20. <td headers="s1 k2 w2" align="right">7,40</td>
21. </tr>
22. <tr>
23. <td id="s2" headers="sk1">Student</td>
24. <td headers="s2 k1 w1" align="right">8,00</td>
25. <td headers="s2 k2 w1" align="right">4,80</td>
26. <td headers="s2 k1 w2" align="right">12,40</td>
27. <td headers="s2 k2 w2" align="right">7,40</td>
28. </tr>
29. <tr>
30. <td id="s3" headers="sk1">Overig</td>
31. <td headers="s3 k1 w1" align="right">10,00</td>
32. <td headers="s3 k2 w1" align="right">6,80</td>
33. <td headers="s3 k1 w2" align="right">14,40</td>
34. <td headers="s3 k2 w2" align="right">9,40</td>
35. </tr>
36. </table>

In bovenstaande tabel is gekozen voor het gebruik van id en headers attributen voor de expliciete associaties. Als het scope attribuut gebruikt wordt ziet de code er als hieronder uit. Merk op dat de scope attributen ook achterwege kunnen blijven, omdat dan impliciete associatie blijft bestaan vanuit de th elementen.

1. <table cellspacing="0" cellpadding="5" border="1" summary="Overzicht van tarieven voor treinreis Utrecht Haarlem">
2. <caption>Prijsoverzicht voor reis van Utrecht Centraal naar Haarlem (prijs in €)</caption>
3. <tr>
4. <td style="width: 20%;"> </td>
5. <th scope="col" colspan="2">Weekend</th>
6. <th scope="col" colspan="2">Weekdagen</th>
7. </tr>
8. <tr>
9. <th id="sk1">Soort kaart</th>
10. <th scope="col" style="width: 20%;">1e klas</th>
11. <th scope="col" style="width: 20%;">2e klas</th>
12. <th scope="col" style="width: 20%;">1e klas</th>
13. <th scope="col" style="width: 20%;">2e klas</th>
14. </tr>
15. <tr>
16. <td scope="row" headers="sk1">Senior</td>
17. <td align="right">8,00</td>
18. <td align="right">4,80</td>
19. <td align="right">12,40</td>
20. <td align="right">7,40</td>
21. </tr>
22. <tr>
23. <td scope="row" headers="sk1">Student</td>
24. <td align="right">8,00</td>
25. <td align="right">4,80</td>
26. <td align="right">12,40</td>
27. <td align="right">7,40</td>
28. </tr>
29. <tr>
30. <td scope="row" headers="sk1">Overig</td>
31. <td align="right">10,00</td>
32. <td align="right">6,80</td>
33. <td align="right">14,40</td>
34. <td align="right">9,40</td>
35. </tr>
36. </table>

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.