Skip Navigation | Accessibility Introduction | What is Accessibility? | Why is Accessibility Important? | W3 Consortium Guidelines | Section 508 Standards | ADA and Disabilities Guidelines | Accessibility Audit | References and Resources | InfoQuest!
Previous: Table Headers | Next: Frames
| Section 508 Standards: Associate All Data Cells With Header Cells |
|---|
Section 508 Standards: Subpart B -- Technical Standards: § 1194.22 Web-based intranet and internet information and applications.
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
This section, which relates to the subsection (g) on table headers, covers more complex data table arrangements. The WCAG rule for this says that when data tables have two or more logical levels of row or column headers, use markup to associate data cells and header cells. For more complex tables, i.e. where tables have structural divisions beyond those implicit in the rows and columns, use appropriate markup to identify those divisions."
The following is another example borrowed from WebAim's. tutorial on tables.
|
Pay Period, Week |
Base Pay | Mileage ($.35 per mile) | Expenses | Total |
|---|---|---|---|---|
|
January 1-14 |
||||
| 1-7 | 400.00 | 25.89 | 45.00 | |
| 8-14 | 450.00 | 65.00 | 62.00 | |
| Subtotal | 950.00 | 90.89 | 197.00 | 1237.89 |
| January 15-31 | ||||
| 15-21 | 360.00 | 102.35 | 30.00 | |
| 22-31 | 425.00 | 67.55 | 42.00 | |
| Subtotal | 785.00 | 169.90 | 72.00 | 1026.90 |
| Totals | 1735.00 | 260.79 | 269.00 | 2264.79 |
The following code for the previous example would render the table visually and provide the extra information needed to understand the information in different presentations
<TABLE BORDER="1" CELLPADDING=2 CELLSPACING=3> <CAPTION>Example 1: Time Card</CAPTION> <THEAD> <TR> <TH width="73"> <P><SPAN ID="t1-r1-l1">Pay Period</SPAN>, <SPAN ID="t1-r1-l2">Week</SPAN></P> </TH> <TH SCOPE="col" width="40">Base Pay</TH> <TH SCOPE="col" width="56">Mileage ($.35 per mile)</TH> <TH SCOPE="col" width="64"><ABBR title="Transportation">Expenses</abbr></TH> <TH SCOPE="col" width="44">Total</TH> </TR> </THEAD> <TBODY> <TR> <TH SCOPE="rowgroup" HEADERS="t1-r1-l1" width="73"> <p>January 1-14</p> </TH> </TR> <TR> <TD SCOPE="row" HEADERS="t1-r1-l2" width="73">1-7</TD> <TD width="40">400.00</TD> <TD width="56">25.89</TD> <TD width="64">45.00</TD> </TR> <TR> <TD SCOPE="row" HEADERS="t1-r1-l2" width="73">8-14</TD> <TD width="40">450.00</TD> <TD width="56">65.00</TD> <TD width="64">62.00</TD> </TR> <TR> <TD SCOPE="row" width="73">Subtotal</TD> <TD width="40">950.00</TD> <TD width="56">90.89</TD> <TD width="64">197.00</TD> <TD width="44">1237.89</TD> </TR> </TBODY> <TBODY> <TR> <TH SCOPE="rowgroup" HEADERS="t1-r1-l1"> <p>January 15-31</p> </TH> </TR> <TR> <TD scope="row" headers="t1-r1-l2" width="73">15-21</TD> <TD width="40">360.00</TD> <TD width="56">102.35</TD> <TD width="64">30.00</TD> </TR> <TR> <TD SCOPE="row" HEADERS="t1-r1-l2" width="73">22-31</TD> <TD width="40">425.00</TD> <TD width="56">67.55</TD> <TD width="64">42.00</TD> </TR> <TR> <TD SCOPE="row" width="73">Subtotal</TD> <TD width="40">785.00</TD> <TD width="56">169.90</TD> <TD width="64">72.00</TD> <TD width="44">1026.90</TD> </TR> </TBODY> <TBODY> <TR> <TH SCOPE="rowgroup" headers="t1-r1-l2" width="73" height="28">Totals</TH> <TD width="40">1735.00</TD> <TD width="56">260.79</TD> <TD width="64">269.00</TD> <TD width="44">2264.79</TD> </TR> </TBODY> </TABLE>
Today, most users of screen-readers would hear this table read as:
Example 1 Time Card Pay Period, Week Base Pay Miles Expenses Total January 1-14 1-7 400.00 25.89 45.00 8-14 450.00 65.00 62.00 Subtotal 950.00 90.89 197.00 1237.89 January 15-31 15-21 360.00 102.35 30.00 22-31 425.00 67.55 42.00 Subtotal 785.00 169.90 72.00 1026.90 Totals 1735.00 260.79 269.00 2264.79
Try reading this out loud to yourself and when you get to the 9th line, try to guess what the meaning of the third value is supposed to be... without looking back at the header information.
Tomorrow's smart browsers or screen-readers will use additional HTML 4.0 markup (TBODY, THEAD, SCOPE, HEADERS, etc.) to "intelligently" decode a table for speech or alternative output. This table might be read as follows:
Example 1:Time Card Pay Period: January 1-14, Date: 1-7, Base Pay: 400.00, Miles: 25.89, Expenses: 45.00 Pay Period: January 1-14, Date: 8-14, Base Pay: 450.00, Miles: 65.00, Expenses: 62.00 Pay Period: January 1-14, Subtotal, Base Pay: 950.00, Miles: 90.89, Expenses: 197.00, Total: 1237.89 Pay Period: January 15-31, Date: 15-21, Base Pay: 360.00, Miles: 102.35, Expenses: 30.00 Pay Period: January 15-31, Date: 22-31, Base Pay: 425.00, Miles: 67.55, Expenses: 42.00 Pay Period: January 15-31, Subtotal, Base Pay: 785.00, Miles: 169.90, Expenses: 72.00 Pay Period: Totals, Base Pay: 1735.00, Miles: 260.79, Expenses: 269.00, Total: 2267.79.00
Previous: Table Headers | Next: Frames
Accessibility Introduction | What is Accessibility? | Why is Accessibility Important? | W3 Consortium Guidelines | Section 508 Standards | ADA and Disabilities Guidelines | Accessibility Audit | References and Resources | InfoQuest!
Copyright 2001 InfoQuest! Information Services
Last updated: September 17, 2001, 2000
Please send any comments to
tbchad@tbchad.com or 503-228-4023.
Terry Brainerd Chadwick
InfoQuest! Information Services
2324 NW Johnson St., Ste.4
Portland, OR 97210-5221