[EMAIL PROTECTED] wrote:
> I need to provide a skip navigation link for pages, what is the best
> way to do this. All my pages have different named divs so can I just
> put a named anchor and link it.
Some of this may be OT for this list, so apologies to all if that is the
case.
Yup, from a browser compatibility standpoint that is actually slightly
preferable because I believe some older clients don't recognise the
anchor destination if it isn't <a name...>. I wouldn't lose sleep over
that either way, though.
It's best to put the skip link on some real text that says "skip
navigation" - some people like to play with the phrasing, but screen
reader users are attuned to this phrase and often don't catch it if it's
not something familiar.
It's best to have the skip link visible in the design so that
mobility-impaired and keyboard users can use it too, but you can hide
the skip link *if you really have to* using CSS.
There are two good methods to hide it:
a. Using fixed height container and overflow: none
b. Using absolute positioning - my preferred option.
e.g.:
span.hidden {position: absolute; width: 1000px; left: -2000px;}
Both of these allow the screen reader to read the skip link in all known
cases.
On no account use display:none or anything similar as there are cases
where this may hide the skip link from the very screen reader software
whose user needs it.
On no account put the skip link on a single pixel image with alt text,
as was common practice a couple years ago. This is because at least one
screen reader (JAWS, the most common one) will not read the link because
it does not read alt text on any image smaller than 10px by 10px.
Finally, there was a CSS technique floating about where you could hide
the link until it was tabbed to and received keyboard focus, whereupon
it poppped up in some fashion then disappeared again when the user
tabbed once more. I don't recommend this because users tend not to
notice that it has appeared. Could be a compromise, though, if you
really are pushed to hide the skip link.
Hope this helps
Cheers
Ian
--
_________________________________________________
zStudio - Web development and accessibility
http://zStudio.co.uk
Snippetz.net - Online code library
File, manage and re-use your code snippets & links
http://snippetz.net
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
