As well as linking to the main content and other important sections on a webpage, skip links can also be used within a page to skip long blocks of content. Instead of the link being positioned at the very top of the page, in-page skip links should be positioned immediately before the content that is to be skipped. For example, an in-page skip link could be positioned before a navigation menu, particularly if the navigation menu is very long. Similarly, webpage footers often contain a list of links. As this is repeated on every page, an in-page skip link could be positioned before it.
Provide links immediately before long blocks of content that allows users to skip over them. These should be internal links, which link to somewhere else on the same webpage rather than another webpage. The "href" attribute of the skip links should point to the "id" of elements on the page after the content to be skipped, such as another link or even a heading. You can use CSS to to hide the link and only show it when the user tabs to it.
Also. some screen reader users may navigate webpages by moving through the headings. Because of this it is important to create a hierachy of appropriately-labelled headings.
//Hiding a "Skip to main content" link - CSS #skip_to_main, #skip_over_nav {
position:relative;
left:-2000px;
} #skip_to_main:focus, #skip_over_nav:focus {
left:5px;
}
//Hiding a "Skip to main content" link - HTML
<html>
<body>
<a href="#main" id="skip_to_main">Skip to main content</a>
<h1>Page title</h1>
<p>Here is some initial content at the top of the page.</p>
<a href="#main" id="skip_over_nav">Skip over navigation menu</a>
<ul id="navigation">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
<li>Products</li>
<li>Recommendations</li>
<li>Store</li>
</ul>
<h2 id="main">Some main content </h2>
<p>Here is the main content of the page [...]</p>
</body>
</html>