Skip to main content
Hennepin County Design System

Skip navigation link

Skip navigation links help people using keyboards move to the main content of a page. They reduce the number of keystrokes by bypassing top-level navigation and elements. The skip navigation link is visually hidden until it gains focus with the Tab button. 

Skip to Heading 3

To view the skip navigation link component tab in this example, navigate to inside this example and press the tab key.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Heading 2

Proin porttitor, orci nec libero, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.

Heading 3

Ut sed libero eu ante tincidunt congue. Praesent sapien massa, auctor a, facilisis in, egestas eget, quam. Integer nec nibh. Phasellus nulla. Integer vulputate, risus a ultricies adipiscing, enim mi tempor libero, eget bibendum turpis elit ut lectus.

HTML

<a href="#main-content" class="hc-skiplink" tabindex="0">Skip to Heading 3</a>
    
    <div>
      <p>To view the skip navigation link component tab in this example, navigate to inside this example and press the tab key.</p>
      <h2>Heading 1</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. 
        Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. 
        Cras elementum ultrices diam. Maecenas ligula massa, varius a, 
        semper congue, euismod non, mi.
      </p>

      <h2>Heading 2</h2>
      <p>
        Proin porttitor, orci nec libero, enim est eleifend mi, 
        non fermentum diam nisl sit amet erat. Duis semper. 
        Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. 
        Pellentesque congue.
      </p>

      <h2 id="main-content">Heading 3</h2>
      <p>
        Ut sed libero eu ante tincidunt congue. 
        Praesent sapien massa, auctor a, facilisis in, egestas eget, quam. 
        Integer nec nibh. Phasellus nulla. Integer vulputate, 
        risus a ultricies adipiscing, enim mi tempor libero, 
        eget bibendum turpis elit ut lectus.
      </p>

    </div>

Import

Label

When to use

  • Include a skip navigation link on all pages at or near the top left of a page.
  • Make it the first focusable element on a page when using a keyboard.
  • Place it either immediately after an opening <body> element or right after a cookie banner.
  • Include the corresponding ID in the <main> element to link it with an anchor.
  • Use CSS to hide the link off-screen until it gets keyboard focus, to make it visible to all users.

When not to use

  • Ignore warnings in auto-testing tools that the skip link is outside a landmark. This warning does not apply to skip links.
  • Avoid using a <button> element in place of an <a href>. You can style the link as a button or keep the link as text. For users with a visual impairment, the screen reader will read the skip link as a link. It is the expected interactive function. And it is very different from the interactive element of a button.
  • Do not put the skip navigation link inside of either the <nav> or <header> landmark elements.
Open all

Skip navigation links help people who use screen readers or navigate using only a keyboard.  They let users "skip over" repeated top navigation elements and go straight to the main content of a page. This reduces users' frustration and fatigue.

Skip navigation links benefit many users, not only people with a disability. It’s best to allow skip links to visually appear when focused on.  

Mobile considerations

There was an issue with focusing only on inputs and not in-page links for iOS 11 and 12. The focus would move to the correct element at first. But then it would move back to the actual skip link instead of staying on main body content. Version iOS13 has fixed this.  

Open all