add skip navigation for screen readers/mobility impaired

Here is a patch that applies the skip navigation technique suggested here:

http://www.webaim.org/techniques/css/invisiblecontent/

Which is also mentioned here:

http://groups.drupal.org/node/3205

It appears to me to be the best solution since it's the only method I've found that avoids visibility: hidden and display: none. It should be readable by any screen reader since it is actually rendered on the page and it's also accessible by tabbing past the header for keyboard only users.

One line of HTML is added to the page.tpl.php file right above the primary navigation:

<div id="skip"><a href="#content">Skip to Main Content</a></div>

Here is the CSS that hides the skip link.

#skip a, #skip a:hover, #skip a:visited {
  position:absolute;
  left:0px;
  top:-500px;
  width:1px;
  height:1px;
  overflow:hidden;
 }

#skip a:active, #skip a:focus {
   position:static;
   width:auto;
   height:auto;
}

I've tested it in FF (mac and pc) and ie6 and it seems to work well. Other mac browsers (safari, camino, opera) don't seem to want to tab through the content so I didn't notice any changes. Maybe I'm missing something there. One slight annoyance in ie6 is that once you tab over to the skip link, it leaves the space it made after you tabbed past it. Hardly critical since it would only effect users who are tabbing through content in ie6, but irritating nonetheless. It may be more appropriate to fix in an ie-only css file when/if that is implemented.

Whether this method is used or another, I think its one of the biggest outstanding accessibility issues with the Zen theme, so I'd love to see skip nav implemented in any form.