Skip Link
About
A Skip link component is a navigation component that allows people using keyboard, screen readers, switch controls and other assistive technologies to navigate to the main content easier and faster.
Implementing a Skip link component is mandatory when a webpage has blocks of content, that are repeated on multiple pages before the main content.
Anatomy
A Skip link component consists the following elements:
- Container
- Text button
- Default focused state
When to use
Each webpage that has blocks of content, that are repeated on multiple pages before the main content, needs to have a Skip link component implemented in order to be accessible. Currently, it allows for one text button that allows to skip to the main content.
When not to use
There’s no need to implement a Skip link component in a mobile or desktop app.
How to use
A Skip link:
- Is hidden by default, until it is triggered;
- Appears on top left or top center of the web page;
- Overlays the content of the web page;
- Has a text button in a focused state immediately.
Positioning
A Skip link by default is positioned top center, because in our products we often have a logo top left. In case a different position is needed, the recommendation would be top left first and if that won’t work in your product, you can do a custom positioning between top left and top center.
Top center (default)
Top left
Custom if needed
Keyboard behaviour
Enter - used to skip and go to the main content;
Tab - used to tab through the content before first (e.g., logo, navigation).
Content
Important for code
The Skip link component needs to be added to the code as the first element.
Important for the label
The button needs to have “Skip to” within the label. So, be careful with that when translating as well.
Nesting components
Skip link component uses:
- Text button