Skip navigation

how to use this feature

[fwordboy]

I have a website with big menus, i want the option for users to be able to skip the navigation, i've done this as seen on other sites

HTML
<div id="skipnav"><a href="#start">skip nav</a></div>
<menu>
-
-
-
</menu>
<a name="start"></a>

CSS
#skipnav{display: none;}

--

is this div ever displayed? I have the css set to screen but is this the best way to do things or is this like adding a ramp to the front of a building then covering it in harry potter's invisibilty cloak so it nevers gets used?

[benihana]

as you have it setup there, the link shouldnt be visible.

at an accessibility seminar i was at the other day, a speaker from the RNIB advocated making the skip nav link visible, but didnt go into reasons.

i tend to use a small arrow image, as part of the breadcrumb trial, as the link.

funny, they used the 'like adding a ramp' analogy a lot too

ben

[TheWhippinpost]

Just been havin this discussion elsewhere - The reason the RNIB (probably) don't advocate it is because some screenreaders don't read out what isn't displayed onscreen.

[benihana]

ah thanks TWP, that would explain it.

[SuzyUK]

That explains it for the RNIB ...and it is their plea to us

but it is ultimately the screenreader software that is at fault.. they shouldn't be using media="screen". In their defence it's not their fault either as standards are only emerging, we know that not all the medias are properly supported yet and for the software companies to change will probably be expensive, added to that a person can often become attached to their "browser" and not upgrade as fast as we'd like ;)

E.g. the use of skip links has been advocated for handhelds too as in even a menu that is not very "long" on screen or is horizontally displayed in a wide screen browser... can be very long on a mobile phone.

While use of a "visible" skip navigation link would be next to useless at the start of a horizontal menu on screen... it would keep those few screenreaders that incorrectly don't read display: none;, happy

Alternatively...a 1px x 1px div, or a link positioned absolutely off the screen would keep everyone happy, well almost then there's the SE's... can you imagine the talk of spamming we would then get just for trying to keep the RNIB and handhelds happy :(

it's a no win situation which is possibly why the RNIB person didn't elaborate. They are up against "browser" support issues the same as we are and it probably depends whether your site is commercial or an example of 100% accessibility which method suits your site best

*sigh* Oh for a perfect world...
Suzy

[IeuanJ]

I have to admit, finding out that some screen readers didnt display this link was a suprise to me at first because I had always thought that they didn't apply the "screen" stylesheet, I mean what is the point if 99% of the properties will be useless to them anyway.

I tend now to put the link in it's own <div> and absolute position it off screen or behind something else. It's annoying but theres not many other ways around it.

[TheDoctor]

I leave my "skip to content" link visible, on the grounds that soem sighted people might find it useful anyway.

It doesn't take up much room and it uses the same the same style as the "back to the top" links further down the page. It sort of looks quite natural sat there, so I've ceased to worry about it.

[PCInk]

Look up accesskeys. Many users with disabilities use the number '2' as an access key to skip navigation ('2' is a standard, '1' is the home page standard). Then, you can place it anywhere (even at the bottom of the page) and the user can skip the navigation using the standard shortcut keys they are used to.

[R1chard]

^ PCInk- I was just thinking the same thing. If they expect it to be accesskey 2 then they don't even need to have it visible/audible in the first place.