Using the caption Element and the summary Attribute

Contact Us or call 1-877-932-8228
Using the caption Element and the summary Attribute

Using the caption Element and the summary Attribute

  • Two techniques help users who cannot visually analyze a web page:
    1. Caption element programmatically associates the title of a table with the table itself.
    2. Summary attribute of the table element is similar to the longdesc attribute for images.
      • Contains a summary of the way the table is laid out, not a summary of the results

If you can see a web page and you come across a data table, you naturally and automatically scan that table to get a quick sense of what the table presents. But some users have difficulty making that analysis, or simply cannot because they listen to the contents of the display rather than look at it. There are two techniques to help those users.

The caption element provides the web developer with a standard way of programmatically associating the title of the table with the table itself. The caption can appear at the top or bottom of the table. Even such a simple label can help orient a user to table content. And having it programmatically attached to the table means that screen readers will announce that as the table is encountered. Table with caption

The simple table above has a caption, "Today's Lunch Menu," which explains the table contents. After hearing this caption, reading the three heading cells and three data cells would make (more) sense.

The following is the code for that table. Note the caption element directly after the table element. To move the caption to the bottom of the table, place the caption element just before the end table tag (</table>).

Code Sample:

AccessibleTables/Demos/Code01.xml
<table border="1" cellpadding="0" >
	<caption>Today's Lunch Menu</caption>
	<tr>
		<th>Salad</th>
		<th>Entree</th>
		<th>Dessert</th>
	</tr>
	<tr>
		<td>Caesar </td>
		<td>Chicken Divan</td>
		<td>Chocolate Mousse</td>
	</tr>
</table>

Because we know how assistive technology reads a table, we also know that this table would be organized better with its headings down a column, like this: Table with headings in first column The code is shown below:

Code Sample:

AccessibleTables/Demos/Code02.xml
<table border="1" cellpadding="3">
	<caption><p>Today's Lunch Menu</p></caption>
	<tbody>
		<tr>
			<th>Salad</th>
			<td>Caesar</td>
		</tr>
		<tr>
			<th>Entree</th>
			<td>Chicken Divan</td>
		</tr>
		<tr>
			<th>Dessert</th>
			<td>Chocolate Mousse</td>
		</tr>
	</tbody>
</table>

Written this way, the lunch menu would read naturally (thanks to Home Page Reader):

Today's Lunch Menu Salad Caesar Entree Chicken Divan Dessert Chocolate Mousse

When a table is more complicated, web authors are encouraged to use the summary attribute of the table element. This, like the longdesc attribute for images, is not represented visually. It is rendered from the HTML code by assistive technology like screen readers and talking browsers.

The summary attribute should contain a summary of the way the table is laid out - not a summary of the results. It should provide an orientation for someone who listens to the table.

Code Sample:

AccessibleTables/Demos/Summary.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table with Summary</title>
</head>

<body>
<table border="1" summary="This table of Oceana Airlines dinner service lists the five dinner courses (column headings) for each class of service, Economy, Business, and First (row headings)" cellpadding="3">
	<caption>Oceana Airlines Dinner Service</caption>
---- C O D E   O M I T T E D ----

Oceana Airlines dinner service

For this Dinner Service table the table element with its summary attribute looks like this.

Code Sample:

AccessibleTables/Demos/Code03.xml
<table border=1
summary="This table of Oceana Airlines dinner service gives
	the five dinner courses (column headings)
	for each class of service, Economy, Business, and First (row headings)">

With that summary, a person who is using a screen reader will have an overview of the table layout before he starts to read it.

Next