This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.
Changes are displayed as follows:
HTML 4.01, XHTML 1.x
This technique relates to:
The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The summary
attribute of the table
element makes this information available to people who use screen readers; the information is not displayed visually.
The summary
is useful when the table has a complex structure (for example,
when there are several sets of row or column headers, or when there are multiple groups
of columns or rows). The summary
may also be helpful for simple data tables
that contain many columns or rows of data.
The summary
attribute may be used whether or not the table includes a
caption
element. If both are used, the summary
should not
duplicate the caption
.
Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are
recommended in order to retain the defined semantic meaning of the HTML table
elements and to conform to the coding practice of separating presentation from content.
However, if a layout table is used, then the summary
attribute is not used or
is null. The purpose of a layout table is simply to control the placement of content;
the table itself is “transparent" to the user. A summary
would “break" this
transparency by calling attention to the table. A null summary
(summary=""
) on layout tables is acceptable.
This example shows a bus schedule. The route number and direction are included in
the summary
along with information on how to use the schedule.
Example Code:
<table summary="Schedule for Route 7 going downtown. Service begins
at 4:00 AM and ends at midnight. Intersections are listed in the top row.
Find the intersection closest to your starting point or destination, then read
down that column to find out what time the bus leaves that intersection.">
<tr>
<th scope="col">State & First</th>
<th scope="col">State & Sixth</th>
<th scope="col">State & Fifteenth</th>
<th scope="col">Fifteenth & Morrison</th>
</tr>
<tr>
<td>4:00</td>
<td>4:05</td>
<td>4:11</td>
<td>4:19</td>
</tr>
…
</table>
In this example both a summary
attribute and a caption
element are used. The caption
identifies the bus route. The
summary
helps users who are blind understand how to use the schedule.
Screen readers read the caption
, followed by the
summary
.
Example Code:
<table summary="Intersections are listed in row 1.
Find the intersection closest to your starting point
or destination, then read down that column to find
out what time the bus leaves that intersection.
Service begins at 4:00 AM and ends at midnight.">
<caption>Route 7 Downtown (Weekdays)</caption>
…
</table>
Resources are for information purposes only, no endorsement implied.
HTML 4.01 summary attribute
Check for layout tables: determine whether the content has a relationship with other content in both its column and its row.
If “no," the table is a layout table.
If “yes," the table is a data table.
If the table is a layout table, check that the summary
attribute is
not present or summary
attribute is null.
If the table is a data table and a summary
is present, check that the
summary
attribute describes the table's organization or explains how
to use the table
If both a summary
attribute and a caption
element are present
for this data table, check that the summary
does not duplicate the
caption
.
For layout tables, #2 is true.
For data tables, #3 and #4 are true.