captionElement and the
captionElement and the
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.
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>).
<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: The code is shown below:
<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):
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.
<!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.
<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.
This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.