new earth online

Although it seems a little mundane, "Skip to navigation" and "Skip to content" are important for both usability and accessibility purposes.

You may think it's pointless to have either of these, but if you think about users other than yourself you will quickly realise the cases where having them is very useful. For example, from a usability point of view it helps people on mobile devices, especially older ones, as it's a quick way to get to where they want to be on the page. From an accessibility point of view it means a blind user who is listening to the screen reader can choose to skip past all that they don't want to listen to, and go straight to either the navigation or the content depending on which link you add to your site.

The way this works is to add an id to an element on your page that can be used as an anchor. So you may have noticed I have a skip to content link on my site too, the way I've done it is to add an id ofcontent to the wrapper that contains the content. This means I can then have a link at the top of the page that appears in the markup immediately after the title of the page that can be used to jump to the content. The code for this link might look like:

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

Clicking on the link provided by that code will cause the page to jump down to where the content appears making it easy for a blind user to not have to listen to all the navigation options at the top of your page and get to the part that matters.

a#skip {
  display:block;
  position:absolute;
  top:-20px;
  left:0;
  width:100%;
  padding:5px 0 1em 0;
  background:transparent;
  font-weight:bold;
  text-align:center;
}
a#skip:link, a#skip:visited { color:#fff;}
a#skip:hover, a#skip:focus, a#skip:active {
  background:#069 url(../images/skip.gif) no-repeat center bottom;
  top:0;
}

The above styles are what I used to put the link at the top of the page, and for it to be invisible to most users until they hover over the mast. Not everyone likes links like that, but I think the effect looks quite cool.