A hidden link that becomes visible with keyboard navigation, allowing users to bypass repetitive page elements.
Examples
Skip to main content is a component which allows users who navigate using keyboard entry to skip the menu and header information and go straight to the main content part of a web page.
Usage
For individuals using screen readers or keyboard navigation, navigating through a website's header, navigation menu, and other repetitive elements on every page can be time-consuming and frustrating. The "skip to main content" link allows them to jump directly to the primary content of the page, facilitating a more efficient and user-friendly experience.
This should always be included as part of the master template.
Do:
make sure it appears on every page
make sure that the link is accessible and usable via keyboard navigation, and that it follows a logical tab order
test the skip link with popular screen readers to ensure it functions as expected and provides a smooth experience for users with disabilities
Avoid:
having multiple skip links that go to different destinations on the page skipping to the main content should be sufficient
ignoring user feedback, if users report issues with the skip link, address them promptly to ensure a positive user experience
<a class="visually-hidden-focusable" id="skipcontent" href="#maincontent">Skip to main content</a>
Optional parameters
No optional parameters
Accessibility status
This component is fully compliant with the WCAG 2.2 standard.
Testing
check keyboard navigation to ensure the skip to main content link is in an expected tab order and doesn't cause a keyboard trap
check all interactive elements within the skip to main content link are accessible with a keyboard meaning that you can activate it with using enter and return keys
make sure focus is visible
test skip to main content with screen readers to ensure they are announced as expected
Developer considerations
make sure to use the <a> element and not a <span> or <div> element as this will additional JavaScript code to get the keyboard functions to work properly!