brandnewbox.co.uk

The idea of 'skip navigation' links is to allow users to jump quickly over repetitive site header and navigation, and straight to the main content of the page. This can be especially useful for non-graphical browsers such as Lynx or screen readers.

The following HTML and CSS provides a method to do this. Features are:

• The link is initially hidden from CSS capable browsers
• When a user 'tabs' through links on the page, the 'skip navigation' link will pop up in the top left corner while it has focus.
• An accesskey can be used to jump straight to the link

HTML:

Skip to content

CSS:

a#skip {
 position: absolute;
 top: 5px;
 left: 5px;
 padding: 5px;
 font-size: 12px;
 width: 0;
 height: 0;
 overflow: hidden;
 }
a#skip:focus, a#skip:active {
 width: 12em;
 height: auto;
 overflow: visible;
        background: white;
        z-index: 99;
}

Comments

There are no comments yet.