Making a basic table accessible.

[bcarl314]

Does your web site have tabular data? If so, you're probably using a table to represent it. Below are a few things that you can add to your mark up to make your table accessible (if its not already).

Consider the following:


<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>j.doe@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>janesmith@example.org</td>
</tr>
</table>


Above is a simple table showing a list of names and email addresses. But it is not accessible. To make this table accessible, we need to add a few things...

1) Caption and summary information
2) Semantic Markup
3) Scope designations

First, we add the caption and summary...


<table summary="This table contains a list of names and email addresses from the company directory">
<caption>Company Directory</caption>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>j.doe@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>janesmith@example.org</td>
</tr>
</table>


Next, we'll change the header row to use a header tag, and seperate that from the body with the thead and tbody tags...


<table summary="This table contains a list of names and email addresses from the company directory">
<caption>Company Directory</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>j.doe@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>janesmith@example.org</td>
</tr>
</tbody>
</table>


Finally, we'll mark the colums and rows using the scope attribute...


<table summary="This table contains a list of names and email addresses from the company directory">
<caption>Company Directory</caption>
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">John</td>
<td>Doe</td>
<td>j.doe@example.com</td>
</tr>
<tr>
<td scope="row">Jane</td>
<td>Smith</td>
<td>janesmith@example.org</td>
</tr>
</tbody>
</table>


That's it. With a few simple steps, we've taken a simple table and made it into an accessible table.

Hope this helps. Post questions if you have them.