The Law
Section 508 Part 1194.22 Subpart g states:
Row and column headers shall be identified for data tables.
Cells that are row and column headers in a data table should be identified using special attributes to avoid confusion when screen readers are reading the content.
What to Do
Tables were implemented in HTML to display tabular data; that is, data that lends itself to being in rows and columns like in an excel spreadsheet. While it was common practice a few years ago to use tables to control the layout of a Web page, that practice is frowned upon.
That said, creating accessible tables is not a difficult task if the data is organized in a logical manner.
A screen reader should be able to appropriately identify row and column headers, and read the data in a logical order. Data cells should take up one row so older screen readers can read the content. The table should not contain spanned rows or columns. The TH (instead of TD) and scope attributes are used to define each header.
Other attributes are used such as Caption to display a title above the table and Summary to explain the results of the table.
Implementing Good Table Practices
Table Caption
Table Summary Example
Table Caption Example
< table >
<caption>Title of Table</caption>
|
Headings
If you use a table that has logical headings, the first row should use the <th> tag instead of the <td> tag
Make
|
Model
|
Megapixels
|
Price
|
Canon |
EOS 300D |
6.3 |
$899 |
Nikon |
D70 |
6.0 |
$999 |
Minolta |
DiMAGE A1 |
5.0 |
$699 |
Sony |
F828 |
8.0 |
$999 |
The code looks as follows for the first row in the table:
Table Column Headings
< tr >
< th >Make</ th >
< th >Model</ th >
< th >Megapixels</ th >
< th >Price</ th >
</ tr >
|
You can also use the <th> tag for row headings, assuming that is appropriate.
Make
|
Canon |
Nikon |
Minolta |
Sony |
Model
|
EOS 300D |
D70 |
DiMAGE A1 |
F828 |
Megapixels
|
6.3 |
6.0 |
5.0 |
8.0 |
Price
|
$899 |
$999 |
$699 |
$999 |
The code looks as follows for the first row in the table:
Table Row Headings
< tr >
< th >Model</ th >
< td >EOS 300D</ td >
< td >D70</ td >
< td >DiMAGE A1</ td >
< td >F828</ td >
</ tr >
|
Captions
Tables can also be captioned to help disabled users understand the purpose of the table. Every table should have a caption tag that states the title of the table.
Digital Camera Comparison
Make
|
Model
|
Megapixels
|
Price
|
Canon |
EOS 300D |
6.3 |
$899 |
Nikon |
D70 |
6.0 |
$999 |
Minolta |
DiMAGE A1 |
5.0 |
$699 |
Sony |
F828 |
8.0 |
$999 |
Table Caption
< table >
< caption >
Digital Camera Comparison
</ caption >
< tr > ...
|
Video on how to add captions to tables