Tables

Tables

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.

Professor Section Course
Dr. Smith 5 Animal Biology
Dr. Kuwata 2 Microbiology

Scope

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.

<table class="normal">
<caption>Schedule of Classes</caption>

<tr>
<th scope="col">Professor</th>
<th scope="col">Section</th>
<th scope="col">Course</th>
</tr>

<tr>
<th scope="row">Dr. Smith</th>
<td>5</td>
<td>Animal Biology</td>
</tr>

<tr>
<th scope="row">Dr. Kuwata</th>
<td>2</td>
<td>Microbiology</td>
</tr>

</table>

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.

Schedule of Classes
  Professor Section Course
Fall Dr. Smith 5 Animal Biology
Dr. Kuwata 2 Microbiology
Winter Dr. Rico 1 Genetics

The markup looks like this:

<table class="normal">
<caption>Schedule of Classes</caption>

<tr>
<td>&nbsp;</td>
<th>Professor</th>
<th>Section</th>
<th id="course">Course</th>
</tr>

<tr>
<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>
</tr>

<tr>
<th>Dr. Kuwata</th>
<td headers="fall kuwata section">2</td>
<td headers="fall kuwata course">Microbiology</td>
</tr>

<tr>
<th id="winter">Winter</th>
<th id="rico">Dr. Rico</th>
<td headers ="winter rico section">1</td>
<td headers="winter rico course">Genetics</td>
</tr>

</table>

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 not work.

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.

 

Summary

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.

Top