I♥️Components: Chakra UI

SkipNav

⦾ The SkipNav component is a useful tool in creating accessible web applications, offering keyboard users a fast track to the core content of a webpage.

SkipNav is essentially composed of two components, SkipNavLink and SkipNavContent. These components come into play in enhancing website accessibility, particularly for keyboard users and screen readers. They offer a mechanism to bypass blocks of content that are repetitive across multiple pages, such as navigation links, allowing users to quickly access the main content of the page.

SkipNavLink: one of the two primary components of the SkipNav functionality in Chakra UI. Its primary purpose is to create a hyperlink at the top of your application that enables keyboard users to swiftly skip to the main content of the webpage, bypassing repetitive elements. This component renders an <a> tag and automatically establishes a link with an href attribute that targets SkipNavContent. This link typically becomes one of the first items a user interacts with when they begin navigating a page after it has loaded. Hence, it is highly recommended to place it as high as possible in your app's structure.
SkipNavContent: works in tandem with SkipNavLink to enhance the navigation experience for keyboard users and those using screen readers. This component serves as the target for the link generated by SkipNavLink. When the link is clicked or activated via keyboard, the focus shifts to the content encapsulated by SkipNavContent. When using a custom id with SkipNavLink, you'll need to ensure that the same id is utilized with SkipNavContent. SkipNavContent generates a <div> and can be employed as a self-closing component or used to wrap the main content.

These components can be imported as follows:

In terms of usage, the SkipNavLink should ideally be one of the first items a user comes across when they start navigating a page after it has loaded. As such, it's best to position this component as high as possible within the application. This component generates an <a> tag and automatically creates a link with an href attribute pointing towards SkipNavContent.

On the other hand, SkipNavContent is employed as the target for the link, setting the keyboard focus onto the first piece of main content. This component generates a <div> and can either be self-closing or wrap around the main content.

<div>
  <SkipNavLink>Skip to content</SkipNavLink>
  <App />
</div>

// Inside another component, like App
<div>
  <SkipNavContent />
  // The main content follows
</div>

The above code is an illustrative example of using the SkipNavLink andSkipNavContent. You can assign a custom id value using the id prop. However, make sure to use the same id for both the SkipNavLink and SkipNavContent components, ensuring they correspond to each other.

<SkipNavLink id="custom-id">
    Skip to content
</SkipNavLink>
<SkipNavContent id="custom-id" />

created with love by the I♥️Components team using

Chakra-UI Remix

Special thanks to Stefan Bohacek / Generative Placeholders.