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).

[mark-tate]

Galao Goal: kickoff, complete by EOS, if we keep it small and we have capacity

[mark-tate]

@ivan-calderon moving this to next sprint, move back to this sprint if you are working on it and don't start unless we can complete EOS

[mark-tate]

Latte Goal: kickoff, complete by EOS, if we keep it small and we have capacity

[ivan-calderon]

Skip link pattern site page shared for review. Kickoff to be scheduled depending of capacity.

[jake-costa]

A11y review complete, some changes are needed, comments have been added to figma Skip link pattern site page.

[dplsek]

Discussed during SOS and concluded on a styling option based on accessibility recommendations.

@ivan-calderon updating design.

[mark-tate]

Lungo Goal: review and decide on whether it will be component ?

[ivan-calderon]

Updates under review. Figma file is including: a draft component, characteristics, accessibility info. Thanks @dplsek and @jake-costa for the feedback!

[mark-tate]

Macc Goal: review and get to a ready for dev

[origami-z]

Mocha: re-reviewer

[mark-tate]

@bhoppers2008

Mocha Goal: review and publish by EOY

[bhoppers2008]

Page has been reviewed and is ready to be published. Action to review Fernanda's PR and assess number of changes. @ivan-calderon

Figma to be reviewed today.

[ivan-calderon]

@joshwooding could you please confirm if skip link is going to be as a component in code due to the benefits of it? I remember you recommended to have this as a component. But we can provide a pattern page documentation too. TY!