Skip Link

Guidelines

When to Use

• Use Skip Link to provide keyboard users a method to bypass repetitive content, such as navigation
• Use to optimize accessibility for people who don’t navigate with a mouse.

When Not to Use

• Do not use when the navigation contains fewer than 4 links—the lack of repetitive content makes a bypass redundant.
• Do not use on focused landing pages, such as Sign In or maintenance screens, where the layout is singular and lacks complex navigation blocks.
• Do not use for mobile-specific views where interaction is touch-based; skip links are strictly for keyboard-driven navigation.

Variants

• There are no variants for this component.

States

• Default
  • The default state before the link is focused.
• Focus
  • The web focus ring or highlight should be a 2px offset outline. The browser’s default focus ring or highlight appears when the user has tabbed to the skip link. The blue focus ring shown here is for placement only.

Content

• Link text should be descriptive, meaningful and clearly indicate the link’s destination, e.g. “Skip to Main Content”.
• Users should understand what will happen when they select a link.
• Title case is recommended.

Behavior

• A “Skip” link appears before a keyboard user tabs into the repetitive content.
• The skip link should be the first element to appear when a keyboard user selects the tab key.
• When selecting a skip link, it typically navigates the user to the main content of the page.
• The skip link is hidden by default on page load and is only visible when the link receives focus.

Placement

• The skip link appears at the top of the page and anchors to the main content, typically the body of the page.
• The skip link usually appears in the top-left corner. This is the standard safe zone. Users expect accessibility tools to appear at the start of the reading flow (top-left for left-to-right languages).

Structure

• List item

Sizing

• Skip links should have a container width of 320px and height of 40px.

Accessibility

Keyboard Accessibility

[AC1] When focus is on the Skip Link:

• The Skip Link becomes visible on screen.
• The Skip Link has a clearly visible focus indicator.
• Pressing ENTER triggers the Skip Link.

[AC2] When a user selects a Skip Link:

• Focus moves to the next block of content.

Example 1: When a user triggers a Skip to Main Content link, focus should move to the main content container.

Example 2: When a user triggers a Skip Filters link, focus should move to the product search results container.

Screen Reader Output

[AC1] When a screen reader user TABS to a Skip Link:

• Name: The name of the Skip Link is announced.
• Role: The role of “link” is announced.

Example Output: “Skip to Main Content link”

• Name: “Skip to Main Content”
• Role: “link”

Developer Notes

• Skip Links are anchor links that MUST have a valid ID within the href attribute. This ensures that focus properly moves when the link is triggered. The ID that is used as the href should match the ID of the desired component to move focus to.
  • Code Example: <a href=”#mainContent”>Skip to Main Content</a>

In the Wild

Skip link appears in the top left of the screen.