SkipLink
Skip links improve accessibility for keyboard users, allowing them to quickly navigate within a page and bypass certain sections.
Press tab to see the SkipLink.
Usage
import { SkipLink } from "@caesars-ui/core"
The SkipLink component helps control the navigation for keyboard users when tabbing through a site. It's purpose is to give a user the chance to skip an entire section of the page (imagine having to go through every option in a long list before being able to proceed).
Skip links should be used primarily on what would be considered "sections" of the site, anything marked by a role="section",
or <section> tag, or any other large blocks of grouped elements.
Properties
* indicates required.
Accessibility
Principle
Status
Description
Percievable
Ready
The Skip Link component ensures that users can perceive the option to skip to specific content. It is styled to be clearly visible when focused, ensuring that it is noticeable against the background.
Operable
Ready
The component is operable using a keyboard by focusing on the link, which allows users to activate it to skip to the designated section of the page. It also supports mouse interactions, making it accessible to users with various input methods.
Understandable
Ready
The link's purpose is clearly communicated through its label and position. The label dynamically reflects the destination, such as "Skip to Main Content," making it easy for users to understand where they will be redirected.
Robust
Ready
The Skip Link component is designed to work across different web browsers and screen readers. It uses standard HTML anchor tags and includes appropriate ARIA attributes, ensuring compatibility and robustness in various environments.