Offset Class Jump Links

Posted August 13th, 2006 by Mike Cherim

I have written about these before under the post name Hidden Focal Navigation, but that was back in November of 2005. I have refined my technique and would like to share with you this more semantic method of hiding-by-offset “jump links” or “skip links,” all while they remain “visible” to those who really need them. The who in this case — the beneficiaries — refers to the following user groups.

The Beneficiaries

  • Keyboard users can tappity-tap their way around a page much more effectively.
  • Screen Reader users can bypass those annoying nav menus; they want content.
  • Users without style sheet support won’t have to scroll so darn much.
  • Handheld device users’ and cell phone surfers’ thumbs really appreciate ‘em.
  • Anyone who wants them can have them!

Consider Your Options

Now that I’ve given you some decent reasons for providing skip links in general, I’ll show you how I hide them in plain sight. But, first, to be fair to those with the thinking these links should be put in the open, I offer you the Accessites article, Skip Link Pros and Cons, authored by Gez Lemon and myself. The method I offer is purely for aesthetic reasons, so you should give it some thought before diving in.

Introducing the “Offset Class”

This method is really quite simple and requires very little markup and just a handful of CSS styles to implement. It all starts with the Offset class.

/* CSS */
.offset {
position : absolute;
top : -9000px;
left : -9000px;

That’s it. And guess what? I use that class repeatedly. Using the Offset class to remove other items like helpful instructions, shortcuts, and tools that are not needed by visual browser users might prove beneficial as well. And not just to users with special needs, visual browser users may enjoy a less-cluttered page.

Hiding Offset Class Jump Links

I’ll start with the markup, as should be the case anyway in my opinion. The unordered list is my structure of choice as it is probably the most semantic element to employ for this. I will apply to it the Offset class to send it deep into upperleftville. Like so.


  <ul class="offset">
    <li><a href="#content"> Jump to Content </a></li>
    <li><a href="#navigation"> Jump to Navigation </a></li>
    <li><a href="#footer"> Jump to Footer </a></li>

Please Note: You’ll have to provide page bookmarks or fragment identifiers for these jump links to point to. You know, like adding id="content" to a Div.

Revealing Offset Class Jump Links

By using what I’ve offered so far you are meeting the needs of a large percentage of beneficiary users, but not all. To meet the needs of keyboard users working on visual, CSS-supporting browsers, those jump links need to come into plain view so the user knows where they are and what to do.

Applying the Offset class to the unordered list element, <ul></ul>, as I did in the example above carries with it the other elements within. Namely, the list item, <li></li>, and the anchor element or link , <a href=""></a>. To make this type of hidden jump link come back into view with the keyboard, you have to apply the pseudo element a:focus — and a:active for Internet Explorer — to the link or anchor part of it. The unordered list and its list item(s) can remain off screen. To accomplish this, you’ll want to add the following after the Offset class CSS shown above.

/* Exact CSS used on my Example Page */

ul.offset-ex {
  position : absolute;
  top : -9000px;
  left : -9000px;
  z-index : 9; /* This is needed here to keep the links on top of the masthead */

ul.offset-ex a:focus, ul.offset-ex a:active {
  position : absolute;
  top : 8990px; /* Fiddle and fudge as needed */
  left : 8960px; /* Fiddle and fudge as needed */
  display : block;
  padding : 190px 40px 190px 48px; /* Fiddle and fudge as needed */
  width : 17em; /* Fiddle and fudge as needed */
  z-index : 9;
  font-size : 4em;
  font-weight : bold;
  border : 2px outset #000;
  background-color : yellow;

ul.offset-ex a:active {
 top : 9000px; /* Fiddle and fudge as needed for IE */

Want to see an example? On the following example page the list is placed immediately below the body and before the main page wrapper. Check out this test page, tab onto it using your keyboard. You will hopefully notice a grossly exaggerated example:

Want to see some more examples? Try these pages:

That’s all there is to it. Really quite simple on effective on most devices.

8 Responses to: “Offset Class Jump Links”

  1. Dave Z. responds:
    Posted: August 13th, 2006 at 11:06 am

    Haven’t I seen this somewhere before, Mike. I have a short memory, but it rings a bell somewhere deep within my little brain. :-)

    Very nice technique to enhance a site’s accessibility! Thanks for sharing.

  2. Mike Jolley responds:
    Posted: August 30th, 2006 at 4:24 pm

    Just to say i love the effect, however it wont wont in poor Opera. Perhaps with a little tweaking and using the tab order property it could work? I will try later :)

  3. Mike Jolley responds:
    Posted: August 30th, 2006 at 7:06 pm

    Well ive tinkered (got your email btw) and sadly I couldent make it work.

    Adding tabindex to the links DID actually work with a normal tab (not tab a), and you could tab and press enter to launch the link. I was surprised it did, since tabindex is not supposed to be supported.
    However you cannot see the text/styles for the link-it stays hidden.

    This is because opera overides :focus and :active with its own functions for <a>, and i couldent find a way around it.

    I tried playing with spans inside the link to apply focus to, but no luck. Im gonna call it quits and agree with your last comment :)

  4. Mike Jolley responds:
    Posted: September 7th, 2006 at 9:10 am

    Ive incorperated them in my blog now, since i loved them so much. Hope thats ok, thanks :D

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.