Beast-Blog.com
Offset Class Jump Links

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.

<!--HTML-->  

  <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>
  </ul> 

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:

Offset Class Jumps Links Example Page

Want to see some more examples? Try these pages:

• Seabeast Theme
• GrayBit.com
• Accessites.org

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

Filed under Access Counts, Do It CSS Style —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

An Offset Content Penalty? »

Hidden Focal Navigation »

Enhancing Accessibility with Offsets, Cautiously »