Design
Design research and rationale
Our design of this component was informed by best practice research, adherence to Web Content Accessibility Guidelines (WCAG) 2.2 and comparative reviews of other government design systems (including GOV.UK Design System, NSW Design System and the Agriculture Design System).
A link and not a button
To maintain the distinction and user experience expectation that 'links go places, and buttons do things', we've used the text link component. This provides the appropriate styles and states required.
Visibility approach
Industry convention heavily favours a 'visually hidden until focused' approach. While a recent accessibility audit noted permanently visible skip links as an advisory suggestion, WCAG 2.2 Success Criterion 2.4.1 (Bypass Blocks) (Level A) does not strictly require them to be visible at all times.
In alignment with common convention and Jakob's Law, we have opted to maintain the 'visually hidden until focused' standard. This approach keeps the visual design clean and uncluttered for mouse or touch users while ensuring the component remains accessible to keyboard and screen reader users.
Structure and positioning
Despite floating skip links being prevalent across the industry, structuring it as a block-level element is the most accessible approach simply because it does not obstruct any content beneath.
To maintain our established left-to-right, top-to-bottom reading flow, the component appears at the top left of the screen. On wide screens, it is kept horizontally aligned to main content grid to avoid it going unnoticed if placed to the far left away from other content.
One at a time
When implementing multiple skip links, the design dictates a sequential (one at a time) display approach rather than an inline (all shown) approach.
On smaller viewports, displaying multiple links inline risks line-wrapping and consumption of valuable vertical screen space. A sequential display keeps mobile real estate usage minimal. Showing only one focused action at a time also helps to keep the interface uncluttered, reducing visual noise and cognitive load for the user.
By choosing the sequential approach, we acknowledge that sighted users must press the tab key to discover subsequent bypass options.
Colour
The skip link matches the background colour of the pre-header (default, dark or dark-alt). This maintains visual cohesion and prevents adding additional colour banding (or 'zebra striping') across the top of the viewport. To provide prominence and distinction, we applied a horizontal bottom border. This creates separation between the areas and provides a neat, unified finish alongside the menu and search button borders on smaller viewports.