Link
Description
The web is based on links. The link or <a> tag connects pages and content with each other.
According to the HTML standard, links and their state are identified by colors. With us, links have the color of the respective text, are marked by the familiar, distinctive underline and the states are indicated by the strength and color of this underline.
Links that leave our site, should open in a new tab/window and have an indicating icon.
Usage
Stick to the standards: A link <a> should clearly indicate it navigates to another page or changes the state of the application; it shouldn't trigger an action like a button does.
Use the correct HTML element: Always use proper anchor elements (<a>) for links for natural keyboard navigation and screen reader identification.
If it's unavoidable to use an atypical element as a link, assign role='link' to ensure assistive technologies can identify it.
Ensure Keyboard Navigability: Links should be focusable and show that focus. It must be actionable with both the Enter key and mouse clicks to ensure full accessibility.
Use clear labeling: Text within links must be descriptive, informing users accurately about the destination or result of following the link. Avoid ambiguous phrases like "click here," opting instead for meaningful text that maintains clarity even when read out of context.
Example
on red
Test link default Test link visited
External link
Test link default Test link visited