Section 508 (g&h) W3C Guidelines 5.1 &5.2

Welcome to the HiSoftware® Cynthia Says™ Portal
The HiSoftware CynthiaSays portal is a joint Education and Outreach project of HiSoftware, ICDRI, and the Internet Society Disability and Special Needs Chapter.

Read The Accessibility Handbook, a guide to best practices for achieving Web accessibility today! Download Now

This guide is derived from the book Understanding Accessibility, Published by HiSoftware Publishing... The Entire book can be viewed online in accessible HTML Help format.

(g) / 5.1

All Cells in the first row must be column header cells
All Cells in the first column must be row header cells
Tables used for data should have a caption

(h) / 5.2

All column header cells are required to contain the scope attribute
All row header cells are required to contain the scope attribute
All column header cells are required to contain the id attribute
All row header cells are required to contain the id attribute
All data cells are required to contain the headers attribute
All data cells are required to contain the axis attribute
When row grouping elements are used, all rows are required to be grouped

Row and Column Headers shall be identified for data tables
All Data Tables should have a caption
All column & row header cells are required to contain the scope attribute
All DATA cells are required to contain the header attribute
All DATA cells are required to contain the AXIS attribute
When row grouping elements are used, all rows are required to be grouped

1. Row and Column Headers shall be identified for Data Tables
Example one demonstrates how to add headers to rows and columns.

Current HTML – EXAMPLE 1

The current HTML example has not identified row and column headers.

<table border="1" cellpadding="4" cellspacing="0" width="100%">

<tr>

<td width="25%">Time of day</td>

<td width="25%">Food</td>

<td width="25%">Drink</td>

<td width="25%">Time allotted for meal</td>

</tr>

<tr>

<td width="25%">6 am</td>

<td width="25%">Eggs</td>

<td width="25%">Juice</td>

<td width="25%">30 minutes</td>

</tr>

<tr>

<td width="25%">11am</td>

<td width="25%">Sandwich</td>

<td width="25%">Water</td>

<td width="25%">30 minutes</td>

</tr>

</TABLE>

Corrected HTML – EXAMPLE 1
To correct the HTML we add Row and Column headers

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<TR>

<TH width="25%">Time of day</TH>

<TH width="25%">Food</TH>

<TH width="25%">Drink</TH>

<TH width="25%">Time allotted for meal</TH></TR>

<TR>

<TD width="25%">6 am</TD>

<TD width="25%">Eggs</TD>

<TD width="25%">Juice</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<TD width="25%">11am</TD>

<TD width="25%">Sandwich</TD>

<TD width="25%">Water</TD>

<TD width="25%">30 minutes</TD></TR></TABLE>

top

2. All data tables should have a caption
Example two demonstrates how to add a CAPTION to a data table.

Current HTML – EXAMPLE 2

The current HTML is missing the CAPTION element. Remember a CAPTION will be visible on the screen.

<TABLE cellSpacing=0 cellPadding=4 width=”100%” border=1>

<TR>

<TH width=”25%”>Time of day</TH>

<TH width=”25%”>Food</TH>

<TH width=”25%”>Drink</TH>

<TH width=”25%”>Time allotted for meal</TH></TR>

<TR>

<TD width=”25%”>6 am</TD>

<TD width=”25%”>Eggs</TD>

<TD width=”25%”>Juice</TD>

<TD width=”25%”>30 minutes</TD></TR>

<TR>

<TD width=”25%”>11am</TD>

<TD width=”25%”>Sandwich</TD>

<TD width=”25%”>Water</TD>

<TD width=”25%”>30 minutes</TD></TR>

<TR>

<TD width=”25%”>3pm</TD>

<TD width=”25%”>Steak</TD>

<TD width=”25%”>Water</TD>

<TD width=”25%”>1 Hour</TD></TR></TABLE>

Corrected HTML – EXAMPLE 2

The corrected HTML now has the CAPTION added right below the TABLE element.

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<CAPTION>Table about Meals and times allotted for eating</CAPTION>

<TR>

<TH width="25%">Time of day</TH>

<TH width="25%">Food</TH>

<TH width="25%">Drink</TH>

<TH width="25%">Time allotted for meal</TH></TR>

<TR>

<td width="25%">6 am</td>

<TD width="25%">Eggs</TD>

<TD width="25%">Juice</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<td width="25%">11am</td>

<TD width="25%">Sandwich</TD>

<TD width="25%">Water</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<td width="25%">3pm</td>

<TD width="25%">Steak</TD>

<TD width="25%">Water</TD>

<TD width="25%">1 Hour</TD></TR></TABLE>

top

3. All column & row header cells are required to contain the scope attribute

Example three demonstrates how to add the scope attribute.

Current HTML – EXAMPLE 3

The current HTML example does not contain the scope attribute.

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<TR>

<TD width="25%">Time of day</TD>

<TD width="25%">Food</TD>

<TD width="25%">Drink</TD>

<TD width="25%">Time allotted for meal</TD></TR>

<TR>

<TD width="25%">6 am</TD>

<TD width="25%">Eggs</TD>

<TD width="25%">Juice</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<TD width="25%">11am</TD>

<TD width="25%">Sandwich</TD>

<TD width="25%">Water</TD>

<TD width="25%">30 minutes</TD></TR></TABLE>

Corrected HTML – EXAMPLE 3

The HTML is modified and now contains the scope attribute.

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<TR>

<TH scope="col" width="25%">Time of day</TH>

<TH scope="col" width="25%">Food</TH>

<TH scope="col" width="25%">Drink</TH>

<TH scope="col" width="25%">Time allotted for meal</TH></TR>

<TR>

