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.

Edit on GitHub

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 first as a direct child of the <body> element.
  • It should always be the first element the user can interact with on the page if 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

Previous
Next
Page top