This page is in progress -
Why This is Important
A skip link allows screen reader and keyboard users to skip navigation and go to the main content.
Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.
Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.
Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.
In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.
For screen reader and keyboard users, having to tab through repeating content (such as the navigation) on every single page gets very tedious. A skip link is the most common solution to provide a way to skip the navigation so that they can quickly access the main content.
This references WCAG criterion 2.4.1 Bypass Blocks (Level A).
Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.
How to Implement This
Skip link
The skip link is usually invisible to sighted people until the focus moves onto it. By pressing enter on the skip link, the user can skip past the navigation to the main content. To experience an example, click on the url of this website and press tab.
Use CSS in order to hide the skip link and make it visible only on focus.
HTML code snippet:
<a href="#main" class="visible-on-focus">Skip to main content</a>
CSS code snippet:
.visible-on-focus {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.visible-on-focus:active,
.visible-on-focus:focus {
position: relative;
width: auto;
height: auto;
left: auto;
}
While it's an option to keep the skip link visible at all times, this tends to make the webpage header more cluttered and is potentially confusing.
Depending on what the content is and if there are multiple locations on the page that the user would want to skip to, there can be multiple skip links, such as skip to second menu, skip to content, etc.
Interesting further reading
The following websites all have great examples of skip links. Some are more noticeable while others are more subtle. Change tab focus from the web address and then the skip link will appear.
How to Test This
- On desktop, check for the skip link using an automated tool such as the IBM Accessibility Checker. You can also start from the address bar and manually press tab.
- On mobile, use the device screen reader such as VoiceOver on iOS or TalkBack on Android. Make note if the skip link is not present.
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.