Data Tables
When using data tables it is very important to use accessible tags so
that the user can get the correct information. Data tables should have
both a caption tag and a summary attribute.
The caption tag consists
of a very brief description of the table while the summary attribute
should describe the table and the information the designer wants the
user to get out of the table. Each row should have a table header tag
as well as a scope or id attribute
associated with it. Keep in mind that when a screen reader reads your
table it is
going to read each row from
left to right (See Layout Tables for
more about reading order).
This is important as the content may not make sense when read this way.
Example
| Location | Number of Species | Total |
|---|---|---|
| Garden | 4 | 123 |
| Park | 8 | 616 |
HTML Code for an Accessible Data Table:
<table
width="500" border="1" cellpadding="3" cellspacing="0" summary="This
table shows how many butterflies were seen in a garden and at the park.
There were consistently more butterflies and more species found at
the park.">
<caption>Number and Types of Butterflies Seen in a Week</caption>
<tr>
<th id="header1">Location</th>
<th id="header2">Number of Species</th>
<th id="header3">Total</th>
</tr>
<tr>
<td headers="header1">Garden</td>
<td headers="header2">4</td>
<td headers="header3">123</td>
</tr>
<tr>
<td headers="header1">Park</td>
<td headers="header2">8</td>
<td headers="header3">616</td>
</tr>
</table>
Here is how a screen reader may read the above table:
mp3 (52K) | windows
media (75K)
Transcript of screen reader:
"Caption: Number of Butterflies Seen in Two Locations in August
Summary: This table shows how many butterflies were seen in a garden and at the park. There were consistently more butterflies at the park.
Location: Garden, Number of Species: 4, Total: 123
Location: Park, Number of Species: 8, Total: 616"
Links
Creating Accessible Data
Tables
(http://www.webaim.org/techniques/tables/2)
WAI Table Examples
(http://www.w3.org/WAI/wcag-curric/chk6-0.htm)
