Skipping over Navigation Links

Providing links that allow the user to skip directly to content, bypassing the navigation, enhances the accessibility of your web. This is recommended for blind or visually impaired users, people who use screen readers, and also for text-browsers, mobile phones and PDAs (Personal Digital Assistants). These links are common on most US, UK, Irish, and other government websites, as well as many universities and private organizations.

From the accessibility and usability point of view, it is recommended that you make such links visible.

Why?

In his article titled “Providing Skip Links,” Frank Gayne of infocentre.frontend.com explains: "Skip links would be useful for people who cannot easily use a mouse. Many of these people depend on tabbing in order to make progress through an interface and might appreciate a skip links feature to lighten the amount of work they have to do. If there is no visible focus to let these people know they have hit a link, then this useful feature is lost to them."

How can you build such links?

Immediately after the logo of your web site, insert the skip link:

<a class="skiplink" href="#startcontent">Skip over navigation</a>

After this is done, do one of the following, depending on the MarkUp Language you are using:

1. If you're using any variant of HTML 4, add this just before your main content:

<a name="content"></a>


2. If you are using any variant of XHTML 1.0, add this just before your main content:

<a name="content" id="content"></a>


3. If you are using XHTML 1.1, add this just before your main content:

<a id="startcontent"></a>
- These variations are necessary to insure that you have valid code.


Does the link have to go after the logo?

Many web sites have the "Skip Navigation" or "Skip to content" links before the logo of the page, but a logo is the precursor of a web page. It lets the user know what website he/she is on. For example, if a "Screen Reader" user clicks an internal link on your page, your logo's alternate text attribute tells the user that he/she has not yet left your website. If the Skip Navigation link is before this logo, then the user does not know immediately which website he/she is on.

In many occasions, web site developers or their clients do not wish to have the “Skip navigation” or “Skip to content” link visible, with the excuse that it does not fit in their design. In this case they might use a technique wrapping the accessibility text or links in an HTML div setting it to display: none or visibility: hidden.

The problem with this technique is that it does not always work as expected. Some screen readers do not speak material that is marked display: none or visibility hidden, and others depend on how the style is specified.


To solve this problem, you could make them invisible with the technique described below.

1. Create a transparent graphic 1X1 pixels, and name it "spacer.gif"

2. At the top of you page add:

<a href="#content" accesskey="1"><img src="spacer.gif" alt="Skip to content - (access key = 1)" width="1" height="1" border="0" /></a>

3. At the begining of your content add:

<a name="content" id="content"></a>

Important: If you are using XHTML 1.1, then you should insert the following at the beginning of your content:

<a id="content"></a>

instead of

<a name="content" id="content"></a> described above.

- otherwise your code will not validate.

Do your web pages have Skip navigation or to content links? If not, it should be time to build them...


For further reading:

Skip Repetitive Navigation Links: http://oc.nci.nih.gov/web508/tip2.html
Skipping Over Navigation Links: http://diveintoaccessibility.org/da...tion_links.html
Skip to Main Content Link: http://www.washington.edu/accessit/AU/tutorial/ins.html

AFAIK, these are commonly called Access Keys, and can be assigned to your nav items, to allow users to navigate using the keyboard. The problem is that there is no standard set of keys that everyone uses... every site can be different... hopfully this will change soon.

What if you say the access key is "s" and someone's using a foreign keyboard...
Are they international based?

Hmm - good point. I've just had a quick look around on google... not much luck. Might go have a read of the W3C spec

I personally use numbers for accesskeys, instead of letters.
See here why: http://lists.w3.org/Archives/Public...prJun/0117.html

Yeah - pretty much every site I've seen that uses access keys uses numbers - and after reading the link supplied by webnauts, you'd be crazy yo use letters.

You may all have a look at my under construction web site redesign here:
http://www.webnauts.net/css_final/index.shtml

The only thing which is missing about the accesskeys, are the use instructions for other browsers except of IE.

Though it is worth to have a look.
Notice, there is still a lot of work to be done.

Nice site Webnauts - looks very accessible. Good use of semantic markup. My only comments: there seems to be a hell of a lot of div's, many seem unnecessary.. And your Access Key list could prolly be done using a dl/dt, or maybe even a list - save you using all those <br />'s. - otherwise - fantastic.

Question - why have you assigned separate ID's to your <h1>'s, when they all have the same style?

Webnauts brought up another point...
Which browsers support Access keys (and general all-around accessibility), and which don't?

I know that Mozilla-based browsers, MSIE and Opera support accesskeys. Though they have different short-cut keys.

I'm surprised nobody has mentioned this yet... I'm all for Access keys, EXCEPT when the access key uses the same letter as an already-existing code for the current application.

Webnauts, take your design-in-progress site for example... Your "Home" shortcut key uses "ALT-H"... If you try using Alt-H, what happens? For me, whether in IE or FireBird, the help menu is displayed...

Access keys are great, however, the keys used should definitely be thought out...

Thanks FrankieShakes for the input. I must change the Home and Skip Navigation accesskeys to numbers too!

MadCowDzz, accesskeys are supported by:

Internet Explorer 4+ (Windows) 5+ (Mac)
Mozilla (Windows + Linux)
Netscape 6+ (Windows)
Opera 7 (Windows + Linux)

More about here: http://www.alistapart.com/articles/accesskeys/

I assigned separate ID's for internal linking.

My tutorial "Skip Navigation links are important" have been updated and published on my web site.
.
You might would like to have a look: Skip Navigation links are important