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

  • Missa Gaia

    Excited for the Missa Gaia concert coming up this weekend (Saturday, 8pm, Salem Covenant Church on East Mountain St. Tickets to the general public…

  • Apple iTunes

    So, Apple has broken its own style guidelines once again with their newest release of iTunes (10). Not only did they change the icon to something…

  • 'Tis the season - Two holiday concerts

    Christmas season is crazy. If you wonder why you haven't seen me much lately, this is part of the reason why: I am performing in two upcoming holiday…

  • 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