Skip Link pattern

[bhoppers2008]

Skip Link Component Specification

1. Component Overview

The Skip Link component provides a way for users to quickly navigate to the main content of a webpage, bypassing repetitive navigation links. This is particularly useful for users who rely on keyboard navigation or screen readers.

2. Requirements

• Accessibility: The component must be fully accessible, adhering to WCAG 2.2 guidelines.
• Visibility: The skip link should be visible when focused and hidden otherwise.
• Keyboard Navigation: The skip link should be the first focusable element on the page.
• Customizability: The text and target of the skip link should be customizable.

3. Design Specifications

• Text: Default text should be "Skip to main content".
• Position: The link should be positioned at the top of the page, but off-screen by default.
• Focus State: When focused, the link should become visible and positioned at the top of the viewport.
• Styling: The link should have a clear visual indication when focused (e.g., a border or background color change).