A link at the top of the page that visually appears on the first keyboard tab into the page. This link allows anyone using keyboard-only navigation, switch controls, a screen reader or other forms of assistive technology to jump over the navigation links and land on the main content of the page. Most beneficial to the the physcially disabled community as there is no other way to skip to the main content with keyboards, switch devices, and other mechanisms, while screen reader users can use landmarks, headings, and other shortcuts to jump down the page.
When to use this component
- Always provide on a website or digital product so that people can skip over the banner landmark content.
When not to use this component
- Not applicable.
Accessibility and Usability
- The skip to main link should always be reachable on the first tab into the page and should visibly appear for sighted users.
- You must have both a banner landmark and a main landmark.
- Add the skip to main content link to the banner landmark with an anchor to the main landmark. You must assign the main landmark an ID of “main” for the anchor to work.
- Use CSS to hide the skip link until it receives keyboard focus (using absolute positioning and overflow:hidden) and use CSS to show it when it receives keyboard focus by assigning a static position.