Skip link
Skip link provides a way for users to bypass blocks of content that are repeated on multiple web pages and navigate directly to the main content.
When to use
Use the skip link component when:
Your website has a complicated navigation structure or repeated content blocks at the top of each page
You need to help keyboard and screen reader users navigate more efficiently
You want to ensure your website conforms to accessibility standards regarding keyboard navigation
You want to improve the user experience for people who cannot use a mouse
When not to use
Do not use the skip link component when:
Your website has a very simple structure with minimal navigation
The main content is immediately accessible without needing to tab through multiple elements
You're implementing an alternative navigation system that already provides efficient keyboard access
Best practice guidelines
Visibility: Make the skip link visible when it receives keyboard focus. Hidden skip links that don't appear on focus create accessibility barriers for sighted keyboard users.
Placement: Position the skip link as the first focusable element on the page, before the header and navigation.
Descriptive text: Use clear, action-oriented text that explains where the link will take the user (e.g., "Skip to main content").
Targeted destination: Ensure the skip link points to a valid target with an appropriate ID that exists on all pages.
Styling: Style the skip link to be visually distinct from other page elements when visible, with sufficient contrast and recognisable as a link.
Multiple skip links: For complex sites, consider providing multiple skip links to different sections (e.g., "Skip to navigation", "Skip to footer").
Testing: Regularly test skip links with keyboard navigation and screen readers to ensure they function correctly across browsers.
Variations
The CivicTheme skip link component offers two primary variations:
Desktop view: The skip link appears as a full-width block element at the top of the page when it receives keyboard focus, making it highly visible to keyboard users.
Mobile view: On smaller screens, the skip link maintains its functionality but is sized appropriately for mobile viewports.
Accessibility
According to the 'CivicTheme v1.7.0 Accessibility Assessments' file, the Skip Link component has been assessed against WCAG 2.2 standards with the following results:
1.3.1 Info and Relationships (Level A)
Pass
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
1.4.4 Resize text (Level AA)
Pass
Text is still visible and readable when resized to at least 200%.
2.1.1 Keyboard (Level A)
Pass
Elements are accessible using a keyboard only.
2.1.2 No Keyboard Trap (Level A)
Pass
There are no keyboard traps when navigating using a keyboard.
2.4.1 Bypass Blocks (Level A)
Pass
A skip link is available to bypass blocks of content that are repeated on multiple Web pages.
2.4.3 Focus Order (Level A)
Pass
Focus Order is correct when navigating using a keyboard.
2.4.7 Focus Visible (Level AA)
Pass
Focus is visible when navigating using a keyboard.
3.2.1 On Focus (Level A)
Pass
When a skip link receives focus, it does not initiate a change of context.
3.2.2 On Input (Level A)
Pass
Selecting a skip link does not change the context of the content without notifying the user.
3.3.2 Labels or Instructions (Level A)
Pass
Detailed labels or instructions are provided when a field requires user input.
3.3.3 Error Suggestion (Level AA)
Pass
If an error is detected then a suggestion(s) are provided to the user to correct.
4.1.2 Name, Role, Value (Level A)
Pass
For all elements the name and role can be programmatically determined.
1.3.5 Identify Input Purpose (Level AA)
Pass
Each input field has a label and an associated id.
1.4.12 Text Spacing (Level AA)
Pass
Text is visible/readable when line spacing, paragraph spacing, letter spacing and word spacing are adjusted.
2.5.3 Label in Name (Level A)
Pass
For fields that contain labels the name contains the text that is presented visually.
2.5.8 Target Size (Minimum) (Level AA)
Fail
The size of the target for pointer inputs does not meet the minimum 24 by 24 CSS pixels requirement.
The component successfully passes most WCAG 2.2 criteria but fails on the Target Size requirement. This should be addressed in future versions of the component.
Security
No specific security considerations have been identified for the Skip Link component as it is a client-side navigation element that does not process or store data.
Component inspiration and uplift
This component has been modelled after the Skip Link component in the former Australian Government Design System (AGDS).
CivicTheme has uplifted the Skip Link component in the following ways:
The Skip Link component is featured as a block element at the top of the page, rather than a smaller, contained element that floats over the page.
This approach provides more visibility and draws user attention to the link when it receives focus.
The component has been reclassified from a Molecule in the AGDS to an Organism in CivicTheme, recognizing its importance in the overall page hierarchy.
User research on this component
★★★★★ Confidence rating = Very high (Informed by research with end users and industry best practices)
The Skip Link component has been thoroughly researched as it's a fundamental accessibility component widely implemented across government websites. Research has been conducted through:
Accessibility testing with screen reader users
Keyboard navigation testing with users who cannot use a mouse
Standards compliance testing against WCAG guidelines
Key findings from research indicate that:
Skip links are essential for keyboard and screen reader users to navigate efficiently
Skip links should be visible when focused to benefit sighted keyboard users
The placement as the first focusable element ensures maximum utility
Clear, action-oriented text helps users understand the link's purpose
The component has been refined based on this research to ensure it meets the needs of all users, particularly those with disabilities who rely on keyboard navigation.
Known issues
Target size: As noted in the accessibility assessment, the component fails the WCAG 2.2 requirement for minimum target size (2.5.8). The target area should be increased to at least 24 by 24 CSS pixels.
Focus management: In some implementations, focus management issues may occur where focus is not properly set to the target content area after activating the skip link.
Browser compatibility: Some older browsers may have inconsistent behavior with the focus visibility of the skip link.
More research needed
Additional research could be beneficial in the following areas:
User testing with individuals using various assistive technologies to ensure the skip link functions effectively across different setups
Testing the effectiveness of multiple skip links for complex page layouts
Research on optimal focus management techniques when users activate the skip link
Investigation into the most effective visible styling for skip links that balances visibility with aesthetics
If you have conducted user research in these areas, please consider submitting your findings to help improve this component.
Help improve this component
To help make this component useful and up-to-date, you can:
Contribute to our skip link component discussion on GitHub
Submit your user research findings to help improve the skip link component
Propose a change to the skip link component to address known issues, particularly the target size failure
Report any bugs or issues encountered when implementing the component
Check out our contributing section to learn more.
Resources
Storybook
GitHub
References
Web Content Accessibility Guidelines (WCAG) 2.2, Bypass Blocks (2.4.1)
Digital Service Standard Criterion 3: Leave no one behind
Nielsen Norman Group, "Skip Navigation" Links
WebAIM, Skip Navigation Links
Changelog
1.8.0
23 Jul 2024
Recategorised from Molecule to Organism
1.7.0
20 Mar 2024
Updated for WCAG 2.2 compliance
1.6.0
[Earlier date]
Initial implementation
Contact us
If you have a question about the CivicTheme design system or need our help, visit the Getting Help page for guidance.
Last updated
Was this helpful?