Code examples

<a href="#example-main">Skip to main content</a>
<a href="#">Not main content</a>
<main tabindex="-1" id="example-main">
  <h1>About main content</h1>
  <p>The main content of the page belongs here.</p>
  <p><a href="#">Focus moves here next</a></p>
</main>
Skip to main content Not main content

About main content

The main content of the page belongs here.

Focus moves here next

Developer notes

Group

  • Skip links must be the first perceivable elements in the page

Focus

  • Landmarks and other elements can be targeted with a skip link, but aren’t individually focusable with the tab key
  • Use tabindex="-1" to make the target focusable with a skip link.