The “skip to content” link is a jump link that sends the user to the main content of a page. This is helpful for people who use screen readers to access pages. This link appears when a keyboard is used to navigate through a site, and allows the user to bypass header information such as navigation and go directly to the page content.
Example
Design Considerations
Because this link is intended for people who use keyboard-based navigation, the “skip to content” button should otherwise be hidden. Once a user presses the “tab” key to navigate, this button will appear.
This button should never be an image. It should always be properly coded so that the words “Skip to content” will be detected and read by a screen reader.
In regards to its appearance, the button was specifically designed to be white with a drop shadow to improve visibility as it rests on top of the header. A red link is used to indicate clickability.
Best Practices
- Use the “skip to content” link to improve accessibility.
- “Skip to content” is especially useful when there are many elements in a header that a user with accessibility issues would otherwise need to “tab” through before accessing page content.