Skip Nav
Skip Nav Link allows keyboard users to skip to the main content of the page.
Per WebAim.org on WCAG 2.4.1 (Bypass Blocks - Level A), because the main content is not always the first section that the user encounters on a page, it is strongly recommended to include a skip link for users to be able to bypass content that is present on multiple pages. Navigation links are the most common skipped.
A user with a screen reader or specialized software could skip content via the headings or
main
region, but this is not sufficiant enough for sighted users who primarily use a keyboard.
Imports
import { SkipNavLink, SkipNavContent } from "@chakra-ui/skip-nav";
Usage
The SkipNavLink
component ideally needs to be one of the first items a user
encounters when they begin navigating a page after load. Therefore, it is
recommended to place it as high as possible in the app.
It renders an a
tag and automatically creates a link with an href
attribute
that will point to SkipNavContent
.
The SkipNavContent
component is used as a target for the link to place
keyboard focus on the first piece on main content. It renders a div
and can
either be a self-closing component, or wrap the main content.
You can supply a custom id value using the prop
id
but you will have to use this prop and value in both components, or they will not match. For Example:id="custom-id"
rendershref="#custom-id"
inSkipNavLink
andid="custom-id"
inSkipNavContent
.
<>
// If you want to make it the first element the user encounters
<SkipNavLink>Skip to content</SkipNavLink>
<App />
</>
// And inside another component, like App
<div>
<SkipNavContent />
// The main content below
</div>
In Action
You can see these components in action on this page!
- Place your cursor in the browser's address bar.
- Remove any id queries from the url. (i.e.
/skip-nav#usage
) - Hit
Enter
to reload the page, then hitTab
. The Skip Nav link will appear in the upper left. - Hitting
Enter
on the link will take you to the top of the docs content.
Props
The SkipNavLink
component composes the Box
component and renders an a
.
The SkipNavContent
component composes the Box
component and renders a div
.