Prev Previous Post   Next Post Next
Unread 09-18-2007, 01:44 PM
bcarl314 bcarl314 is offline
Senior Member
Join Date: Aug 2007
Posts: 141
  #1  
Default Making a basic table accessible.

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:

Code:
<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...

Code:
<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...

Code:
<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...

Code:
<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.
Reply With Quote
 


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 04:14 PM.


Powered by vBulletin® Version 3.0.1
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.