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.