Skip link

The first focusable element on every page. Invisible until a keyboard reaches it.

When to use

Always. Every page with a header and navigation needs one, so keyboard and screen reader users can jump past them.

<a class="ag-skip-link" href="#main-example" style="position: static">Skip to main content</a>
<p class="docs-fine ag-mb-0">
  Shown here in its focused position. Normally it is off-screen until focused. Press Tab from the top of this page to
  see the real one.
</p>

How it works

• Put it before everything else in body.
• Point it at main, which has id="main" and tabindex="-1" so it can receive focus.
• The link text is "Skip to main content". Do not get creative.

<body>
  <a class="ag-skip-link" href="#main">Skip to main content</a>
  …
  <main class="ag-main" id="main" tabindex="-1">