Section 508 Compliance

HTML Coding Tutorial

Data Table Headers

(g): Row and column headers shall be identified for data tables.
(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.
Explanation: Large tables of data can be difficult to interpret if a person is using a non-visual means of accessing the web. Users of screen readers can easily get "lost" inside a table because it may be impossible to associate a particular cell that a screen reader is reading with the corresponding column headings and row names.
Importance: For instance, assume that a salary table includes the salaries for federal employees by grade and step. Each row in the table may represent a grade scale and each column may represent a step. Thus, finding the salary corresponding to a grade 9, step 5 may involve finding the cell in the ninth row and the fifth column. Without a method to associate the headings with each cell, it is easy to imagine the difficulty a user of assistive technology may encounter with the table.

Bad Examples

1.  Not using column (row) headers for a data table.
Table example with two columns <table border="0">
<tr>
<td><strong>Days</strong></td>
<td><strong>Hours</strong></td>
</tr>
...
</table>
2.  Using column (row) headers for all tables.
Not all HTML tables are the same. There are two distinct types of tables: Data tables and Layout tables. Data tables hold information in specific columns and rows. Layout tables are solely used to control the web site's appearance. Headers should be included in Layout tables because there is no information displayed.

Good Examples

1.  Data tables are not layout tables
Most websites that use tables, use them for the control they can achieve in acquiring a specific layout. In this process, the table should not have any row or column headers. This will only confuse the user viewing the page. Instead, in this specific kind of table, you should use the "summary" tag where you can provide an explanation of the table's function to the user.
2.  Using column (row) headers for a data table.
Table example with two columsn <table border="0">
<tr>
<th>Days</th>
<th>Hours</th>
</tr>
...
</table>
3.  Using column (row) headers, with the scope tag, for a data table.
Table example with three columns and four rows <table border="0">
<tr>
<th scope="col">Item #</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
</tr>
<tr>
<th scope="row">114</th>
...
</table>
As a screen-reader, like JAWS, reads this table, each data cell can be identified by either row or column header. For instance, when reading across row two, JAWS reads the row header:

"Item # 114, Quantity, 8; Price, $.99"

When reading down, JAWS reads the row header for each cell. For instance, when reading column three:

"114, $.99; 115, $1.49; 116, $.49; 117, $4.99"

Row and column headers help insure that data tables can be understood.

Do-It-Yourself Fixes

Complying to items (g) and (h) when using data tables is quite easy. Whenever you wish to express any information in a table, most of the time the first row of the table labels what each column represents. To ensure your users with vision impairments will also understand the column labeling, make sure to use the header tag <th></th> when creating your cell. When labeling each column, include scope="col" to the column header tag. This will ensure that everyone knows what each column represents while viewing the data.

Additionally, each cell in a starting row might also require a label if the consecutive cells in the row express specific information. To ensure everyone understands the table, include scope="row" to the row header tag. This will ensure everyone knows what each item in the row represents while viewing the data.