Skip Navigation - Quick Tip to help UCR

One of the first problems that people discover when viewing their beautiful, well-structured webpage without styles is that the important areas might be buried BELOW other page elements, like navigation.

One frequent solution is called skip navigation. Skip navigation are in page links, or links to fragments, which jump a reader to the content they're searching for. This is usually not so important for styled pages because the eye can quickly find the important sections of well-designed visual sites more quickly than the user can read the words "skip to content".

On the other hand, a page in all text with only font-size variations can take much longer to find the information the user is looking for. Enter, stage right, skip navigation. Most people have probably never seen skip navigation. And even fewer developers have even considered it.

Skip navigation are usually one to three links at the top of code. It's usually placed directly above or below the header and links to: content, page navigation, and some other important element of the page. In code it often looks like this:

<ul id="skip-navigation">
<li><a href="#content">Skip to content</a></li>
<li><a href="#navigation">Skip to navigation</a></li>
</ul>

Since most users don't need nor want to see the skip navigation, we simply add the following to our stylesheet:

#skip-navigation { display: none; }

This, for all intents and purposes, hides the skip navigation to users who are using styles.

To use this trick there are a couple requirements. The first is that you have two structural elements with ids "navigation" and "content". You no longer need to use the <a name="content"> since this is the old, pre-id technique. URI fragments will jump to a page's id. This is another reason to use ids in structural markup instead of classes. This also means that your skip navigation can include other important parts of your page, like "copyright" or "search".

That's all there is to it.