Role and semantics
Section titled “Role and semantics”Anchor is a nav landmark, named by the visible title with aria-labelledby, or with aria-label under hideLabel. The links sit in nested lists; the link of the section being read carries aria-current="location".
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Move between the links. |
| Enter | Go to the section. |
A link shows a 2 px focus outline drawn inside it. Going to a section scrolls the page; giving the target section tabIndex={-1} moves focus too.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Navigation | “On this page, navigation” |
| Current link | “Commission, current location, link” |
Contrast
Section titled “Contrast”The link text has 4.5:1 contrast with color-text-subtle, and the current border 3:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Anchor meets it | What the product team does |
|---|---|---|
| 2.4.1 Bypass blocks | It links straight to the sections. | Give the sections an id. |
| 2.4.8 Location | The section being read is announced with aria-current. |
- |
| 2.4.11 Focus not obscured | - | Set scroll-margin-top for a fixed top bar. |