CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
    • Atoms
      • Button
      • Chip
      • Content link
      • Check box
      • Field description
      • Field message
      • Fieldset
      • Label
      • Radio
      • Select
      • Textarea
      • Text field
      • Heading
      • Link
      • Paragraph
      • Popover
      • Quote
      • Table
      • Tag
      • Text list
    • Molecules
      • Accordion
      • Attachment
      • Breadcrumb
      • Callout
      • Event Card
      • Field
      • Figure
      • Group filter
      • Logo
      • Map
      • Navigation card
      • Next step
      • Pagination
      • Promo card
      • Search
      • Service card
      • Single filter
      • Snippet
      • Subject Card
      • Table of Contents
      • Tabs
      • Tag List
      • Tooltip
      • Video Player
    • Organisms
      • Alert
      • Banner
      • Campaign
      • Footer
      • Header
      • List
      • Message
      • Mobile Navigation
      • Navigation
      • Promo
      • Side Navigation
      • Skip link
      • Slider
      • Social links
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • When to use
  • When not to use
  • Best practice guidelines
  • Variations
  • Accessibility
  • Security
  • Component inspiration and uplift
  • User research on this component
  • Known issues
  • More research needed
  • Help improve this component
  • Resources
  • References
  • Changelog
  • Contact us

Was this helpful?

Edit on GitHub
Export as PDF
  1. Components
  2. Organisms

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:

Standard
Status
Description

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:

  1. Skip links are essential for keyboard and screen reader users to navigate efficiently

  2. Skip links should be visible when focused to benefit sighted keyboard users

  3. The placement as the first focusable element ensures maximum utility

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


Resources

  • Storybook

  • GitHub

References

Changelog

Version
Date
Changes

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

PreviousSide NavigationNextSlider

Last updated 1 month ago

Was this helpful?

Check out our to learn more.

Web Content Accessibility Guidelines (WCAG) 2.2,

Digital Service Standard Criterion 3:

Nielsen Norman Group,

WebAIM,

If you have a question about the CivicTheme design system or need our help, visit the page for guidance.

contributing section
Figma
Bypass Blocks (2.4.1)
Leave no one behind
"Skip Navigation" Links
Skip Navigation Links
Getting Help