Role and semantics
Section titled “Role and semantics”Link is a native <a href> element with the link role. If href is removed because it is unsafe, the element loses the link role; treat this as a bug and fix the href value.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves focus to the link. |
| Enter | Goes to the destination. |
On keyboard focus a 2 px color-focus-ring ring appears 2 px outside the text (focus-visible). The ring has radius-xs (4 px) corners.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
<Link href="/terms">Terms of use</Link> |
“Terms of use, link” |
With external |
“Documentation (opens in a new tab), link” |
The icon is decorative and not read; the hidden text carries the new-tab note.
Contrast
Section titled “Contrast”color-text-link has at least 4.5:1 contrast on the page background. The underline of an inline link tells it apart from the surrounding text by more than colour.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Link meets it | What the product team does |
|---|---|---|
| 1.4.1 Use of colour | An inline link is always underlined. | Do not use standalone inside running text. |
| 2.4.4 Link purpose | The text names the link. | Write text that says where it goes. |
| 3.2.5 Change on request | external announces the new tab in advance. |
Open a new tab only for external sources. |
| 2.4.7 Focus visible | focus-visible ring. |
Do not remove the ring. |