473,322 Members | 1,734 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Skip Navigation Best Practice

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
13 2577
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

"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
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
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

"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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Josh Renaud | last post by:
Hey everyone. First the requisite links: site: http://www.joshrenaud.com/bodies/index.html css: http://www.joshrenaud.com/bodies/stylesheets/style.css I have a UL that I'm using for a...
0
by: Veli-Pekka Tätilä | last post by:
Hi, My first post here. I've found some serious accessibility flaws in the Python 2.4 docs and wish they could be rectified over time. I'm very new to Python and initially contacted docs at python...
136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
59
by: AK | last post by:
I tried to google "skip scan DB2" but came up with nothing. Does DB2 have the feature under a different name?
24
by: Robin Cole | last post by:
I'd like a code review if anyone has the time. The code implements a basic skip list library for generic use. I use the following header for debug macros: /* public.h - Public declarations and...
17
by: | last post by:
I have an app that retrieves data from an Access database. At the moment I have the SQL string as a Const in my app. I understand this is not best practice. I don't want the user to have access to...
4
by: Sandy.Pittendrigh | last post by:
I don't want to get into a frames discussion here. We all know they have numerous drawbacks, especially with search engine visibility. (Google, ironically, uses framesets for displaying individual...
3
by: John | last post by:
Hi there, I was reading an article (http://avenuea-razorfish.com/articles/TheAll-MenuNavigation_Turbek.pdf) on 'all-menu navigation' and I'd like to try and implement this in my site. Can...
0
by: tom59593 | last post by:
Hi there. I have been attempting (for a few days on end, sadly) to get a navigation section of my new site to work. Granted, this is the first time I've ever written CSS...although I had PLENTY of...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.