Hidden 'Skip Navigation' Link

Hidden ‘Skip Navigation’ Link

It is common practice for websites to have a ‘skip navigation’ link at the top of each page. This can be a huge benefit for people using your site with text browsers/screen readers or visitors with poor motor skills.

However, you might not want to display this link for other users. The easiest way to get round this and still keep the link accessible is to hide it off screen using CSS and make it visible when it is brought into focus with the keyboard. By using this method, everybody who needs to can still access the ‘skip navigation’ link.

The link is at the top of the source code for screen reader users and becomes a visible link for people navigating the site by keyboard

Once again, the HTML and CSS are very simple:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Hidden Skip Nav</title>
</head>
<body>
    <div id="header">
        <div id="skip">
        <a href="#container" title="skip to the main content">Skip to Main  Content</a>
        </div>
    </div>
    <ul id="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
    <div id="container"></div>
</body>
</html>

I have assumed a typical layout scenario where you have a #header div at the top of your page. This would normally contain your logo/masthead etc as well as the ‘skip nav’ link.

The link itself points to an element on your page with an id of container i.e. your main content.

CSS

#header {
    position:relative;
}
#skip {
    text-align:right;
}
#skip a, #skip a:hover, #skip a:visited {
    position:absolute;
    right:0;
    top:-500px;
    color:#000;
    width:auto;
    height:auto;
}
#skip a:focus {
    position:static;
}

First, we set the position on the #header div to relative. This means that any absolutely positioned elements inside the #header div will be positioned with respect to the #header div. Don’t worry if you don’t understand this at the moment, it will be the subject of a future post!

The rest is pretty straight forward: the ‘skip nav’ link is hidden from sight until focussed with the keyboard.

For an example, just reload this page and use the Tab key to navigate the page. You should see the ‘skip nav’ link appear in the top right hand corner.

Category: CSS // 2 CommentsOpen my Lovebox

2 Responses to “Hidden ‘Skip Navigation’ Link”

Kit Barker - Dec 16, 2008 at 1:23 pm

Hi Ben – great site!

I’ve found that moving elements off-screen can have a knock-on effect with the positioning of other elements.

The way I handle this is with a simple:

#skip { display: none; }

And you’re done!
ElanMan - Feb 12, 2009 at 9:10 pm

Hey up there Kit!
Just been reading Simply Javascript published by Sitepoint and noticed an almost throw away comment which said that screen readers don’t read content that’s hidden with display:none even when the content is revealed later.
Have you ever heard of that one before?

RSS

ElanMan