Skipping over navigation links tutorial

[Webnauts]

Skipping over navigation links tutorial

Providing links that allow the user to skip to content or navigation will enhance your web site accessibility. 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>


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 a 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 "alt tag" 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.

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, 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="S"><img src="spacer.gif" alt="Skip to content - (access key = S)" 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.


For further reading:

Skip repetitive navigation links: http://oc.nci.nih.gov/web508/tip2.html
Skipping over navigation links: http://diveintoaccessibility.org/day_11_skipping_over_navigation_links.html
Skip to Main Content Link: http://www.washington.edu/accessit/AU/tutorial/ins.html

[John Scott]

http://www.washington.edu/accessit/AU/tutorial/ins.html

By this point in the demonstration, if you're using a screen reader, audience members may be growing tired of listening to the synthesized voice repeat the same navigational links over and over again. Solicit agreement from the audience that this is monotonous. Sighted users can quickly skip to the specific content that interests them. A "Skip to Main Content" link is simple to implement, and goes a long way toward providing this same capability for a blind user.

Something I never thought of before. I wonder how many people use a voice sythesizer....

[Webnauts]

John I wish I knew myself how many people use voice synthesizers.
But while I cannot know that, I hold on the rules, and therefore I am on the right size.

OK. To be honest, I would take care, if I knew there is only one.
I want every single user as a client, if possible.

[theNetPlace.com]

Personally I prefer to hide the "Ship Links" from able-bodied usersby adding:

<div class="skiplinks">
<p><strong>Welcome to [site name].</strong></p>
Skip directly to:
<ul>
<li><a href="#search">Search Box</a></li>
<li><a href="#nav">Section Navigation</a></li>
<li><a href="#content">Content</a></li>
</ul>
</div>

With the CSS:
.skiplinks {
display: none;
overflow : hidden;
}

I put it in an external file called like this:

<style type="text/css">
@import "filename.css";
</style>

This way people using text or screen-reading user agents (or Netscape 4.x) will see the skip links text, while all others will just see the styled content.

[Webnauts]

theNetPlace.com I can only say: EXCELLENT!!!

[LazyJim]

use the @media rules
and would combining display: none; with speak: normal; help?

[LazyJim]

you sure screen-reading user agents ignore @import ???
i mean why? and will they continue to do so when they are updated to support the latest (and future) standards??

[theNetPlace.com]

Yes they definitely do ignore @import. Most of them do it specifically because designers use it to hide these sorts of elements.