Accessibility
Accessible in page navigation requirements
Keep these considerations in mind if you're modifying the Design System or creating a custom component.
In-page contents can be a useful way to skim the page by providing an outline for the user. Usually it should be contained in a navigation landmark, so it can be easily discovered.
WCAG Guidelines
2.1.1 Keyboard navigation
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. The navigation component is fully operable using the keyboard.
2.4.1 bypass blocks
In-page nav should be implemented within a <nav> element featuring an aria-label attribute to enhance discovery and comprehension by assistive technologies, thereby improving website accessibility.
2.4.3 focus order
If a web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. The links in the navigation component should receive focus in the order they appear. After activating the link, the keyboard focus has moved to the main content.
2.4.4 link purpose (in context)
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context. The text of each link in the navigation component clearly describes the section it links to.
2.4.6 headings and labels
Headings and labels describe topic or purpose. The heading "On this page" clearly describes the purpose of the navigation component.
4.1.2 name, role, value
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. The aria-label attribute provides a name for the navigation component, and the role of the component is clear from the use of the <nav> element.