Skip to Main Content

Pelican Design System icon Pelican Design System Skip Link

Skip Link

Skip Links allow users to skip navigation elements and go straight to content.

On this page:

Best Practice

Users who rely on keyboard navigation need a way to skip past navigation elements if they are already familiar with the page.

  • Put the Skip Link markup as the first direct child of the <body> element.
  • It should always be the first element the user can interact with on the page when they press the Tab key immediately after the page has loaded.

Usage

<a id="SkipToMain" class="skip-to-main" href="#main" tabindex="1">Skip to Main Content</a>

Resources

Page top