Skip What?
The first time I was told that a website I had made would need something called a “skip nav” I was, to put it lightly, a bit confused and a bit more appalled. Why on earth would I want users to skip the site’s navigation? How on earth would they get around? Surely, if users are given the option to skip the navigation, some will, and they will be banished forever to the land of content; possibly even venturing below the fold, never to return!
Well maybe my imagination got away from me a bit (too much Dungeons and Dragons as a kid?) but it does seem kind of silly to give users the option to skip over one of the most important parts of any site’s design. Doesn’t it?
Actually, it doesn’t. All of that navigation text is pretty easy to run your eyes past when your looking for the content; but what if you’re not using your eyes?
Visually disabled users are at a disadvantage on the web, however Section 508 is here to help; and one of the requirements outlined by the section 508 standards is that, “a method shall be provided that permits users to skip repetitive navigation links.” This allows users who are ‘viewing’ your site with screen reading software to forego hearing “Home, Links, Contact, About, Legal, Search, Site Map, Archives…” over and over again until they actually are able to find what they came for.
Sweet! So now that we know what a skip nav is, and why it’s important, let’s get down to the nitty gritty. Actually there isn’t much nitty, or gritty, because adding a skip navigation link to your site is pretty darn simple. It just requires two lines of code:
The actual skip nav:
And the #content anchor which should be placed right before your main content area
Now you can hide your skip nav link any way you like (many webmasters simply wrap the link around a 1px by 1px transparent gif with alt=’skip navigation’) because it doesn’t have to be visible, just readable by a screen reader.
As a test of your new skip nav, you should be able to load your website and press tab one or two times before your status bar reads “http://yoursite.com/page.htm#content” at which point, hitting the ENTER key should bring your browser window right to the guts of the page.
For more information on skip navigation links check out skip nav inventor, Jim Thatcher’s website.