[Skip navigation] home | about MCU | Services | learn accessible web design | tips archive

contact   
RSS syndication for MCU   

Give visitors your content first (not your navigation)

Does your website use a table to place the navigation bar on the left hand side, and the main content on the right?

If that is how your site is designed, it is no bad thing; visitors will instantly understand this design 'convention' and won't have to waste time trying to figure out how to get around your site.

There is however a problem with this 'standard layout' for people using screen readers. Accessing a website using a screen reader is a 'linear process'; the text that comes first, gets read first - and if the navigation is the first thing on the page - that is what gets read. If your navigation bar contains a lot of links, that can mean a lot of wasted time before a person using a screen reader gets to the content of your page.

I was recently reminded of a very elegant 'table hack' , while reading, 'Building Accessible Websites' by Joe Clark (http://www.joeclark.org/), that can help users get around this problem. Instead of coding your table in the conventional manner as in the example below:

<table>
<tr>
<td>Navigation menu</td>
<td>Page Content</td>
</tr>
</table>

You can use the following rather elegant 'hack' to ensure the content on your page is presented first, and the navigation second:

<table>
<tr>
<td>(put a single pixel gif here)</td>
<td rowspan="2">Page Content</td>
</tr>
<tr>
<td>The navigation menu goes here.</td>
</tr>
</table>

As you can see it uses a 'empty' table cell in the first row which is directly above the navigation bar, and then the content cell is in the right hand cell (the content cell spans both rows).

You might need to study this for a second or two to figure out what is going on, but if my explanation doesn't help, have a look at the following page where it is covered in a little more depth: http://www.apromotionguide.com/tabletrick.html

Register for the weekly MCU accessible web design tip.

Contributed by Jim Byrne
Updated Friday 30 May 2003


Free weekly accessible web design tip

Register for your weekly accessible web design tip 
Email: