Making Tables Accessible with ID & Headers
In the ID and Headers method, you first define all the table headers with the
ID tag inside the appropriate <th> or <td> tags. The second step is to add a
header tag within each remaining field in the table, stating which headers apply
and in which order they should be stated. Some of the code is shown
below. All of the text added to make the table accessible is shown in red.
A Complex Schedule (not accessible)
| |
Winter |
Summer |
| |
Morning |
Afternoon |
Morning |
Afternoon |
| Betty |
9-12 |
1-6 |
8-11 |
12-4 |
| Wilma |
9-11 |
12-6 |
7-11 |
12-3 |
| Fred |
10-11 |
12-6 |
9-11 |
12-5 |
Here is the legally accessible version of the table above, as well as the
html code used to create the table. The header and ID tags, which were added to make the
table accessible, are shown in bright red, bold text.
A Complex Schedule With Summary, ID, and Headers
| |
Winter |
Summer |
| |
Morning |
Afternoon |
Morning |
Afternoon |
| Betty |
9-12 |
1-6 |
8-11 |
12-4 |
| Wilma |
9-11 |
12-6 |
7-11 |
12-3 |
| Fred |
10-11 |
12-6 |
9-11 |
12-5 |
<table border="1" width="90%"
summary="Table of winter and summer office schedules
for Betty, Wilma, and Fred. The winter schedules are: Betty 9-12 and 1-6, Wilma
9-11 and 12-6, Fred 10-11 and 12-6.
The summer schedules are: Betty 8-11 and 12-4, Wilma 7-11 and 12-3, Fred 9-11 and
12-5.">
<tr>
<th> </th>
<th colspan="2" id="winter">Winter</th>
<th colspan="2" id="summer">Summer</th>
</tr>
<tr>
<th> </th>
<th id="am1">Morning</th>
<th id="pm1">Afternoon</th>
<th id="am2">Morning</th>
<th id="pm2">Afternoon</th>
</tr>
<tr>
<td id="b">Betty</td>
<td headers="b am1 winter">9-12</td>
<td headers="b pm1 winter">1-6</td>
<td headers="b am2 summer">8-11</td>
<td headers="b pm2 summer">12-4</td>
</tr>
<tr>
<td id="w">Wilma</td>
<td headers="w am1 winter">9-11</td>
<td headers="w pm1 winter">12-6</td>
<td headers="w am2 summer">7-11</td>
<td headers="w pm2 summer">12-3</td>
</tr>
<tr>
<td id="f">Fred</td>
<td headers="f am1 winter">10-11</td>
<td headers="f pm1 winter">12-6</td>
<td headers="f am2 summer">9-11</td>
<td headers="f pm2 summer">12-5</td>
</tr>
</table>
Return to Top |
Web Accessibility home page
|
