Page 1 of 1 Have you ever been to a web site and noticed a mysterious link at the very top that says "skip navigation" or "skip to main content"? Perhaps not — most web developers don't use skip nav links to improve the accessibility of their pages. This article will explain why you ought to be in the minority of web developers who do include skip nav links in their web pages and how to do it.
Note: This article's purpose is not to convince you why accessibility matters and why you should make your sites accessible — that would be a whole article in and of itself. This article is for those of you who have a general idea of what accessibility means, want to make your sites accessible, and need to learn specific techniques to reach this goal.
Both the U.S. government's Section 508 standards and the W3C's Web Content Accessibility Guidelines 1.0 (WCAG) recommend providing a way for users to skip over groups of links.
Rule § 1194.22 (o) in Section 508 states, "A method shall be provided that permits users to skip repetitive navigation links." Checkpoint 13.6 in WCAG states, "Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group."
Visual users have the ability to scan a document with their eyes to find the information they want. If a user is not looking for links to other pages, she can skip directly to the content of the current page with her eyes and start reading.
Users of screen readers or other assistive devices do not have this scanning ability. The content of a page starts reading out in the order it appears in the source. The user has to listen to the entire header being read, and possibly even a sidebar or two (depending on how you've structured your document), before he can finally get to the content that he came for. Not only is this a frustrating experience on one page, but imagine going through a site page by page and having the experience repeated over and over as you hear the same links read off every time.
The inability to skip links can also be a problem for users with mobility impairments who use the keyboard to navigate instead of a mouse. Imagine you have a form on your page that a user wants to fill out. A keyboard user can't just move their mouse over the first field, click in it, and start typing. Instead, she has to tab through all the links until she finally arrives at the first form field.
What about users who have no impairments at all, but are browsing your site on their cell phones, PDAs, or other small screen devices? Since all the content on your site will now be squished into a narrow area, your header is probably going to be a whole lot taller. The user might have to spend a considerable amount of time scrolling past all that header stuff to finally start seeing your content — and scrolling on such devices is often not an easy matter.
A similar problem can occur on text-only or non-CSS browsers, where content has to be linearized, making it take up far more vertical space on screen and, consequently, forcing the user to spend a lot more time scrolling or paging through your site.
Taken together, all of these users could make up a significant portion of your intended audience. Without a skip nav link, you're making it harder for all of them to get to your content, and making it oh-so-tempting for them to just use the back button to leave and try another site.
Modern web design practices and updates in assistive technologies have taken care of some of this problem. Many web developers use lists to structure their navigation bars, and many screen readers recognize the list as a whole entity and give their users and ability to skip right past it if they wish. For more information on how to style lists to look like navigation bars and menus, read Styling CSS Buttons (Part 1) and Styling CSS Buttons (Part 2) by Stephanie Sullivan.
If you use an h1 element as the first element in your content area, screen reader users can jump directly to your main content by bringing up a list of headings and selecting the first one. Some browsers also offer options for navigating by headings. For instance, Opera lets you move from heading to heading by pressing S to move forward and W to move backward. For more information on marking up text as headings correctly, read Semantic (X)HTML Markup: Headings and Paragraphs.
Using CSS to lay out your design can also allow you to move your content first in the source, so it will be the first thing that is read by a screen reader. To learn more about improving the source order of your pages, read The Theory of CSS Column Design: Source Order by John Gallant and Holly Bergevin.
However, these techniques only go so far. Users of older screen readers may not have the ability to jump past lists or navigate using headings, nor will any of these techniques necessarily help keyboard users or small screen users.
This is where the skip nav link comes in. This is simply a normal link that is placed at the very top of your page and is linked to an anchor further down your page where the content starts. When a user encounters this link, he can follow it to go directly to the content or ignore it if he wants to use the nav bar. In its simplest form, a skip nav link may look like this:
<p><a href="#content">skip to main content</a></p>
<img src="logo.gif" alt="Company XYZ" width="100" height="70" />
<ul>
<li>Long list of links</li>
...
</ul>
<div id="content">
<p>Content</p>
</div>
You can link directly to any element with an id on it. To remain compatible with older browsers such as Netscape 4.x, though, you will need to use an anchor with the name attribute set. If you are marking up your document in XHTML 1.0, you must also set the id attribute, so include both set to the same value. More backwards compatible markup would look like this:
<p><a href="#contentjump">skip
to main content</a></p>
<img src="logo.gif" alt="Company XYZ" width="100" height="70" />
<ul>
<li>Long list of links</li>
...
</ul>
<div id="content">
<a name="contentjump" id="contentjump"></a>
<p>Content</p>
</div>
Notice that I've used a new id for the anchor and changed the href in the skip nav link accordingly. This is because an id can only be used once on a page. I could not have used the id "content" on the anchor if it was already being used by my content div.
The recommended text used for a skip nav link is "skip to main content." This is because many screen reader users are not familiar with the word "navigation" — it's web jargon, after all — so "skip navigation" is ignored by them. "Skip to content" would work, but JAWS, the most popular screen reader, mispronounces content with the emphasis on the second syllable, as in "The sleeping baby looked content." Once again, this does not make sense and is ignored. Adding the word "main," however, makes JAWS recognize content as a noun and pronounce it correctly.
What if you use a source ordered CSS layout with your content first in the source? In this case, you will not need a "skip to main content" link, but you may want to provide a "skip to main navigation" link in case the user wants to go directly there without hearing the content.
Your page might even warrant multiple skip nav links that jump to different areas of the page. For instance, you may have a main navigation bar that the user doesn't want to hear, but she might want to hear the list of recent news articles you include in your left column. So, in addition to the "skip to main content" link, provide a "skip to news articles" link as well. If there is an area of your page that you think users might want to go directly to, it's not a bad idea to provide a link to it. Just remember to not go overboard — there's no point in including a skip nav link area if it includes a frustrating amount of links itself! Four is probably the maximum you want to use.
A good example of multiple skip nav links is Wired. They have three skip links: one to the search box, one to the nav, and one to the content. Here's what it looks like in the source of their page:
<div class="skiplinks">
<strong>Welcome to Wired News.</strong>
Skip
directly to: <a href="#search">Search Box</a>,
<a href="#nav">Section
Navigation</a>,
<a href="#content">Content</a>.
</div>
However, if you look at the page, you don't see these links anywhere! They've been hidden using CSS. In the next article, I'll go over various methods to style your skip nav links to make them hidden from sighted users.
Page 1 of 1 1
Keywords
accessibility, accessible, Section 508, WAI, WCAG, skip nav links, navigation, navigate, anchors, screen readers, screenreaders, assistive technology, small screen devices, cellphones, PDAs
