Skip Navigation link and destination container for screen readers and keyboard users. Per WebAim.org on [WCAG 2.4.1 (Bypass Blocks - Level A)](https://webaim.org/standards/wcag/checklist#sc2.4.1), 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 sufficient for sighted users who > primarily use a keyboard. ## Imports ```js 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"` renders `href="#custom-id"` in `SkipNavLink` and > `id="custom-id"` in `SkipNavContent`. ```jsx live=false <> // If you want to make it the first element the user encounters Skip to content // And inside another component, like App

// The main content below

``` ## In Action You can see these components in action on this page! 1. Place your cursor in the browser's address bar. 2. Remove any id queries from the url. (i.e. `/skip-nav#usage`) 3. Hit `Enter` to reload the page, then hit `Tab`. The Skip Nav link will appear in the upper left. 4. Hitting `Enter` on the link will take you to the top of the docs content.

Skip Nav

Props#