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