One of the main advantages of using a purely CSS-based layout is that it is easy to rearrange elements within your HTML source without affecting the visual layout, so that your main content displays while the rest of the page is still loading. However, I am aware that most weblogs still use table-based layouts, so this tip is for you.

If you have a table-based layout with a navigation bar along the left, your navigation bar is being presented to blind users like Marcus and Jackie before your main content. There is no way to describe how much of a problem this is; you have to see it for yourself:

  1. Sample table-based layout.
  2. Modified layout, with content first. These two layouts should look essentially the same in visual browsers, but in Lynx, the difference is obvious.
  3. The original layout, rendered by Lynx.
  4. The modified layout, rendered by Lynx. The main content is displayed first, then the navigation bar.

You do not need to redesign your entire template from scratch to avoid this problem. There is a (relatively) simple technique, affectionately called the “table trick”, that can present your main content first, while still keeping your navigation bar on the left side.

Who benefits?

  1. Marcus benefits. As demonstrated by the examples above, Lynx displays content in the order in which it appears in the HTML source. This means Marcus must scroll through your entire navigation bar every time he visits your page. Scrolling sucks.
  2. Jackie benefits. JAWS, like Lynx, presents content in the order in it appears in the HTML source code, not the order they appear on screen. With JAWS, the problem is even worse, because Jackie must sit through JAWS reading your entire navigation bar before hearing any real content, and there is no sure-fire way to jump straight to the main content. (We’ll talk more about this problem on Monday.)
  3. Google benefits. Google gives more weight to content closer to the top of the page. That’s the top of your HTML source, not the visual top of the page. In fact, most people who know about this technique are in the search engine optimization industry; to them, the accessibility benefits are secondary.

How to do it

View your own site in the Lynx Viewer and see if your daily posts are displayed first, before your navigation bar. The Movable Type default template gets it right; if you use the default template or something based on it, you probably do not need to do anything. But view your site in the Lynx Viewer anyway, because it will give you a deeper understanding of the issues involved.

If you are using one of the default Radio templates, you may need to adjust your tables to put your main content first. There is no specific copy-and-paste way to do this; you will have to dig into your own weblog template and look at the table structure. The sample layout and modified sample layout show the basic technique.

Instead of the obvious table layout:

<table>
<tr>
  <td valign="top" align="left" width="25%">
    ... navigation bar ...
  </td>
  <td valign="top" align="left">
    ... main content ...
  </td>
</tr>
</table>

We do this instead:

<table>
<tr>
  <!-- spacer GIF in upper-left cell -->
  <td><img src="/images/1.gif" width="1" height="1" alt=""></td>
  <!-- main content cell first, with rowspan=2 -->
  <td valign="top" align="left" rowspan="2">
    ... main content ...
  </td>
</tr>
<tr>
  <td valign="top" align="left" width="25%">
    ... navigation bar ...
  </td>
</tr>
</table>

I’ll give you the whole weekend to hack on it.

Further reading

§

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)



§

firehose ‧ code ‧ planet

© 2001–9 Mark Pilgrim