Skip link
Usage
A skip link is used to make navigation easier for keyboard and screen reader users by letting them skip navigation.
Behavior
A skip link is hidden off-screen by default. When users navigate to it, it will appear to drop down from the top of the viewport, making it visible for sighted users.
Activating the skip link will hide it again and move the keyboard or screen reader focus to the main content area.
Writing content
The recommended text label for a skip link is “Skip to main content” because it describes where users will go after activating the link. If it’s necessary to adjust the wording, make sure that the text label clearly describes what the skip link will do.
Character count
The recommended maximum character count is listed below and includes spaces.
| Element | Character count |
|---|---|
| Text label | 20 |
Best practices
Number of skip links
The vast majority of pages will need only one skip link, unless it is a very complex page with many repeated elements. The purpose of a skip link is to help users navigate a page more quickly and easily. Adding too many skip links detracts from this goal. If you’d like users to be able to jump from one section to the other, consider using jump links instead.
Main content
“Main content” in a skip link’s text label refers to the content that appears immediately after the navigation. Ensure that users skip only the navigation, or adjust the element's text to give a more accurate description of what will be skipped.
Visibility
To prevent the skip link from being visually distracting, hide a skip link until users navigate to it. The most accessible way to hide it is to position the skip link outside of the viewport, rather than using display: none or the hidden attribute in CSS.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
