Skip links are designed to allow certain users the ability to skip over one section of content so that they can quickly get to another section of content. This may mean skipping over site navigation links in order to get directly to the content of the site, or skipping over the content in order to get to the site navigation, or other content.
<div id="skiplink">
<a href="#content" title="skip to content">Skip to content</a>
</div>
<p id="skiplink">
<a href="#content" title="skip to navigation">Skip to navigation</a>
</p>
<ul id="skiplink">
<li><a href="#content" title="skip to content">Skip to content</a></li>
<li><a href="#content" title="skip to content">Skip to content</a></li>
</ul>
Where possible, skip links should be made visible, rather than hidden within the source code. This allows users who rely on keyboard functions (no mouse) to tab to the skip link first, and decide whether they want to skip over the content or navigation.
Visible skip links can be positioned at the top within the source code, but visually positioned anywhere on the page using absolute positioning within CSS.
If skip links need to be contained within a parent container, this parent can be set to position: relative, and the skip link can then be set to position: absolute. This allows the skip linked to be positioned anywhere - in relation to its parent container.