Skip links
- Kim Collins (Unlicensed)
A “skip link” is a visually-hidden anchor element used to skip over repetitive blocks. A webpage can have one or more skip links to move to specific parts of the page (e.g., skip to main content) allowing the user to "skip" over a block of content (e.g., main navigation, heading graphics, etc.).
A skip link should be the first link on the page and found at the very top of the page. Skip links can also be added anywhere in the page before repetitive content (e.g. before a pagination component).
They can be discovered by users who navigate the site by keyboard. The anchor is typically not visible until it receives keyboard focus. Pressing the ENTER key will move both visible and keyboard focus to the target of the link (e.g., the main content section on the page). It is important that keyboard focus move to the target of the link.
Note that skip links are links, not buttons.
The example below shows the use of skip links. For information on the .sr-only-focusable class used in this example, see Knowledge Base homepage.
<body>
<header>
<a class="sr-only-focusable" href="#main">Skip to main content</a>
<!-- logo, site search, site navigation, etc. ... -->
</header>
<main id="main">
...
</main>
</body>
Providing skip links will improve the accessibility of your webpage because they reduce the number of keystrokes needed to access content. This benefits screen reader users as well as users who navigate your site by keyboard alone.