Component Library
Bypass blocks - Skip Links
Issue Description
- There is no skip navigation link on the page.
- The skip link does not take focus to the correct location on the page.
Recommendation
Add a "Skip to Content" link at the start of the document hidden offscreen by CSS, and made visible on focus, so it's available to keyboard and screen reader users: <a class="accessible" href="#main"> [Skip to Content]< /a>
- A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
- Provide a way to skip repetitive navigation links. Without skip links, keyboard users must tab through the navigation links to get to page content.Headings and landmarks allow screen reader users to skip navigation, but don't work for other keyboard users.
- Ensure that the target for the link exists and that the link is not hidden with CSS display:none or visibility:hidden.