SkipNav
The SkipNav component from Reach-UI. This allows a user using a screen reader to skip over the navigation to quickly access the main content.
SkipNav is implemented using two components:
- SkipNavLink: The link to be placed at the top of your app tree. It will remain hidden unless focused via keyboard.
- SkipNavContent: Place this component before your content and after your navigation.
See the documentation at the Reach-UI website for full usage details, and thank Ryan Florence for making accessibility a priority.
Basic usage
<React.Fragment> {/* the SkipNavLink goes at the top of your app */} <SkipNavLink /> <div> <div>Your nav contents</div> {/* while SkipNavContent goes just before your main content */} <SkipNavContent /> <main>The main content</main> </div> </React.Fragment>