<TD width="25%">6 am</TD>

<TD width="25%">Eggs</TD>

<TD width="25%">Juice</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<TD width="25%">11am</TD>

<TD width="25%">Sandwich</TD>

<TD width="25%">Water</TD>

<TD width="25%">30 minutes</TD></TR></TABLE>

top

4. All DATA cells are required to contain the header attribute

Example four demonstrates the correct use of the header attribute.

Current HTML – EXAMPLE 4

The current HTML example does not contain header attributes.

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<TR>

<TD width="25%">Time of day</TD>

<TD width="25%">Food</TD>

<TD width="25%">Drink</TD>

<TD width="25%">Time allotted for meal</TD></TR>

<TR>

<TD width="25%">6 am</TD>

<TD width="25%">Eggs</TD>

<TD width="25%">Juice</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<TD width="25%">11am</TD>

<TD width="25%">Sandwich</TD>

<TD width="25%">Water</TD>

<TD width="25%">30 minutes</TD></TR></TABLE>

Corrected HTML – EXAMPLE 4

The corrected HTML has the required header attributes.

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<TR>

<TH id="header5" width="25%">Time of day</TH>

<TH id="header6" width="25%">Food</TH>

<TH id="header7" width="25%">Drink</TH>

<TH id="header8" width="25%">Time allotted for meal</TH></TR>

<TR>

<TD headers="header5" width="25%">6 am</TD>

<TD headers="header6" width="25%">Eggs</TD>

<TD headers="header7" width="25%">Juice</TD>

<TD headers="header8" width="25%">30 minutes</TD></TR>

<TR>

<TD headers="header5" width="25%">11am</TD>

<TD headers="header6" width="25%">Sandwich</TD>

<TD headers="header7" width="25%">Water</TD>

<TD headers="header8" width="25%">30 minutes</TD></TR></TABLE>

top

5. All DATA cells are required to contain the AXIS attribute
Example five demonstrates the correct use of the axis attribute.

Current HTML – EXAMPLE 5

The current HTML example does not contain axis attributes.

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<TR>

<TD width="25%">Time of day</TD>

<TD width="25%">Food</TD>

<TD width="25%">Drink</TD>

<TD width="25%">Time allotted for meal</TD></TR>

<TR>

<TD width="25%">6 am</TD>

<TD width="25%">Eggs</TD>

<TD width="25%">Juice</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<TD width="25%">11am</TD>

<TD width="25%">Sandwich</TD>

<TD width="25%">Water</TD>

<TD width="25%">30 minutes</TD></TR></TABLE>

Corrected HTML – EXAMPLE 5

The corrected HTML example contains the axis attributes.

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<TR>

<TH id="header9" width="25%">Time of day</TH>

<TH id="header10" width="25%">Food</TH>

<TH id="header11" width="25%">Drink</TH>

<TH id="header12" width="25%">Time allotted for meal</TH></TR>

<TR>

<TD axis="header9" width="25%">6 am</TD>

<TD axis="header10" width="25%">Eggs</TD>

<TD axis="header11" width="25%">Juice</TD>

<TD axis="header12" width="25%">30 minutes</TD></TR>

<TR>

<TD axis="header9" width="25%">11am</TD>

<TD axis="header10" width="25%">Sandwich</TD>

<TD axis="header11" width="25%">Water</TD>

<TD axis="header12" width="25%">30 minutes</TD></TR></TABLE>

top

6. When row grouping elements are used, all rows are required to be grouped

Example six demonstrates the correct use of row grouping.

Current HTML – EXAMPLE 6

The current HTML example does not use row grouping

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<TR>

<TD width="25%">Time of day</TD>

<TD width="25%">Food</TD>

<TD width="25%">Drink</TD>

<TD width="25%">Time allotted for meal</TD></TR>

<TR>

<TD width="25%">6 am</TD>

<TD width="25%">Eggs</TD>

<TD width="25%">Juice</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<TD width="25%">11am</TD>

<TD width="25%">Sandwich</TD>

<TD width="25%">Water</TD>

<TD width="25%">30 minutes</TD></TR></TABLE>

Corrected HTML – EXAMPLE 6

The corrected HTML example uses row grouping as required.

<TABLE cellSpacing=0 cellPadding=4 width="100%" border=1>

<thead>

<TR>

<TH width="25%">Time of day</TH>

<TH width="25%">Food</TH>

<TH width="25%">Drink</TH>

<TH width="25%">Time allotted for meal</TH></TR>

</thead>

<TBODY>

<TR>

<TD width="25%">6 am</TD>

<TD width="25%">Eggs</TD>

<TD width="25%">Juice</TD>

<TD width="25%">30 minutes</TD></TR>

<TR>

<TD width="25%">11am</TD>

<TD width="25%">Sandwich</TD>

<TD width="25%">Water</TD>

<TD width="25%">30 minutes</TD></TR>

</TBODY>

</TABLE>

top

Printer Friendly Version...

(c) Copyright 2003-2012 HiSoftware Inc. HiSoftware and CynthiaSays are trademarks of HiSoftware Inc. All other individual names and trademarks are the property of their respective owners. Privacy Statement: HiSoftware's CynthiaSays.Com is currently running on the HiSoftware family of Web Servers and conforms to its privacy policy, for more information click on the privacy policy link at the bottom of this page.

The HiSoftware Cynthia Says Portal complies with WCAG 1.0 Priority 1 Guidelines and Section 508 Standards, view our site accessibility statement

HiSoftware CYNTHIASAYS.COM SERVICE TERMS OF USE | PRIVACY POLICY... | SITE HELP | SITE MAP | ADD Cynthia TO YOUR SITE