14 replies to this topic

[Webnauts]

A logo or a header is a precursor of the page. It lets a person know what web site 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 web site.

If the skip navigation link is before this logo, then the user doesn't know immediately which web site he/she is on.

My question: Why do some goverment or university web sites have their "Skip Navigation or to content" before / above the logo of their pages? Can someone tell?

Thanks!

Edited by Webnauts, 01 October 2003 - 11:08 PM.

[dragonlady7]

The reason to have it right at the top is so that you don't have to listen to your screen reader read: "logo image, header image, spacer gif" etc. etc.
If you're going to skip the navigation, you want that to show up first.
Before you have to sit through the image alt tag, especially if the logo is comprised of several images.
I can see arguments for having it before or after; whichever. If I thought I'd just left the website, I wouldn't skip the navigation. If I thought I was on the same website, I'd skip it.
I don't know enough about screen readers, however. Maybe you're right, and it should be after the logo. I bet a lot of people never thought of it that way, though.

[torka]

Well, if the site is done properly, you shouldn't have to listen to your screen reader read "spacer gif" at all (use a blank ALT -- i.e. alt="" -- to suppress the reader even mentioning that the image file is there).

I don't have JAWS or any other screen reader available to test. Does anyone here know what they do with the page TITLE? Do they read that first? Or do they skip that entirely and just start with the actual on-page content? If they read the page TITLE tag first, then placement of the skip nav shouldn't matter (as long as the title is sufficiently descriptive). If they ignore the page title, then I agree, there might be some issues with placement after the logo (or main header or whatever is at the top of the displayed page to identify "where" you are).

I assume that the sites that place the skip nav above the logo are thinking more in terms of convenience for the mobility impaired (who also make use of skip nav) than the visually impaired. And since most sites are created by people who are NOT visually impaired, I would also guess that another portion of the explanation would be that they simply don't think about what the page would sound like to a person using a screen reader (they've been told they have to have skip nav before the navigation, so they put it in there, up at the top where it won't "interfere" too much with the page layout...). JMHO, of course, YMMV.

--Torka

Edited by torka, 01 October 2003 - 12:02 PM.

[Webnauts]

The screen readers do not read the title of the document. Only the content of the body of the document.

See below the article/tutorial I wrote today.

[Webnauts]

Skipping over navigation links tutorial

Enhance your web site accessibility providing 'Skip to Content or Navigation' links.

And from the usability for accessibility point of view, it is recommended to make such links visible.

Why? Frank Gayne at infocentre.frontend.com explain's:

"You must consider people with other types of impairments in this context also. Ask whether or not 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.fr...=article&id=150


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>

If this is done do one of the following, depending on the MarkUp Laguage 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>


By the way, if it does not fit in your design, you could do them also invisible as described below:

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

2. At the top of you page add this: <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 this: <a name="content" id="content"></a>


Another fact is, that many web sites have the "Skip Navigation" or "Skip to content" links, before the logo of the page.

But is that usable?

A logo is a precursor of a web page. It lets the user know what website he/she is on. You may have internal/external links on your page. If a "Screen Reader" user clicks an internal link, your logo's "alt tag" tells the user that he/she have 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.


For further reading:

Skip repetitive navigation links: http://oc.nci.nih.gov/web508/tip2.html
Skipping over navigation links: http://diveintoacces...tion_links.html
Skip to Main Content Link: http://www.washingto...torial/ins.html

By John Britsios, Web Accessibility and Usability Consultant
at Webnauts Net

Edited by Webnauts, 01 October 2003 - 11:05 PM.

[torka]

Thanks, Webnauts!

--Torka

[dragonlady7]

Ahhhh, I see now. It is all clear to me.
Thanks! I only just found out what skip navigation actually was the day before yesterday, so I'm learning fast.

[Webnauts]

Thanks, Webnauts!

--Torka

You are always welcome Torka!

[Webnauts]

Ahhhh, I see now. It is all clear to me.
Thanks! I only just found out what skip navigation actually was the day before yesterday, so I'm learning fast.

You are also very welcome too dragonlady7!

[csjavi]

It's also possible to place the content before the logo and the navigation in your html. This has the added benefit of displaying the content first in normal browsers. Just use <div>s to display the elements correctly on the page.

That way you might need skip to navigation link :laugh:

[dragonlady7]

>place the content before the logo and the navigation in your html

I've been toying with this myself. At the moment, my pages are entirely unstyled plain XHTML, and the navigation is a bulleted list at the bottom. The first thing on the page is the header which echoes the title, saying clearly what the page is about. However, I have absolutely no logo or page identification. Which is at this point in itself unique, but will not remain. I think I will design a logo and put it to be the first thing on the page.
But I like having the navigation at the end, at least syntactically. I may position the div the nav's in at the left, which is usual, but I think I'll leave it at the end, so that if you're following through my site in its unstyled format, you go through the content on the page and then are given the option of where to go next.

I'm not sure about that, though. If you're looking for another page, that could be annoying. But, if you're viewing my page unstyled, it's probably loading pretty darn fast because there's almost nothing to load, so scrolling down wouldn't take so long. (The content is supposed to be pretty short anyway, or at least that's what I'm going for.) Thoughts, anyone?

[qwerty]

Well, it's irrelevant to the skip navigation question, but it's become pretty standard to have navigation along the left margin and at the bottom of the page. Some would argue that the purpose of that is to give the user some eye-pleasing form of navigation -- gifs or collapsible menus -- on the left, and plain text links for spiders, but I disagree.

From a user-centric perspective, I see left navigation as an index or table of contents, giving people a choice of where to go before they read a page, and bottom navigation as a list of options of where to go after a page has been read, especially if the left navigation is no longer visible by the time one reaches the bottom of the page.

[Webnauts]

Hi qwerty!

To your comments about navigation see the following resources:

Web Page Layout: A Comparison Between Left- and Right-justified Site Navigation Menus http://jodi.ecs.soto...04/i01/Kalbach/

Right Navigation - Location of the Scrollbar http://www.humanfact...loads/jan02.asp

To my knowledge and expereince, links at the bottom of the pages are mostly redundant and therefore not recommended. Read more here:
Testing Web Sites with Eye-Tracking http://world.std.com...b/eyetrack1.htm

[torka]

But I don't think we're talking about navigation that displays at the bottom of the page -- it still displays in visual browsers down the left hand side in what has become the "traditional" manner.

But by using <div> and CSS positioning (or by some fairly simple table tricks) you can make the navigation text appear where-ever you want, when it's physically located in the code down at the bottom of the page.

So, if somebody comes to your site without a style sheet or with a browser that doesn't react to visual style elements, then they'll "see" your page content first, followed by the navigation.

Of course, this doesn't help the mobility impaired, who may also have need of the skip nav link and yet may be using a perfectly standard browser with all visual styles intact. So I'm not sure that this styling (or table) trick gets us completely off the hook.

--Torka

[qwerty]

My own site is set up that way, but I'm not sure whether it helps or hinders people on screen readers. If you don't have CSS, you get the content first, then the navigation that would otherwise appear at the bottom of the screen, then the top banner, and finally the left nav buttons.