Skip link

Skip link lets keyboard and assistive technology users go to the main content of the page without having to tab through the navigation elements.

When to use this component

All web pages must have a skip link.

When not to use this component

Do not use a skip link as a substitute for well-structured, accessible page navigation. Use it in addition to logical heading order and landmark regions.

How it works

Include the skip link as the first focusable element on the page. Keep it visually hidden until it is focused by the first press of the tab key after page load.

Installation

To install the components, go to the get started guide for developers.

To use the Skip link component, enter the following command in your Terminal:

npm install @springernature/elements

Then, choose the brand you need and import the component styles into your scss file:

// Springer Nature
@import '@springernature/elements/components/eds-c-skip-link';

Link

The skip link must be the first focusable element on the page and should point to the main content container. Use an id on the target element for the link to point to.

For example, if you add main as the id:

<main id="main">
  ...
</main>

then the link data would be:

{
  "href": "#main",
  "text": "Skip to main content"
}

Focus

The target section must be focusable so that users can then continue to tab through content. Most browsers will do this automatically.

To ensure keyboard and assistive technology users can move focus into the target, add a negative tabindex to the main element:

<main id="main" tabindex="-1">

Some applications might display the browser's default focus styles around the main container. To prevent this, remove the focus styles programmatically:

main:focus {
  outline: none;
}

Iframe

If there is an iframe in the page, you must add the skip link markup before it.

Configuration

To view all the properties of this component, go to the schema.

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the #ask-elements Slack channel or the #ask-elements Teams channel.