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.
|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
tags (Dreamweaver: turn on the Header checkbox in the
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
<tbody> row grouping tags. These tags group
sets of table rows. A table must contain the following, in this order:
- 0 or 1
- 0 or 1
- 0 or more
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.
|North coast||South coast|
|All data in this table is fictional|
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
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.
Accessibility checkers can check the following:
- Whether a table has headers specified.
- Whether the specified headers have
scopeattributes 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.