Accessibility - Refactoring HTML: Improving the Design of Existing Web Applications - page 232

data for themselves. Indeed, often the table is really a reference for readers who want to know more, rather
than something intended for everybody to read. A caption is usually a good addition for everyone, not just users
listening to the page with a screen reader.
Mechanics
Neither the caption element nor the summary attribute is required by the XHTML strict DTD. You can search for
<table to find all table elements and then quickly inspect them manually to see whether they need captions or
summaries or both.
Some accessibility tools do notice if these are missing. Tidy will warn you about missing summaries and headers
with this message:
The table summary attribute should be used to describe the table structure. It is very helpful for people
using nonvisual browsers. The scope and headers attributes for table cells are useful for specifying which
headers apply to each table cell, enabling nonvisual browsers to provide a meaningful context for each
cell.
However, human intelligence and effort are required to fill in the values for each additional summary and
caption. There's no easy way around that.
The caption element contains marked-up text more fully describing the table. It can contain inline elements
such as strong or a , but not block elements such as p or div .
The summary attribute contains plain text describing the table. However, the real difference between the two is
that everyone sees the caption text, whereas usually only screen readers will notice the summary attribute.
Because only users with screen readers are likely to read the summary attribute, it's usually the best place to put
the most detailed prose description of the table's contents. The caption typically includes a less descriptive
(though more marked-up) title that describes what's in the table without attempting to repeat the actual data.
If you don't include a caption in the table, you should add a title attribute to the table that serves as a caption
for nonsighted readers. This is in addition to the summary. For example:
<table title="Species Frequency in Prospect Park"
summary="The Pied-billed grebe spends the winter.
The Worm-eating Warbler passes through on migration,
while the Mourning Dove is a year-round resident.">
Of course, some sighted and nonsighted users alike are going to want to drill down into the table, at least some
of the time. To assist with this, you should mark up each header in a th element rather than in a td element.
This element can be used for both row and column headers and may appear anywhere a td element can appear.
Browsers often style the header differently than a regular cell, and if they don't, CSS can. Furthermore, screen
readers can repeat table headers as necessary to keep a listening user from getting lost in the table.
The th element is used for both row and column headers. To indicate which it is, each such element should have
a scope="row" or scope="col" attribute. You can also set scope to rowgroup or colgroup to cover the group to
which the header belongs. Visual browsers don't make much use of the scope attribute, but screen readers do.
In more complicated tables, it may not be possible to cleanly associate each th header with exactly one row or
column. In this case, individual table cells ( td elements) may each have a headers attribute that contains a
whitespace-separated list of the IDs of the headers ( th elements) that apply to that cell. A screen reader can
read the names of the headers before reading the content of each cell.