Skip link
Use the skip link component to help keyboard-only users skip to the main content on a page.
When to use this component
All pages must include a skip link. Usually, you should place the skip link immediately after the opening <body> tag. However, if you’re using a cookie banner, place the skip link immediately after the cookie banner.
Some automated accessibility testing tools may warn that the skip link element is not inside a landmark. This warning does not apply to skip links, so you can ignore it. Do not wrap the skip link in a <nav> region, or move it inside the header.
How it works
Some people use the tab key on their keyboard to navigate through the links and form elements on a web page.
Including the skip link component gives users the option to bypass the top-level navigation links and jump to the main content on a page.
The skip link component is visually hidden until a keyboard press activates it.
There are 2 ways to use the skip link component. You can use HTML or, if you are using Nunjucks, you can use the Nunjucks macro.
Get the Nunjucks macro for this example from the Camden Frontend library
Research on this component
This component is based on the skip link component from the GOV.UK Design System.
You can take part in the ‘Skip link’ discussion on GOV.UK’s Design System’s GitHub and share your research.