Anitra Smith (anitra) wrote,
Anitra Smith
anitra

  • Mood:

The "table hack" for better accessibility

I just found this technique from Joe Clark's book on accessibility. It's so amazingly simple, I wonder why I (and so many other web folks) haven't thought of this before.

If you're still positioning your left navigation bar using a table, it probably looks something like this:

Navigation bar
link
link
link
All my content is here... Lorem ipsum etc.


BUT - that means that anyone who is blind or mobility-impaired will have to slog through your whole navigation bar before they can see your oh-so-compelling content.

I'm sure you knew that already. This is a big reason why I generally advocate putting the navigation last and using absolute positioning to bring it into the right place, as with this site that I built at work. But not everyone wants to do that, especially since tables are much easier to construct, and they work (fairly) predictably across different browsers.

But it IS possible to make a screenreader or tab-index see your content first, even with this type of table layout! How, you may ask? Simply by using a transparent spacer gif and the ROWSPAN attribute. An example is below - I've added borders (and text instead of the spacer) to make it more obvious.


spacer All my content is here... Lorem ipsum etc.
No, I didn't come up with this technique. But I will shamelessly advocate it!
Navigation bar
link
link
link


If you make the spacer small enough (say, 1 pixel high) it will virtually disappear. And now your content appears first in the markup! You can test this by using your mouse to select the text in both tables I've shown.
Tags: accessibility and usability, demo
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 4 comments