Headings help users skip navigation

Glenda Sims | 14 April 2006

The accessibility standards (WCAG 1.0 13.6, WCAG 2.0 1.3.1, WCAG 2.0 2.4.3 and 508 (o)) tell us to give users a way to identify and skip navigation. Why? To help screenreader users and mobility impaired users quickly skip to the "meat" of the page or to the navigation.

Skip nav link technique

The most frequently used technique is a skip navigation link located at the top of the page that links to an id located at the beginning of the main content.

<a href="#content" title="Skip to content">Skip to content</a>
<div id="nav">
Your navigation is here
</div> 
<div id="content">
Your delicious content is all in here.
</div>

Skip nav heading technique

An emerging method of skipping navigation is a creative use of the <h1> - <h6> tags. If you place a heading tag at the top of your main content, then screenreader users will be able to quickly pull up a list of headings and navigate to your content. Even Opera offers keyboard shortcuts to cycle through the headers in a page.

Additional reading and examples

For a more detailed explanation, refer to Jim Thatcher's article on Skip Navigation. Want to see both of these techniques in action? Head on over to the Web Standards Project and peek under the hood of their home page.

In practice, I use both of these techniques: the original skip navigation link at the very top of the page and well placed headers. And I dream of the day when all browsers offer keyboard shortcuts for quick navigation to headers.

Permanent link | Filed under: Accessibility, Semantics

About the Author

I’m Glenda ‘the goodwitch’ Sims. I’m all about empowering people with information and functionality on the web. I’m passionate about mobile computing and I feel my raison d’etre is to transform museums into meaningful interactive experiences using transparent technology.

Before blogging and mobile computing came into my life, my primary love was accesssibility. And since I’m a forever kind of girl, accessibilty will always be at my core.

I’m currently the self-appointed accessibility goddess at the University of Texas at Austin. I’m also a judge, trainer and advisor for Knowbility, a non-profit that promotes barrier free IT.

Articles by Glenda Sims

11 Comments

| Post a comment | Comments Feed

David : http://climaxdesigns.com

14 April 2006, 16:23 : Permanent link to comment

Nice article, but i guess what always sticks in my craw is why is this neccessary for browser based web sites, very practical on a hand held, but take this site for example the ‘invisible’ skip to only skips the logo art piece.

Is that really neccessary? Surely using well placed headers is a better solution? A screenreader is not going to get ‘stuck’ on that logo and surly not enough to confuse a visually impaired person and if you use an H1 for that logo that should solve that issue. What are your thoughts?
Benjamin Jackson : http://shearstock.com

14 April 2006, 16:48 : Permanent link to comment

How do feel about using absolute positioning to move these accessibility links way off the screen?
This way the links are only visable if stylesheets are disabled.
How accessible is this method?
Andrea Arbogast : http://interllectual.com

14 April 2006, 20:16 : Permanent link to comment

How do feel about using absolute positioning to move these accessibility links way off the screen?

We have actually done just that in this site in several places. For example, all the “Continue Reading” links have the title of the linked article after them, which is moved offscreen with the stylesheet.

This is an accessible way to deal with elements as long as you don’t use display:none to hide them. However, they are then lost to mobility impaired users, so you need to think things through well when you use this method.
Fredrik Wärnsberg : http://

15 April 2006, 04:44 : Permanent link to comment

Wouldn’t a better option be to use different media-types and have display:none; for screen and print, and display: inline or display: block for handheld mediatypes? That’s how Dave Shea does it iirc.
James AkaXakA : http://akaxaka.gameover.com/

15 April 2006, 05:29 : Permanent link to comment

Fredrik: No, as screenreaders might (and some do if I remember correctly) ignore their media-type.

Mobiles are all over the place, so it’s prefered to have a seperate site/version for them anyway.

Dave’s doing it the old way ;)
Jules : http://pen-and-ink.ca

18 April 2006, 04:52 : Permanent link to comment

@David

Regarding your comment, if you use an H1 for that logo that should solve that issue, the problem is that the logo is not the title of the page and therefore, anyone scanning the headings, including Google, will see that the heading is the title of every page (of course, I am not refering to the < title> tag).

H1 should be reserved for the title of the page, not the logo.
Glenda (the goodwitch) Sims : http://glendathegood.com/

18 April 2006, 13:43 : Permanent link to comment

@David – Agreed, a skip nav is only valuable if it has something meaty to skip. When I judge sites for accessibility competitions, the rule I use is this:

Skip to main content. Where appropriate, provide methods for skipping over navigation links (or skip to content ) to get to main content of page. If navigation area follows main content in natural reading order, provide skip to navigation. If fewer than 5 links precede main content then site passes and full points should be awarded.

@Benjamin – I often hide skip navs off screen. But Andrea is right, this only helps people with screenreaders or css turned off.

@Fredrik, James – using the handheld media type is problematic on Windows Mobile devices using Pocket IE. Unfortunatly, Pocket IE (PIE) is a bit too big for it’s britches…and assumes it can use the css designed for the screen media type.
Ben : www.beseku.com

20 April 2006, 05:31 : Permanent link to comment

Surely this is a moot point when you should be considering the layout and stucture of the data when building a page?

As an example, this very site could easily be restructured to allow the primary content, (the article) to start the page, followed by the navigation and footer.

If you are adding any kind of skip link it should be the opposite – skipping to the navigation, so screen readers/mobiles can access the info first but optionally get somewhere else.

Off topic: You really need to redesign this comment area – although there is a lovely preview you only get about four words to a line in the textarea, whcih is very annoying.
Glenda Sims : http://glendathegood.com/

20 April 2006, 05:49 : Permanent link to comment

Ben, the layout you suggest (content before navigation) is certainly an option, but in this wonderfully varied world, I’d never suggest it is the only way to design a site.

When you lead with navigation, a skip to main content is important. However, if you place your nav after your primary content, then a skip to nav is needed (just as you said).

off topic – we’ll take your comment form suggestion into consideration. :-)
Ben : http://www.beseku.com

20 April 2006, 07:46 : Permanent link to comment

”...in this wonderfully varied world, I’d never suggest it is the only way to design a site…”

Aye, that is true – but by this argument why not stick to tables and spacer gifs? If there is a better method of doing things, I would always advocate using that method.
Glenda Sims : http://glendathegood.com

20 April 2006, 12:57 : Permanent link to comment

I think there is quite a difference in comparing table layout vs. css layout…and the position of content before or after nav. The offline conversation you and I have been having clearly indicates to me that you find great value in placing content physically before navigation in the flow of your code (and using css to place your nav where it best fits).
You’ve made a great point that putting nav last leads to better content consumption. Reminds me of people who always want to eat their meat first.

Commenting is closed for this article.