I wrote this simple example following discussions on the WebAIM discussion group about the pros and cons of hiding "Skip Navigation" links. Using this technique, you can have the best of both worlds. (This page is rather ugly because I have kept the styling to a minimum for simplicity's sake).
In case you are unfamiliar with "skip" links (everyone else skip this!) here's what you do. Simply press the TAB key repeatedly until the "skip" link appears. Then press ENTER. That takes you to the navigation bar. You can then either tab through the navigation links or press ENTER again to return to the main content.
Please note that the skipping technique only works for Internet Explorer and Netscape 7 (and other browsers based on Mozilla 1.0 or later). This is because of the browsers' handling of keyboard focus: it has nothing to do with whether you hide the skip links.
The link hiding is done entirely with simple CSS, so it still works with JavaScript turned off. (There is no scripting on this page at all).
My site, Alexander Works, uses this method on every page.
<style type="text/css">
<!--
/* Hiding and Showing the "Skip" Links */
#navigation, #content { color:white; background:white; cursor:default; }
#navigation:focus, #content:focus { color:blue; background:white; cursor:pointer; }
#navigation:active, #content:active { color:blue; background:white; cursor:pointer; }
/* General Rules */
#toNavigation { position: absolute; top:0; left:10em; }
#toContent { position: absolute; top:0; left:0; }
body, p, ul { color:black; background:white; font-size:medium; }
pre { font-family:monospace; font-size:x-small; }
#box { float:left; width:10em; }
h3 { clear:left; }
div.nav { width:9em; }
img { border:0; }
//-->
</style>
Internet Explorer doesn't recognise the ":focus" pseudo-class. As a result, you will need to duplicate all the ":focus" rules with ":active" rules.
As you probably realise, Internet Explorer 6 uses a DOCTYPE switch to implement it's "standards-compliant" mode. One unfortunate effect is that developers who code to standards suddenly find their pages appearing in smaller type than they did in earlier versions.
The result is an unfortunate penalty for standards-compliant coding: it doesn't happen if you don't bother to code to standards (and use a correct DOCTYPE declaration). If you are using XHTML, you can legitimately avoid this penalty by adding a character encoding tag at the very top of your page, above the DOCTYPE declaration:
<?xml version="1.0" encoding="UTF-8"?>
This will fool Internet Explorer 6 into thinking you haven't got a correct DOCTYPE declaration. That way it won't vandalise your font size.
Be aware that it will then use the old, broken, Internet Explorer 4 & 5, CSS box model. Personally, I found this preferable because the mouse-tracking is still broken in the version 6 box model. The mess created by only partially fixing the box model created some nasty problems that I am glad to be rid of. (I actually reported this bug when the Internet Explorer 6 beta first came out, but it was never fixed). You can still code to standards: you just need to be aware that IE6 now uses IE5's broken box model instead of its own.