Section 508 Review

Section 508 (h)

Tables with multiple logical headers should be correctly marked

Similar Standards

• W3C Web Content Accessibility Guidelines 2.0
  1.3.1 Info and Relationships.
  
  
• W3C Web Content Accessibility Guidelines 1.0
  
  • 5.1 For data tables, identify row and column headers. [Priority 1]
  • 5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. [Priority 1]
  • 5.5 Provide summaries for tables [Priority 3]
  • 5.6 Provide abbreviations for header labels [Priority 3]

Example:

Consider the following table that gives flight information:

Original/Actual Table:

Example:

The table to a screen reader or a text only browser reads or looks like:

Percievd Table:

Flight Number: From: To: Departure: Arrival: BA 3451 Heathrow Nuremberg 19:20 19:50 BA 1254 Luton Alicante 19:40 20:50 LH 331 Heathrow Hamburg 20:00 20:20

Now is it possible to pick a flight from the airport using the table?

Example:

The improved version of the table is as follows

Improved Table:

Example of a more complex table

CSUN Accessibility Toolkit

- Section 508(h) errors/alerts while 'WAVING' your page

After WAVING your webpage the following errors are related to Section 508h

Icon	Title	Description	Recommended Actions
1	Reading order	A new table cell or <div> element begins. The number indicates the reading order.	Ensure that the linearized reading/navigation order matches your intended order and that the order would be logical if all of the layout tables and page elements were linearized.
	Layout table	A table is present that does NOT have any header (<th>) cells.	Ensure that the table is indeed a layout table and that it does not contain tabular data. If it is a layout table, eliminate all header cells (e.g., change <th> to <td>).
	Data table	A table is present and table header cells (<th>) are present.	Ensure that the table is indeed a data table with tabular data, and that it is not used merely for layout. Mark up the header cells appropriately (using <th> elements) and associate the data cells with the proper header cells. Provide an appropriate summary attribute to the table.
	Table header cell	A table header cell (<th>) is present.	Ensure that the cell is actually a header cell for tabular data. If it is not, change the <th> to <td>.
	Row header cell	A table header cell (<th>) is present and has scope="row".	Ensure that the cell is actually a header cell for tabular data and that it is a row header.
	Column header cell	A table header cell (<th>) is present and has scope="col".	Ensure that the cell is actually a header cell for tabular data and that it is a column header.