Skip link

Use case

Users should be able to:

• Navigate to and discover the link using assistive technology. 
• Use the skip link to bypass repetitive content on the page.

Interactions

If there are a lot of focusable elements preceding the main content, keyboard and screen reader users will have to navigate past each one of those elements before they reach the content in the main area. Using a skip link allows users to quickly bypass repeated content across a website or product and jump straight to the main content of each page.

Keyboard interactions

• The skip link should be the first focusable element on the page.
• Tab. Makes the skip link visible.
• Pressing ‘tab’ when on the main will focus the first interactive element within the main.
• Enter. Skips the user to the main element, wrapping the main content on the page.
• The main does not need to receive a visible focus indicator as its not interactive.

Design considerations

• The skip link should be placed in the top left hand side of the screen, so that it follows the reading order of the page and is easily seen by users when focused.
• The skip link should be hidden visually until it receives focus.
• Make sure the link text is clear and descriptive so that users understand the link purpose.

Development considerations

• Make sure that the skip link is visually hidden until it receives focus. 
• The target of the skip link on a page should have a clear id and be a main landmark or a div with role=”main”.
• If skipping past repetitive content, the skip link should target an element after the section of repetitive content.