Skip Navigation
Common practice when making web pages is to have the navigation bar on the left side with the information to the right. For visual users this layout usually is ideal as they can see the navigation bar and skip straight to the information if so desired. But when the same page is read under a screen reader the navigation bar is the first thing read and there is no built in way to skip it. The concept of skip navigation is to give the user using a screen reader a way to skip over the navigation bar and jump right into the information of the page. The most common way to do this is using an anchor tag that contains invisible text or a very small image.
Example
The skip navigation link is located before the menu and the named anchor (link destination) is placed right before the page content. In the example below, both invisible elements are highlighted.
Sample page with a skip navigation link:
Monarch Butterflies
Skip navigation link location
Named anchor location
Life Cycle
...
HTML Code:
<h1>Monarch Butterflies</h1>
<!-- Start Skip Navigation -->
<a href="#content">
<img src="invis_skip_nav.gif" width="2" height="2" border="0" alt="Skip
Navigation">
</a>
<!-- End Skip Navigation -->
<ul>
<li><a href="news.html">News</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Start Named Anchor -->
<a name="content"></a>
<!-- End Named Anchor -->
<h2>Life cycle</h2>
Links
Navigation Menus
(http://www.webaim.org/techniques/navigation)
Skipping over navigation links
(http://diveintoaccessibility.org/day_11_skipping_over_navigation_links.html)
