Skip Navigation
May 23rd, 2009 by Steve | Filed under Web Accessibility 101 series.
There’s a few simple accessibility tips that I’ve been meaning to talk about, some of which I took on to improve the experience on this site. Today’s subject — skip navigation.
What is it?
Quite simply, the skip navigation technique is creating a link on your site that anchors the visitor down to where the actual content on the page begins.
Why is that important?
For people with no disabilities, the ability to get right to the meat of the page and read what’s important is straightforward. Ignore the navigation, ignore whatever else you want — and just find what you need.
Those using screen readers have a different experience. Screen readers read everything from the top down. So when a user is going from page to page, they have to endure listening to all the navigation read first, as well as any other elements such as site search, header imagery, and sub-navigation. You can imagine how tedious this gets for someone just wanting to read what they came to the site for.
Also, those who use the keyboard for navigating a page must tab through all of those elements to advance as well.
In those cases, skip navigation enables one to get right to the content.
How do you do it?
Though there are few header elements on the art of web accessibility, I nonetheless have a “Jump to Content” link at the top.
The coding is quite simple:
<div id=”skipelements”>
<a href=”#maincontent”>Jump to Content</a>
</div>
…
<a name=”maincontent”></a>
Pretty much your standard, old-school anchor link.
There are a couple variances out there. You can make the skip navigation hidden to most users but able to be read by a screen reader. Frankly, the easiest, most straightforward way is to just put it at the very top of your site, in plain sight.
Those without a need for it will just ignore it. It’s not like it’s an eye sore either. Quite honestly, and perhaps in some cases unfairly, when I see skip navigation on a site, it gives me some measure of comfort that the developers at least have some consideration for web accessibility.
Common iterations of the wording are “skip navigation”, “skip to main content”, etcetera.
Like I said, while there are other ways to do this, such as hidden and driven through your stylesheet, I say just display it loud and proud, at the top of your site.
Tags: screen readers, skip navigation
Steve Grobschmidt is a User Experience Lead with over twelve years in the web industry. He is on a mission to ensure that user experience, especially accessibility, is foremost in the creation of great products.
a few points worth mentioning:
- you don’t necessarily need an empty anchor anymore with modern browsers…simply having your first content element (say, a heading) or the actual container for your content with a relevant id is sufficient, e.g. div id=”maincontent”
- screenreader users, and those users with impaired mobility, have better methods for navigating a page at their disposal than simply tabbing from link to link – for instance, heading-based navigation (with AT like JAWS, or even in standard browsers like Opera)
- as laudable as saying that a skip link should always be displayed is, this often simply won’t fly with designers or “management”. a compromise is not to display the link by default (hiding it “off left” via CSS), but making it clearly visible on :focus
additional thought: i see that you have your “jump to content” link visible here, but off to the right. this placement may not be ideal for users of screen magnification, who may expect this sort of thing to the left.
Excellent points all around, Patrick. Thanks for visiting (and sharing them).
I sort of glossed over a good point there, yes — that there aren’t always going to be cases in which you can display skip navigation. When business or aesthetic demands call for it, those other means are going to be necessary.
And good insight about the right alignment of my own skip nav. Since there is no real reason to have it to the right anyway, I’ll move it on over.
i hope the tone of my comments didn’t come across too gruff…it was late at night, and i can often sound curt unintentionally
I didn’t take it that way at all. I appreciate feedback, and you brought up great points.
Be as gruff as you’d like
Note that “skip to content” is much better than “skip navigation” because the target of the link is specified. Also, ARIA now gives another method of navigation.
Great post, Steve. Thanks for clearly explaining why “skip navigation” is important. And thanks for the reminder! I’ve been meaning to add a “skipnav” to my blog for ages. Making it hidden or invisible is where I’m stuck.
what are your thoughts on the 3 skip links at http://nsf.gov, to content, directory, and other navigation. Personally my mind gets twisted around just thinking about these links, skip this for that, or whatever for something, or yet another choice. Just give me headings, I ask. and move the interminable navigation ‘list’ to the bottom or right. There are optimal, sub-optimal, and pessimal arrangements of links, with nsf.gov in the latter category for my uses. sigh.
I usually display them offscreen.
One thing I found interesting is that even though implementing this method us quite straight forward it never hurts getting the users who will find this helpful to give it a road test for you. Seeing your accessibilty aids in action is a real eye opener.
Only wanted to add to Patrick’s great summing up above; in addition to using the :focus attribute to make the link visible, using the :active alongside :focus ensures that IE6\IE7 also work with this method (afaik they ignore the :focus attribute, or at least don’t work with it correctly, but do work with the :active method).
I agree that often designers are unkeen to clutter up pages with additional links, but using the method mentione, of hiding skip links, and only displaying then when they receive the focus, should make everyone happy. Keyboard users can see the link when it becomes visible, and designers have their clean homepage.
@slger
any more than 3 skip links is getting to be counter productive really; skip links are meant to save keypresses! And yes, better design can prevent needing these additional skip links
Thanks to all of you for the great input. Glad to see an older – but always topical – post get some life.
Do any of you have a recommended means for doing the hidden version? I’ve seen a few methods out there — just wondering if any particular one remains the best all-around, both from a clean code and an accessible standpoint.
Check out the Skip to Portal link on http://www.csun.edu – also placed a direct link to portal login in These refinements were in response to diverse user comments during testing and first launch.
Wrote code, it was omitted:
Should read:
also placed a direct link to portal login in div id=”offleft”
Hi Steve,
The way we have coded the skip links on our site (www.abilitynet.org.uk) is shown here on my handy wiki: http://www.wcag2wiki.com/index.php?title=WCAG2_2.4.1#Implementation
The skip link is positioned off screen, using a negative left margin of -600em. When the link receives the focus, the left margin is removed, the link becomes visible.
I didn’t realise this article was from last year when I submitted my previous response
It’s an issue that still needs discussing though, so good it’s being talked about
Thanks for sharing the coding, Joe. Will keep that in reserve the next time I’m doing a design that doesn’t call for visible skip navigation.
And agreed about the issue still bearing discussion — am very glad to see this post resurface thanks to you guys!