@reach/skip-nav

@reach/skip-nav

Docs | Source | WAI-ARIA

Skip navigation link for screen reader and keyboard users. Because the main content is not usually the first thing in the document, it's valuable to provide a shortcut for keyboard and screen reader users to skip to the content.

If the user does not navigate with the keyboard, they won't see the link.

import { SkipNavLink, SkipNavContent } from "@reach/skip-nav";
import "@reach/skip-nav/styles.css";

ReactDOM.return(
  <React.Fragment>
    {/* put the link at the top of your app */}
    <SkipNavLink />
    <div>
      <YourNav />
      {/* and the content next to your main content */}
      <SkipNavContent />
      <YourMainContent />
    </div>
  </React.Fragment>,
  rootNode
);