Tables

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

Headings

If you use a table that has logical headings, the first row should use the <th> tag instead of the <td> tag

The code looks as follows for the first row in the table:

Table Column Headings

You can also use the <th> tag for row headings, assuming that is appropriate.

The code looks as follows for the first row in the table:

Table Row Headings

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.

Table Caption

Video on how to add captions to tables