Anchor navigation

Requirements

Users should be able to:

• Navigate to anchor links using a keyboard or other assistive technology.
• Activate anchor links that take them to corresponding sections of the page.
• Understand the destination of anchor links through clear, descriptive link text.

Interactions

• This component uses links, not buttons.
• Links are used to navigate a user to a destination, or skip to sections of content on a page.
• Buttons are used to perform actions within a page.

Keyboard interactions

• Tab. Moves focus from the previous interactive element to the first link in the anchor navigation.
• Pressing tab again moves focus to the next link in the anchor navigation.
• Pressing tab on the last link in the anchor navigation moves focus to the next interactive element on the page.
• Enter. Activates the selected link.
• Activating a link should pull focus to the related page heading. 
• However, the focus indicator should not be present as a heading is not an interactive element. 

Design considerations

• The link text must match the heading that it relates to.
• The active bar indicator must meet the minimum contrast ratio of 3:1 against the background.

Development considerations

• The anchor navigation should be wrapped in an unordered list contained within a .
• Links should be contained within individual    elements.
• The navigation element should have an appropriate accessible name that describes its purpose and differentiates it from other navigation elements on the page.
• Use native elements for in-page navigation.
• Ensure the id of the target element is unique and descriptive.