@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
);