A skip link is a link located at the beginning of the page and that allows the user to jump directly to certain blocks (main content, main search, important asides...) without having to go through all the previous elements that are repeated throughout of the entire site (logo, main navigation...).
It is especially useful for users who navigate with the keyboard, and it can also be an aid for those who navigate using headings or landmarks.
There are several rules to follow to build a good skip link:
- It must be the first focusable element on the page.
- May or may not be visible to all users all the time.
- If it is hidden from startup, it should be visible when you receive the keyboard focus.
- Must be an internal link (starting with
#). - When clicking on it, the focus should move to the target element. For greater security in this behavior, it is better to add
tabindex="- 1"to that target element and thus make it focusable.
Although all content should be contained in a landmark region, the skip link can be located outside of any landmark. Some validators will flag it as a warning but it is not a violation of the WCAG.
You can see some examples of skip links on the British Government page or on Wikipedia. Try navigating with the keyboard from the address bar and see how it behaves.
Top comments (0)