Skip Nav Ideas

Hi Mike,
	I couldn't find your email that I had saved, but , being the resourceful
soul that I am was able to find it............can you send me your contact
info via email
?................................thanks..................Katie


For everybody Else,
	There are those that I know personally who would guffaw at the idea of the
dreaded "spacer.gif", and invisible Skip
Navigation.........................please contain yourselves.  I have
provided one of Len's VISIBLE examples, for the truly ardent.  But, the
thought comes to me, perhaps a good way to compile (to document) this stuff
is for everyone who wishes to.......................to please add a
technique (or ten) that you have worked/figured out....................to
this list, with your name if you like.  One's without "spacer.gif"s would be
especially appreciated...........................happy
navigation................................Katie

****************************************************************************
****************************************

Skip Nav Code ideas:

****************************************************************************
******************************************

One: (HTML to a Main Content TARGET)

(LINK)
<a accesskey="C" href="#MainContent" title="MainContent">
<img src="spacer.gif"
alt="Skip mumbo-jumbo, go straight to MainContents" width="0"
height="0" border="0" ></a>

(TARGET)
<a name="MainContents" id="MainContents"></a>

****************************************************************************
******************************************

Two: (XHTML to a table of contents TARGET)

(LINK)
<a accesskey="C" href="#toc" title="Table of Contents">
<img src="spacer.gif"
alt="Skip mumbo-jumbo, go straight to Table of Contents" width="0"
height="0" border="0" /></a>

(TARGET)
<a name="toc" id="toc"></a>

****************************************************************************
******************************************

Three: (This one is a visible skip nav link, created by an accessibility
legend, a friend, who recently died, Len Kasday.........)

<P>
(LINK)
<A HREF="#afternav">Skip nav bar</A>
<P>
  <HR>
<P>
<A HREF="stub.html">Link</A> | <A HREF="stub.html">Link</A> |
<A HREF="stub.html">Link</A> | <A HREF="stub.html">Link</A> |
<A HREF="stub.html">Link</A> | <A HREF="stub.html">Link</A> |
<A HREF="stub.html">Link</A> | <A HREF="stub.html">Link</A> |
<A HREF="stub.html">Link</A> | <A HREF="stub.html">Link</A> |
<A HREF="stub.html">Link</A> | <A HREF="stub.html">Link</A> |
<A HREF="stub.html">Link</A> | <A HREF="stub.html">Link</A> |
<A HREF="stub.html">Link</A> | <A HREF="stub.html">Link</A> |
<A HREF="stub.html">Link</A>
  <HR>
<P>

(TARGET)
<A NAME="afternav"><!-- --></A>Here we are past all those links in the upper
navigation bar. &nbsp;And now on with our story. &nbsp;It was a cold and
rainy Friday in Philadelphia, and everybody was indoors, out of the cold,
surfing the web.

****************************************************************************
*************************************

Four: (In a table data tag - HTML)


(LINK)
<td bgcolor="#000000" width="200" height="33">
<a href="#Content" accesskey="C"
title="Content">
<img src="/images/spacer.gif"  width="0" height="0" alt="Skip directly to
Content"></a></td>

(TARGET)
<h1><a name="Content">This is the Big Enchilada.</a></h1>

****************************************************************************
*************************************

Katie Haritos-Shea
11809 Waples Mill Road
Oakton, Virginia  22124-2113
USA

WAI Glossary: http://www.w3.org/WAI/GL/Glossary/printable.html

cell: 571-220-7777
ph: 703-605-6426  fax: 703-605-6826

mailto:ryladog@earthlink.net
mailto:kshea@fedworld.gov
mailto:kshea@ntis.fedworld.gov

Received on Monday, 4 June 2001 15:02:26 UTC