Skip Main Navigation
Indiana University

Main Content

Web Accessibility Made Easy:
I wish I could SKIP to the good stuff

March 23rd, 2010

This entry in the “Web Accessibility Made Easy” series will discuss something that is easy and quick to implement and can benefit all users. It is Skip Navigation links.

Skip Navigation

Skip Navigation is a same page or anchored link that can either skip past the navigation of a web site or can be used to skip past any content to what would be considered the main content of the page.

A good example of this would be a Yahoo news story like the one in the image below.

Yahoo.com news story on President Obama visiting Iraq

As you can see, there are several navigation links – a link to related stores, some ads, and a lot of other less relevant content – before you actually get to the text of the article. Normally, someone with perfect vision can skip to the text, but someone who is blind would have to navigate through all of that other content just to get to the actual story. This may not seem so bad for one page, but it would get very annoying if you had to view, say, 50 articles for a journalism class. That is where the skip navigation link comes in and allows a screen-reader user to skip right to the content – even if the skip navigation link is hidden using CSS. Many sites leave their skip navigation link visible for all to use, though.

Guideline

IU Web Accessibility Guideline


15. A method shall be provided that permits users to skip repetitive navigation links.

Tutorial

This tutorial will again be using the Bad example web page, Good example web page, their associated style sheets and Dreamweaver. It is a very simple and straight forward tutorial. If you can create a link, you can create a skip navigation link.

  1. Add the link to the named anchor in the content

    <a href=”#content” class=”skipnav”>Skip Navigation</a>

    This step is very similar to creating a standard link. The only difference is that instead of a web address in the href attribute, we use a “#”, combined with an identifier – in this case “content.” This line of code should be one of the first lines after the start of the body. Finally, to hide the skip navigation link from non-screen-reader users, we use the style “skipnav” which is found below. The “:focus” CSS pseudo-class selector allows keyboard-only users to focus on the link. This ensures compliance with other web accessibility guidelines because the visual focus on the web page is never lost.

    a.skipnav, a:hover.skipnav, a:visited.skipnav {
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    overflow:hidden;
    width:1px;
    height:1px;
    }

    a:active.skipnav , a:focus.skipnav {
    position:static !important;
    width:auto;
    height:auto;
    outline: thin dotted black;
    }
  2. Add the named anchor

    <h2 id=”content” class=”skipnav”>Main Content</h2>

    Named anchors are elements on a page that are linked to by a link on the same web page. That is why they are commonly referred to as “same page links.” In this case, to make the named anchor even more accessible, it was made a heading. It was also hidden off the page using the style from the step above. Below is another acceptable way to do a named anchor, this time using the <a> element:

    <a name=”content” class=”skipnav”>Main Content</a>
  3. That is how you do it! The page now has skip navigation. Try it out.

    When the link is clicked, (you may have to remove the style so you can see it) the page should move to the start of the content, not very far for the example page.

Wrap Up

Skip navigation links are a fast and simple way to make navigation for screen reader users and non-screen-reader uses alike easier. You can do multiple skip navigation links if you have multiple frames or multiple areas of content you want to highlight. Just remember that each named anchor needs a unique title, e.g., content and content2.