Skip to main content

30 steps to a more accessible website

Step 10: Presenting your main content first

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, most websites 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.

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

Further reading

« Step 9: Additional navigation aids | Contents | Step 11: Skipping over navigation links »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1