avatar

My life as journaled

Because I'm boring like that


Previous Entry Share Next Entry
avatar

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.

  • 1
juldea February 17th, 2005
Very very nice!

Lynx

aleksandyr February 18th, 2005
Anyone who's ever been compelled to use Lynx/Links will appreciate this. Good job.

Re: Lynx

anitra February 18th, 2005
Yeah, I didn't mention that in the post - but this is for any "impaired" visitor to your site, including someone who simply chooses to use Lynx/Links (for whatever reason).

I've been doing a lot of accessibility improvements for my company lately, and checking my work in Lynx. It's impressive just how horrible some of our clients' sites are.

Re: Lynx

anitra February 18th, 2005
By the way.. are you who I think you are *cough*chaos*cough*? Man, I haven't seen you in ages.

  • 1
?

Log in

No account? Create an account