By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,246 Members | 1,401 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,246 IT Pros & Developers. It's quick & easy.

Skip Navigation Best Practice

P: n/a
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.
Jul 20 '05 #1
Share this Question
Share on Google+
13 Replies


P: n/a
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

Jul 20 '05 #2

P: n/a

"Monty" <lm*****@my-deja.com> wrote in message
news:64**************************@posting.google.c om...
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_navigation"><img src="/inc/images/spacer.gif" border="0"
width="1" height="1" alt="Skip navigation"></a>
</div>

and put

<a name="skip_navigation"></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.

Jul 20 '05 #3

P: n/a
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.annevankesteren.nl/>
Jul 20 '05 #4

P: n/a
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="#navigation">navigation</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

Jul 20 '05 #5

P: n/a

"Monty" <lm*****@my-deja.com> wrote in message
news:64**************************@posting.google.c om...
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.
Jul 20 '05 #6

P: n/a
It seems "Brian" wrote in comp.infosystems.www.authoring.html in
article <hAzLb.5854$Rc4.24973@attbi_s54>:
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/
Jul 20 '05 #7

P: n/a
On Fri, 9 Jan 2004 10:38:51 -0500, "Harlan Messinger"
<h.*********@comcast.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.
Jul 20 '05 #8

P: n/a
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.com>

--
Bertilo Wennergren <be******@gmx.net> <http://www.bertilow.com>
Jul 20 '05 #9

P: n/a
It seems "Bertilo Wennergren" wrote in
comp.infosystems.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.com>


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/
Jul 20 '05 #10

P: n/a
Stan Brown wrote:
It seems "Bertilo Wennergren" wrote:
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.com>

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.


Yes. But in your pages, as well as in mine, the overlap does not
seem to be a big problem. At such a magnification the content
becomes hard to read anyway, without the navigation overlap being
the main obstacle.

And then I've added an interface for changing to a different
style, or for turning styles off.

--
Bertilo Wennergren <be******@gmx.net> <http://www.bertilow.com>
Jul 20 '05 #11

P: n/a
It seems "Bertilo Wennergren" wrote in
comp.infosystems.www.authoring.html in article
<bt*************@news.t-online.com>:
<URL:http://www.bertilow.com>


Yes. But in your pages, as well as in mine, the overlap does not
seem to be a big problem. At such a magnification the content
becomes hard to read anyway, without the navigation overlap being
the main obstacle.

And then I've added an interface for changing to a different
style, or for turning styles off.


Hmm -- maybe I shouldn't be bothered by the overlap on my page, but
I am. I guess it's a matter of personal taste whether it's a big
problem.

But I'm intrigued by your statement that you offer a mechanism to
change to a different style or turning styles off. Can you tell me
more? Mozilla's "Use Style" doesn't show a choice of style sheets.
Perhaps the mechanism is somewhere on the page but I missed it
because I'm not good at Esperanto?

--
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/
Jul 20 '05 #12

P: n/a
Stan Brown wrote:
It seems "Bertilo Wennergren" wrote:
<URL:http://www.bertilow.com>
Yes. But in your pages, as well as in mine, the overlap does not
seem to be a big problem. At such a magnification the content
becomes hard to read anyway, without the navigation overlap being
the main obstacle. And then I've added an interface for changing to a different
style, or for turning styles off.

Hmm -- maybe I shouldn't be bothered by the overlap on my page, but
I am. I guess it's a matter of personal taste whether it's a big
problem.
It seems to me that you can hardly read anything much anyway once
you get to the point where things start to overlap on your pages. And at
that point the overlap doesn't seem to be all that problematic anyway.
It overlaps a little bit of the main title, that's all.
But I'm intrigued by your statement that you offer a mechanism to
change to a different style or turning styles off. Can you tell me
more? Mozilla's "Use Style" doesn't show a choice of style sheets.
Perhaps the mechanism is somewhere on the page but I missed it
because I'm not good at Esperanto?


Choose the link "Elekti stilon" ("Choose style"), and then
anything from the second list ("Aspekto de la paghoj"). The
option "Simpla prezento - sen stilo" ("Simple presentation -
without style") turns off stylesheets (almost) completely.

The choice sticks to all of my pages that you go to after that
(until you choose a new style). It's all done with PHP (the pages use an
".html" extenstion, but they really are PHP pages). The style choice is
copied into the URL of every internal link on every page before the
pages is served. It's all home grown code, of course.

--
Bertilo Wennergren <be******@gmx.net> <http://www.bertilow.com>
Jul 20 '05 #13

P: n/a
It seems "Bertilo Wennergren" wrote in
comp.infosystems.www.authoring.html in article
<bt*************@news.t-online.com>:
> <URL:http://www.bertilow.com>Yes. But in your pages, as well as in mine, the overlap does not
seem to be a big problem. At such a magnification the content
becomes hard to read anyway, without the navigation overlap being
the main obstacle.And then I've added an interface for changing to a different
style, or for turning styles off.
Stan Brown wrote:
Hmm -- maybe I shouldn't be bothered by the overlap on my page, but
I am. I guess it's a matter of personal taste whether it's a big
problem.
It seems to me that you can hardly read anything much anyway once
you get to the point where things start to overlap on your pages. And at
that point the overlap doesn't seem to be all that problematic anyway.
It overlaps a little bit of the main title, that's all.


Yes, maybe I'm worrying about something not worth worrying about.
But I'm intrigued by your statement that you offer a mechanism to
change to a different style or turning styles off. Can you tell me
more? Mozilla's "Use Style" doesn't show a choice of style sheets.
Perhaps the mechanism is somewhere on the page but I missed it
because I'm not good at Esperanto?


Choose the link "Elekti stilon" ("Choose style"), and then
anything from the second list ("Aspekto de la paghoj"). The
option "Simpla prezento - sen stilo" ("Simple presentation -
without style") turns off stylesheets (almost) completely.


Thanks for following up. This was interesting! (When you point out
the Esperanto phrases, I feel embarrassed I couldn't recognize them
on my own.)
The choice sticks to all of my pages that you go to after that
(until you choose a new style). It's all done with PHP (the pages use an
".html" extenstion, but they really are PHP pages). The style choice is
copied into the URL of every internal link on every page before the
pages is served. It's all home grown code, of course.


Interesting. I don't have the ability to do anything like this on
the College server, but I believe I can on my own site. I'll file
this away for future reference.

--
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/
Jul 20 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.