Skip Links
A skip link is intended for users to be able to access the main content of the page directly without having to navigate other repeated blocks of content like site navigation‘s or advertisement blocks.
Basic Skip Link
A common way of implementing skip links is to create a link as the first interactive element on the page that links to the main content of the page. The link only needs to be visible when it is focused to meet WCAG 2.1. It is however preferable to have the link always visible. This enables for example voice recognition users to target the link. 2 If you do decide to hide the link if it‘s not focused, make sure to only hide it visually and not for assistive technology users. See the hiding elements article for more information. If the link is only visible when it is focused it is also recommended to make the link very visual distinctive, since the link may only be visible for a short amount of time when tabbing through the page. 3
Additional Skip Link Techniques
Another implementation for a skip link can be to not only create one link but multiple links to each major area of the page. This can be helpful for very complex pages with many independent areas. 1 But for most sites one skip link is sufficient. 3 In addition it can be helpful to create a skip link at the beginning of each repeated area to the content immediately after that area. 1 This can be helpful for pages with a lot of content, to make the navigation easier.
When deciding if and which skip link techniques to implement, make sure that each used technique actually improves the usability. Unnecessary links will otherwise only create clutter that decreases usability. 3
Skip Links Versus Alternative Techniques
It‘s important to note that you do not have to implement a skip link to be WCAG 2.1 compliant, if you have another technique implemented. This could for example be using landmarks and a appropriate heading structure to identify the main content. 1 While these techniques are sufficient to meeting WCAG 2.1, they lack native browser navigation support, which is why skip links are still recommended, as long as they are implemented in the way described above. 3
Sources
- W3C: Bypass Blocks (Level A) by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
- W3C: Adding a link at the top of each page that goes directly to the main content area by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
- WebAIM: Skip Navigation Links © WebAIM