Allow keyboard users to quickly and easily jump to the content they want to interact with.
Meeting the Web Accessibility Standard
When there are skip links that allow users to bypass blocks of content that are repeated across a website or set of web pages, this meets WCAG 2 Success Criterion 2.4.1 Bypass Blocks (Level A).
On this page
- What are skip links?
- How skip links help
- How to create a skip link
- Make a skip link accessible
- Testing skip links
What are skip links?
Skip links are extra links in a page to help keyboard users jump past blocks of content or groups of controls that:
- are repeated across a set of web pages, such as a website banner and main menu
- add a lot of items to the keyboard focus order, such as an A–Z index at the top of the main content where each letter is a link to sections down the page.
How skip links help
Skip links can be useful to many users, but they are primarily intended for sighted keyboard users. The aim is to reduce the number of times keyboard users must press the Tab key to get to the content that they wish to interact with.
Skip links are not required, but they can be a very helpful navigational support for some keyboard users — for this reason, consider implementing them as a matter of course.
How to create a skip link
To create a skip link, use an
<a> element and give its
href attribute a URL that points to the skip link’s target. Most of the time, that URL will be the value of the target element’s
id attribute, preceded by the # symbol.
For more on links, see Web Content Type: Links.
For more on keyboard accessibility, see the Knowledge Area: Keyboard accessibility.
Make a skip link accessible
If hidden, show a skip link on focus
If a skip link is normally hidden:
- do hide it visually using an accessible technique — for example, see Inclusively hidden — Scott O’Hara
- do not hide it using either of the following CSS properties (as this will remove the skip link from the accessibility tree):
- make sure that it becomes visible when it receives keyboard focus.
‘Skip to main content’ comes first
A ‘skip to main content’ link should be the first focusable element on the page. This ensures that it’s the very first thing a keyboard user encounters, providing them with the quickest access possible to the page’s main content.
Choose headings over containers for link targets
Try to use a heading element as the target for skip links, unless some other element makes more sense. A heading introduces or describes what follows. This makes it a great place to send the user, since it helps orient them to where they are in the page.
Avoid targeting a large container element such as a
<div> wrapping the main content. The main reason for this is that it can impact a user’s control over keyboard focus.
Skip links and
Depending on how your skip link is implemented, the target of the link might need
To learn more, see In-page link targets and
tabindex="-1" — Knowledge Area: Keyboard accessibility.
More information on implementing skip links
Testing skip links
A skip link is still a link. To be accessible, it has the same accessibility requirements that all links typically have. For more on testing the accessibility of links generally, see Testing links.
Specifically testing skip link functionality involves checking that they actually work to send visual and keyboard focus to the targeted element. For help seeing where keyboard focus is, see Visible focus indicators — Knowledge Area: Keyboard accessibility.
To test that skip links are working on the page, follow these steps:
- Load or reload the web page.
- Press the Tab key.
- If the focused element is a skip link:
- identify the link’s target — for example, by using the browser’s developer tools
- activate the link with the Enter key
- confirm that the link’s target is visually located within the browser’s viewport
- confirm that the link’s target has keyboard focus — for example, by using the browser’s developer tools or a plugin that highlights the focused element.