You are here:

1. Manual
2. Development
3. Tables
4. Relational information
5. Accessibility

Associating table labels with rows or columns: the scope attribute

Table header (th) cells constitute a label for both a row and a column. Visually, it is possible to discriminate whether the label refers to a column or a row, but this is less clear if the table is presented step-by-step, (serially). This is why the scope attribute was invented. When added to a th cell, this attribute tells the screen reader or Braille display that the label should be associated with a row or a column.

<th scope="col">Activity:</th>

Web developers and content managers who produce tables containing relational information should make use of the scope attribute on table labels whenever possible.

This attribute can also be applied to cells covering several columns or rows. In this case, several rows or columns will be associated with the label.

Table labels and complex associations: the headers attribute

The use of the scope attribute will usually be sufficient for the association of table labels with columns or rows. Sometimes, however, the construction is so complex that this attribute no longer suffice. In this case, an explicit relationship can be stated between specific cells and table labels using the headers attribute and the id attribute.

The id attribute to the th cell.

The headers attribute to cells that are to be associated with the th cell(s). The headers attribute contains one or more values - the values of the id attributes on the th cells - separated by spaces.

<th id="activity">Activity:</th>
...
<th id="location">The Hague and surroundings:</th>
...
<td headers="activity location"
•	 European relations info day
</td>

If so desired, the scope attribute can be combined with the headers and id attribute.

Abbreviating table labels

Sometimes, table labels can become quite long, for instance 'Work in the Randstad conurbation and surrounding area'. This can prove confusing or annoying for a user if the screen reader or Braille display presents this label for every cell associated with it. th cells can be given the abbr attribute, to which an abbreviated version of the label can be annoyance.

<th abbr="Work in the Randstad">
Work in the Randstad conurbation and surrounding area
</th>

Summarising the content of tables

Sighted visitors can see at a glance what a table is about. This is not the case for users who are blind. By means of the summary attribute on the <table> tag, it is possible to provide blind users (and also search spiders) with a brief description of a table.

<table summary="A schedule of the international activities of the municipality of The Hague for the next 6 months">

Tables and titles

Not every table needs a summary. A good heading above a table can be just as descriptive, both for blind and sighted users. A heading element can be used for this (h1 through h6), but there is also an element that has been made specially for tables: the caption element. Always place caption markup immediately after the <table> tag.

<table>
<caption>Schedule of international activities</caption>
<tr>
...