Brief: Skip Links v. 0.1 [Variant]

Component type	Skip Links
Document status	DRAFT
Design source (in Figma)	?
Author	@nathan.mckean@reckitt.com (Unlicensed)
Responsible	@Julia Boyarshchikova (Deactivated)

Skip links are the first tabbable item within a webpage and allow users to easily skip past global headers directly to the main content. In some scenarios, additional skip links can point to important items such as accessibility information, non-critical alerts and more.

Use When

You have a global header present on the page between the start of the page and the main content

Don’t Use When

The main content is at the top of the page.

Related/Similar Components

Skips links are very similar to CTAs, Tables of Contents and other links or lists of links in that they click to other destinations, the key difference is that skip links specifically click to the #main section and are invisible until focussed.

Key Content

Item	Type	Notes
Link text	Text	Link text is likely to be supplied from a central dictionary, rather than content editable individually.

Visual Style

TBC Inviqa

Behaviour

The Skip Link (or links) are not visible on screen by default.
Unless blocked by other content layers (e.g. modals etc) which trap focus, the first tab on the page should focus the user on the first skip link, at which point it becomes visible on page in the focus state.
Clicking “Skip to Main Content” will take the user to #main
As a link, it displays hover, focus and active states, but not a visited state.

Editorial

Keep calls to action direct and meaningful e.g “Skip to main content”

Accessibility

Skip links are an answer to accessibility requirements.
Place the skip link as high as possible within the body and outside of the <header> markup itself.
aria-labels should not be needed for links if editorial guidance is followed. If referencing a central dictionary, governance will be in place to reduce risk.

Analytics & Data

None of note

Future Expansion

Possibility to add multiple skip links to a menu - potentially also automated. With the introduction of the “Alert box”, a reference to skipping to the alert box may be more favourable as it will hit in the header, ot the main and shouldn’t be bypassed.

Design System