If a “Skip to content” link is provided on any website, it will allow users to move the keyboard focus directly to the main content of the website. When header with navigation links is repeated at the top of several pages, keyboard users should be able to avoid it and move the keyboard focus directly to the start of the main content of the page. The <main> element is used to represent the main content area of the website. The “Skip to content” link is positioned at (or close to) the start of the page.
If the “Skip to content” link is hidden, it becomes visible when it gets keyboard focus.
Common mistakes
The <main> element has been used, but there is no skip link point to it.
A skip link is given, but it is always visually hidden and only available to screen reader users.
Why?
This guarantees that people who use keyboard can quickly and easily reach the content of the page.
Guidance for Web Designers
Give visual styles and position for when the link received keyboard focus
Label the link ‘Skip to content’ (like the BBC homepage.
“A” element with the text “Skip to main content” is placed right at the start (or very near the start) of the page.
The “a” element has an href attribute pointing to the id of the page’s main element.
If that “Skip to main content” link is hidden by default, it becomes visible on: focus.
Basic example of a “Skip to main content” link
<body>
<a href=”#main”>Skip to main content</a>
<!– header and navigation go here –>
<main id=”main”>
<h1>Main heading on the page</h1>
<p>This is the first paragraph of content on the page</p>
<!– … –>
</main>
<!– … –>
</body>
