"Skip Navigation" link before or after logo?

Webnauts · #1 (**permalink**) 10-01-2003, 08:38 AM

Hi!

I wanted to ask where would you place your "Skip Navigation" or "Skip to content" link. Before the logo of the page or after?

I would appreciate your opinions or resources if any available!

Thank you very much for your kind support!!!

ranjan · #2 (**permalink**) 10-01-2003, 09:09 AM

A logo or a header is a precursor of the page. It lets a person know what website he/she is on. You may have internal / external links on your page. If a user clicks an internal link, your logo (its alt tag) tells him / her that he / she hasn't yet left your website.

If the skip navigation link is before this logo, then the user doesnot know immediately which website he/she is on.

Webnauts · #3 (**permalink**) 10-01-2003, 11:48 AM

Ranjan I have exactly the same opinion as you do.
But I was just wondering, why several goverment or university web sites do the opposite?

They place the "Skip Navigation or to Content" links above or before the logo.

Narasinha · #4 (**permalink**) 10-02-2003, 12:37 PM

I don't really have a logo, but I do have text that is consistently displayed at the top of my pages. The first line gives the name of the site, the second line describes your location within the site. I put my skip navigation link immediately following this text. I guess that way if someone decides they are in a different section than where they want to be they can use the navigation links to go elsewhere.

I also set up my style sheet so that the skip navigation link is visible, but it is at an absolute location at the top right of each page. When viewed as text (I like using the accessibility layout style in Opera) it shows up just before the navigation.

I also like Opera's Small-Screen Rendering option.

Quote:

Originally Posted by Opera Web Site

Small-Screen Rendering (SSR)

Web developers can test and see how their pages would look on a smaller mobile devices by simply pressing [Shift+F11] to enable Opera's small- screen mode. With Opera's breakthrough SSR technology Web pages are reformatted to fit smaller screens, while maintaining all functionality.

It's nice to know that my site is still quite functional and easy to use even on a mobile device. Who's doing their genealogy research from their PDA though? ;)

ScottNorton · #5 (**permalink**) 11-04-2003, 04:42 PM

Quote:

Originally Posted by Webnauts

I wanted to ask where would you place your "Skip Navigation" or "Skip to content" link. Before the logo of the page or after?

We put our link first, and the first thing at the #content anchor is the site's title in an H1 tag and the page's title in an H2.

I can see putting the Skip to Content link after the logo if that provides the user with context that isn't available further down. So I believe either of these designs would work:

Code:

(Logo) <h1>(Site Title)</h1>
<h2>(Page Title)</h2>
Skip to main content.
(Navigation bar)
<a name="content"></a> 


 Lorem ipsum...</p>

Or

Code:

Skip to main content.
(Logo)
(Navigation bar)
<a name="content"></a>
<h1>(Site Title)</h1> 
<h2>(Page Title)</h2>


 Lorem ipsum...</p>

The big issue to skip the many navigation links, particularly after visiting a number of pages on the site. Whether it skips the one logo and site title is a minor matter.

Consider this webproworld.com page. It has at least 65 links before the user gets to a message in the forum. Imagine, each time you click on a topic, forum, or category, hearing, "Chat, Link to use, Log In/out, Edit Profile, Private Messages,...." through 65 items.

By the way, I've learned to use "Skip to main content" as the link text, since JAWS mis-reads "Skip to content" by putting the accent on the second syllable , con-TENT. The link can take you to the right place in the document, but it can't make you more contented. :-)

Webnauts · #6 (**permalink**) 11-04-2003, 05:06 PM

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." (Read whole article here: http://infocentre.frontend.com/servl...article&id=150)

How can you build such links?

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

Skip over navigation

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.

ScottNorton · #7 (**permalink**) 11-04-2003, 05:30 PM

The National Cancer Institute's Office of Communication has been doing some excellent practical work lately on accessibility and usability, and they address this matter in one of their tips: http://www.usability.gov/web_508/tip2.html

Invisible links meet the needs of screenreaders. They are accessible and usable for screenreader users and they don't detract from usability for able-bodied users (people whom a disabled friend describes as "temporarily able-bodied").

Visible links enhance accessibility for users with motor impairments, who can see the screen but must use the tab key to get to the links in the body.

Consider this page, here at webproworld.com. It takes 42 "tabs" to get past the horizontal bar ("Chat," "Link to Us," and the rest) to reach the link for the first category in the left nav bar. And 92 tabs to get to the "Close Tags" link. Pretty annoying if you can't use the mouse.

But for mouse users, the visible Skip Navigation link is a distraction and confusing, reducing usability for that segment of the population.

Perhaps you'll follow the NCI's third approach:

Quote:

Originally Posted by National Cancer Institute

You may even decide that you want to set an example by using a visible bypass link, so that the general public will start becoming accustomed to this accessibility convention. To explain its purpose to non-disabled users, you could use the TITLE attribute of the A tag to provide additional information.

If you look at their page, you'll see they use an invisible link, and place it before their logo. An invisible link is probably good for that page, since there are only a few links before the main content. They put the navigation bar on the right side.