Skip Navigation Best Practice

[Monty]

I've been searching for guidance on which of the approaches used for
skipping repetive links (e.g., link as normal text, link as alt text
on invisible image, link with same forground and background colors
that becomes visible when in hover or active state using css) is the
best approach.

Is there any place on the net where this is addressed?

Thanks in advance.

[Brian]

Monty wrote:

I've been searching for guidance on which of the approaches used for
skipping repetive links
Best to avoid it all together by putting content before the
navigation, so that there's nothing to skip over.
(e.g., link as normal text,
I'd avoid that if there's an elegant way to avoid it.
link as alt text on invisible image,
That seems like a somewhat reasonable solution. But note that keyboard
users will still hit the image when tabbing, because it is a link. Is
the skip link for blind users? or for keyboard users as well?
link with same forground and background colors
that becomes visible when in hover or active state using css)

That doesn't make any sense. How will a user know it's there? At lease
change the color on focus, so a sighted keyboard user will know what
it does before selecting it. If this is for e.g. blind users, I'd use
display: none in a css file linked using an appropriate media
attribute. Even the 1px image seems better than the color idea.

--
Brian
follow the directions in my address to email me

[Harlan Messinger]

"Monty" <lm*****@my-deja.com> wrote in message
news:64******** *************** ***@posting.goo gle.com...

I've been searching for guidance on which of the approaches used for
skipping repetive links (e.g., link as normal text, link as alt text
on invisible image, link with same forground and background colors
that becomes visible when in hover or active state using css) is the
best approach.

Is there any place on the net where this is addressed?

I precede all visible content with an absolutely position DIV to hold a
linked pixel:

<div style="position : absolute; margin-left: 0px; margin-top: 0px;
z-index: -2">
<a href="#skip_nav igation"><img src="/inc/images/spacer.gif" border="0"
width="1" height="1" alt="Skip navigation"></a>
</div>

and put

<a name="skip_navi gation"></a>

at the top of the main content. If the page is divided into multiple
sections which might be of independent person to the user, I put multiple
linked pixels into the DIV with a meaningful ALT (like "Skip to feature
story", "Skip to headlines"), and an anchor at the beginning of each
section.

I've ascertained that the DIV is properly invisible in Netscape 4.7,
Netscape 7, Mozilla Firebird 0.5, IE6, and Opera 7.21. In the first three of
these, however, the links are still included in the page's tab sequence. In
IE6, they are not. In Opera I can't tell, because in the page I'm looking at
for purposes of summing all this up for you, there are two forms, and the
tab movement seems to be confined to those forms. Must be an Opera bug.
There are other links on the page, but the Tab key is ignoring them. I
haven't tried it on a page that doesn't have a form.

As for non-graphical browsers, the links are properly presented and work
correctly in Lynx for Windows, JAWS, and Home Page Reader.

[Anne van Kesteren]

Brian wrote:

Best to avoid it all together by putting content before the navigation,
so that there's nothing to skip over.

Skip over content?
--
Anne van Kesteren
<http://www.annevankest eren.nl/>

[Brian]

Anne van Kesteren wrote:

Brian wrote:

Best to avoid it all together by putting content before the
navigation, so that there's nothing to skip over.

Skip over content?

I do not add such a link. I could, I suppose, put
<a href="#navigati on">navigatio n</a>
on the top of each page, but that would likely only confuse readers,
especially if they are using a browser that supports positioning.

--
Brian
follow the directions in my address to email me

[Neal]

"Monty" <lm*****@my-deja.com> wrote in message
news:64******** *************** ***@posting.goo gle.com...

I've been searching for guidance on which of the approaches used for skipping repetive links (e.g., link as normal text, link as alt text on invisible image, link with same forground and background colors that becomes visible when in hover or active state using css) is the best approach.

Is there any place on the net where this is addressed?

Thanks in advance.

I tend to put navigation at the bottom of the page, and a link
very close to the top (so it appears in the viewport) which says
"Skip To Navigation" and style it thusly:

width: 0;
height: 0;
overflow: hidden;
position: absolute;

I also add a hidden link near the bottom returning the user to
the content.

[Stan Brown]

It seems "Brian" wrote in comp.infosystem s.www.authoring.html in
article <hAzLb.5854$Rc4 .24973@attbi_s5 4>:

Monty wrote:

I've been searching for guidance on which of the approaches used for
skipping repetive links

Best to avoid it all together by putting content before the
navigation, so that there's nothing to skip over.

Yes, but unfortunately no general solution for doing that exists.

By "general solution" I mean one that puts navigation visually above
content and doesn't break if the user resizes the browser window or
increases text size substantially. I don't remember the thread title
off hand, but quite recently in ciwas we established this.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Philip Newton]

On Fri, 9 Jan 2004 10:38:51 -0500, "Harlan Messinger"
<h.*********@co mcast.net> wrote:

In Opera I can't tell, because in the page I'm looking at for
purposes of summing all this up for you, there are two forms, and
the tab movement seems to be confined to those forms. Must be an
Opera bug.
No, this is by design.
There are other links on the page, but the Tab key is ignoring them.
I haven't tried it on a page that doesn't have a form.

Tab and Shift-Tab move between elements in a form; "a" and "q" move
between links in a page.

And I find it very handy that they're separate; since I generally use
the mouse for navigation, but the keyboard for entering text in input
boxes. So it's handy to be able to Tab quickly to the text input field I
want and put some text in without having to skip over a bunch of links
first.

Cheers,
Philip
--
Philip Newton <no***********@ gmx.li>
That really is my address; no need to remove anything to reply.
If you're not part of the solution, you're part of the precipitate.

[Bertilo Wennergren]

Stan Brown:

Best to avoid it all together by putting content before the
navigation, so that there's nothing to skip over.

Yes, but unfortunately no general solution for doing that exists. By "general solution" I mean one that puts navigation visually above
content and doesn't break if the user resizes the browser window or
increases text size substantially.

That is indeed a risk that you have to watch out for. I felt courageous,
and tried to do this in the latest redesign of my site. At least in
modern browsers the navigation on my pages shows up at the top of,
although it's really at the end of the (X)HTML code. It seems to work
in most reasonable situations:

<URL:http://www.bertilow.co m>

--
Bertilo Wennergren <be******@gmx.n et> <http://www.bertilow.co m>

[Stan Brown]

It seems "Bertilo Wennergren" wrote in
comp.infosystem s.www.authoring.html in article
<bt************ *@news.t-online.com>:

Best to avoid it all together by putting content before the
navigation , so that there's nothing to skip over.

Stan Brown:

Yes, but unfortunately no general solution for doing that exists.

By "general solution" I mean one that puts navigation visually above
content and doesn't break if the user resizes the browser window or
increases text size substantially.

That is indeed a risk that you have to watch out for. I felt courageous,
and tried to do this in the latest redesign of my site. At least in
modern browsers the navigation on my pages shows up at the top of,
although it's really at the end of the (X)HTML code. It seems to work
in most reasonable situations:

<URL:http://www.bertilow.co m>

Your solution looks similar to what I tried, at
http://www.acad.sunytccc.edu/instruc...e/probform.htm
When text gets up to 300% or so, as someone visually impaired might
do, the links at the top start to overlap the actual content.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/