Cross Browser, Javascript-less, Skip Navigation Link

Question

In a recent search on best practices for Skip Navigation links, this is the most comprehensive solution I could find: http://www.communis.co.uk/blog/2009-06-02-skip-links-chrome-safari-and-added-wai-aria

What I don't like about this one is that it requires JavaScript on Webkit browsers. Is this really the best solution we have for something seemingly as simple as a skip navigation link?

Have any links or samples that talk about other, "better" solutions?

Answer 1

A good skip link should be alway visible to alert user's to its presence. A good alternative is to use CSS to make the skip link visible when it receives the focus.

Consider this HTML

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

Used with this CSS

#skip a {
position: absolute;
margin-left: -3000px;
width: 1;
height: 1;
overflow: hidden;
}

and

#skip a:focus, #skip a:active {
margin-left: 0px;
width: auto;
height: auto;
}

The link is hidden until it receives the focus. :focus caters for non IE browsers, and :active caters for IE users. A mouse user will never see the link, as there is no :hover used.

update: 03\02\11 Links to some useful articles on skip link implementation and usability

• http://webaim.org/techniques/skipnav/
• http://www.456bereastreet.com/archive/200909/skip_links_need_to_be_at_least_temporarily_visible/
• http://nemesisdesign.net/blog/accessibility/nice-css-skip-links-appearing-focus/

Answer 2

I tend to use

#skip-to-nav, #skip-to-content
{
  position: absolute;
  right: 100%;
}

And I make sure that the #skip-to-nav and #skip-to-content links are in the body element.

Drupal 7 uses:

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

/**
 * The .element-focusable class extends the .element-invisible class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
}

I have tested both with screen readers, and they both seem to work fine for anyone who can't see the screen.

As far as tabbing order goes, I don't worry about a user tabbing to an element they can't see. I probably should, but I find that the vast majority of users don't use the tab key anyway. The ones who do tend to understand more about what's going on anyway, so IMHO it becomes moot.

Edit to add:

After some discussion with @discojoe, I decided I'd look a little closer into what drupal 7 uses for hiding/revealing content, I have updated the code accordingly.