Data Tables

Accessibility Standards Checklist

Requirement

(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.

Reason

When a user views a data table on a Web page, it is easy to see which direction it reads and what rows are associated with certain columns. But, the screen reader will read from left to right. If your table is full of statistics, the screen reader will read off numbers and it will be impossible for a screen reader to decipher the table. So, by marking the headers and the cells, you alert the user which number goes with which field. Please remember that this is for data tables only.

If you use a table for layout, you must either strip the table attribute or provide a summary which explains that the table was used for design purposes only.

Summaries are useful for non-visual readers, and may also describe how the table fits into the context of the current document. Although recommended as a way of summarizing the contents of a table, the "summary" attribute of the <table> tag is not always sufficiently supported by major assistive technology manufacturers.

Examples

Table for Page Design (Layout Table)

If you use a table for design purposes, you must either strip the table or provide an accurate summary. For example, only provide: <table> and nothing more. Or you can provide the necessary features with a summary that states what the table is used for. For example, <table summary="This table is used to layout the right hand column from top to bottom.">. Also, do not provide a th attribute which is a header with a table for design.

Below is an example of a table used for layout. This is not a data table and therefore does not have to follow the guidelines for data tables.

News	Welcome to our Home Page! Here you will find News, Weather, how to Contact Us, and Other Links. Please come back soon!
Weather
Contact Us
Other Links

Row and Column Headers (Data Table)

Name	Test 1	Test 2	Test 3
Joe Sample	95	100	84
Jane Sample	100	100	95

The above data table displays names associated with test scores. To identify row and column headers, typically the <th> and <td> tags would be used. The <th> tags would be used to show the header which includes Name, Test 1, Test 2, and Test 3. The <td> tags would be used for the data which are the actual names and test scores.

<tr>
- <th>Name</th>
- <th>Test 1</th>
- <th>Test 2</th>
- <th>Test 3</th>
</tr>
<tr>
- <td>Joe Sample</td>
- <td>95</td>
- <td>100</td>
- <td>84</td>
</tr>

Markup (Data Table)

The first row of each table should include column headings. Typically, these column headings are inserted in <th> tags. These tags along the top of each column should include the following attribute: scope="col"

<table summary="This table shows the name of the person who tested and his or her score on all three tests.">
<thead>
<tr>
- <th scope="col">Name</th>
- <th scope="col">Test 1</th>
- <th scope="col">Test 2</th>
- <th scope="col">Test 3</th>
</tr>
</thead>

By doing this, the text in that cell becomes the title of that column. Each of the cells in that first column are created by either <th> or <td> tags. Include the following attribute in these cells: scope="row"

<tbody>
<tr>
- <td scope="row">Joe Sample</td>
- <td>95</td>
- <td>100</td>
- <td>84</td>
</tr>
</tbody>

Ids and Headers (Data Table)

Name	Test 1	Test 2	Test 3
Joe Sample	89	93	87
Jane Sample	97	80	91

TH and ID Attribute (Data Table)

Unlike using the "scope" attribute, using the "id" and "headers" attributes requires that every data cell in a table include special attributes for association. Although its usefulness for accessibility may have been diminished as browsers provide support for the "scope" attribute, the "id" and "headers" attributes are still very useful and provide a practical means of providing access in smaller tables. You must start and end all of the column headers with th attribute. This will let a screen reader know that it is a header. Then you must label all of the headers with the id attribute. See below:

<thead>
<tr>
- <th id="name">Name</th>
- <th id="test1">Test 1</th>
- <th id="test2">Test 2</th>
- <th id="test3">Test 3</th>
</tr>
</thead>

The <thead> tags should enclose table rows <tr> that contain header cells <th>. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

Headers Attribute (Data Table)

Once your headers are labeled, you must associate your data with each id with the headers attribute. See below:

<tbody>
<tr>
- <td headers="name" id="name1">Joe Sample</td>
- <td headers="name1 test1">89</td>
- <td headers="name1 test2">93</td>
- <td headers="name1 test3">87</td>
</tr>
</tbody>

The <tbody> tags should enclose table rows that contain body cells <td>, just as the <thead> does above for the header.

If you notice, Joe Sample has an id with it. This is because it is a header which is underneath a header with an id of 'name'. Without the id's and header's attribute, the user would be read the table from left to right and be forced to decipher the table on his or her own. With the attributes, the user will know which column goes with which row and be able to decipher it with ease. So, id's are for the column and row header within a table and headers are for the data in the tables to be associated with the header.

Table Summaries (Data Table)

Your data table must also have a summary with it:

<table summary="This table shows the name of the person who tested and his or her score on all three tests.">

This is read through the assistive technology and informs the user what the data table is about before being read the statistics or information.

Suggestions for testing this on your pages

Opera with tables linearized (data tables)
Lynx text-only browser (data tables)
Pass/Fail Examples