Skiplinks

SCSS Source: core/src/scss/components/skiplinks/_skiplinks.scss

Description

For providing a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content.

Gives screen readers and keyboard users the same capability of going directly to the main content as sighted, mouse users. of the main content. Learn more at https://webaim.org/techniques/skipnav.

To test this component's functionality, place your cursor on "Example" and click. Then, press the tab key. The Skiplinks link will slide into view at the top lefthand corner of the screen. Press the return key (or click on the link) to skip to the targeted element.

Default Style

Example Markup

<header>
  <a href="#main-content" class="su-skiplinks">Skip to main content</a>
</header>
 <main>
  <h2 id="main-content" class="su-sr-only-element" tabindex="-1">Main Content</h2>
</main>