As well as linking to the main content on a webpage, skip links can also be used to jump to different sections of a webpage, e.g. the navigation menu or the search field. This provides users with even greater control over webpage navigation by allowing them to skip blocks of content and jump to important sections of a webpage.
Provide links at the very top of the webpage that allows users to "Skip to the main content". These should be internal links, which link to somewhere else on the same webpage rather than another webpage. As screen reader users move through the page, the skip links should be the very first focusable elements. The "href" attribute of the skip links should point to the "id" of elements on the page, 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_to_nav {
position:relative;
left:-2000px;
} #skip_to_main:focus, #skip_to_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>
<a href="#navigation" id="skip_to_nav">Skip to navigation menu</a>
<ul id="navigation">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
<h1 id="main">Some main content </h1>
<p>Here is the main content of the page [...]</p>
</body>
</html>