Writing accessible data tables

Where data is stored in a table, it is important that table headings are correctly identified.

Web Accessibility Initiative Guidelines

This page explains how to meet:

• Guideline 5.1: "For data tables, identify row and column headers."
• Guideline 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.".

Reasons for following these recommendations

If the row and column headers of a table are correctly identified, non-visual browsers are able to interpret the table more usefully. For example, a speech browser could speak the headers that applied to an item of data before the data.

Demonstration table

Room	Location
CG 65	Courtyard Building
ER 156	Elvet Riverside

The example table above could be read as "Room: CG 65, Location: Courtyard Building. Room: ER 156, Location: Elvet Riverside".

There are other possible applications of correctly identifying headers. A specialist program could automatically create graphs from data tables, or place the data in a database to allow faster searching.

How to structure tables of data.

For a simple table, with only one set of headers, it is simply enough to use <th> tags (Dreamweaver: turn on the Header checkbox in the cell properties).

For easier interpretation of the table, you should also set the scope attribute on the header cells. There are four possible values:

• col (the default value). Applies the header to the column.
• row. Applies the header to the row.
• colgroup. Applies the header to the group of columns it is in.
• rowgroup. Applies the header to the group of rows it is in.

Colgroups are defined by placing a series of <colgroup> tags above the table rows (and above the <thead>, but below the <caption> tag if either is used).

Rowgroups are defined by using the <thead>, <tfoot> and <tbody> row grouping tags. These tags group sets of table rows. A table must contain the following, in this order:

1. 0 or 1 <thead>
2. 0 or 1 <tfoot>
3. 0 or more <tbody>

There is no way to define either row or column groupings in Dreamweaver other than manually editing the source in the Code View.

Note that the table footer, counter-intuitively, must appear before the table body. If it is necessary (as opposed to desirable) that it displays after the table body in all browsers, then use of the <tfoot> tag may be less useful.

Complex header example

		North coast		South coast
		Day	Night	Day	Night
All data in this table is fictional
Temperature (Celsius)	Maximum	12	4	16	5
	Minimum	9	1	12	3
Rainfall (mm)		4	0	2	10

Where the table layout is more complicated than can be expressed with the scope attribute, there are more advanced methods to relate headers to data. You can set an id attribute on the header cell, and set a headers attribute on the data cell, containing a space-separated list of the applicable headers' ids. In Dreamweaver, the id attribute can be defined in the tag editor, but code view must be used to edit the headers attribute.

Due to the behaviour of many speech browsers, it is recommended that you adopt a 'belt and braces' approach, and use the 'id and headers' method even if scope alone should be sufficient.

To shorten table reading, table headers can be given the abbr attribute, containing a short version of the header text to accelerate reading.

The second example table contains all of the above methods.

Checking

Accessibility checkers can check the following:

• Whether a table has headers specified.
• Whether the specified headers have scope attributes or similar identification.

Accessibility checkers cannot check:

• Whether a table needs headers. A table used for layout purposes must not have headers specified. (The use of tables for layout does itself have accessibility problems).
• Whether the headers are appropriately associated with the data.

Therefore, you must manually ensure that all headers are appropriately associated with any data.