Row and column headers shall be identified for data tables. 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.
Why are these two provisions necessary?
Paragraphs (g) and (h) permit the use of tables, but require that the tables
be coded according to the rules of the markup language being used for creating
tables. Large tables of data can be difficult to interpret if a person is using
a non-visual means of accessing the web. Users of screen readers can easily get
"lost" inside a table because it may be impossible to associate a particular cell
that a screen reader is reading with the corresponding column headings and row names.
Web authors are also required to use one of several methods to provide an association
between a header and its related information.
Table Headers <TH>
One of the first steps in creating accessible tables is by adding header cells.
<TH> would designate the header cells while <TD> designates
the data cells. In the example below, Professor, Section and
Course are the column headers while Dr. Smith and Dr. Kuwata
are the row headers.
|Dr. Smith||5||Animal Biology|
Using the "Scope" attribute in tables is the next step in making accessible
tables. The scope attribute also works with some (but not all) assistive technology
in tables that use "colspan" or "rowspan" attributes in table header or data cells.
Using the Scope Attribute - The first row of each table should include column headings.
<caption>Schedule of Classes</caption>
<th scope="row">Dr. Smith</th>
<th scope="row">Dr. Kuwata</th>
The scope attribute tells the browser and screen reader that everything under
the column is related to the header at the top, and everything to the right of the
row header is related to that header.
Headers and ID attribute
Another way to accomplish the same purpose is to use the headers and id attributes.
This method is NOT recommended for simple tables such as the first example. The
headers and id method should only be used when there is more than one logical level
in a table, and when it is necessary to link more than two headers with a data cell.
If we extend our original example, we can create a table that fits this criterion.
In the table below, data have three headers each, so it is appropriate to use a
more complex technique.
|Fall||Dr. Smith||5||Animal Biology|
The markup looks like this:
<caption>Schedule of Classes</caption>
<th rowspan="2" id="fall">Fall</th>
<th id="smith">Dr. Smith</th>
<td headers="fall smith section">5</td>
<td headers="fall smith course">Animal Biology</td>
<td headers="fall kuwata section">2</td>
<td headers="fall kuwata course">Microbiology</td>
<th id="rico">Dr. Rico</th>
<td headers ="winter rico section">1</td>
<td headers="winter rico course">Genetics</td>
Again, it should be emphasized that this method is more complex. It should be
used with tables of a more complex nature, where the scope attribute will
Another caveat: spanned rows and columns are not handled well by the JAWS screen
reader, which is the most popular brand of screen reader. If at all possible, avoid
complex data tables, or represent the data in a way that is less complex, preferably
with no more than two headings applying to a single data cell.
Although highly recommended by some web designers as a way of summarizing
the contents of a table, the "summary" attribute of the TABLE tag is not sufficiently
supported by major assistive technology manufacturers to warrant recommendation.
Therefore, web developers who are interested in summarizing their tables should
consider placing their descriptions either adjacent to their tables or in the body
of the table, using such tags as the CAPTION tag. In no event should web developers
use summarizing tables as an alternative to making the contents of their tables
compliant as described above.