Use links to allow users to navigate to another page within the application, navigate to a different site or jump to an element on the current page. Links within paragraphs or other bodies of text should only link the text that describes where users would go when they click the link. Links that aren't in full sentences should be a noun or start with a verb followed by a noun. They should not be punctuated, except if they end with a question mark.
- Give links text that clearly describes their destination or purpose.
- For consistency, use the same text for links that navigate to the same place.
- Use links for actions, such as "Close", "Cancel", or "Save". These patterns are best suited for buttons in most cases.
Try to keep link text short and concise. It should accurately describe what the user can expect when they click the link. Use meaningful text and avoid terms such as "click here" or the URL itself.
When needed, use an aria-label to further clarify the purpose of the link when navigating on the current page.
These appear with an underline and should be used in most cases.
These appear without an underline and are best to use in areas lower in your application's hierarchy such as a footer.
Use the On Background variant when a link needs to be placed over a AAA compliant, colored background.
1.3.1 Info and Relationships
Links allow users to go to different areas of the site or interact with different elements.
Link styling should allow users to see that they are interactive.
- Ex. Underline or some other styling that would allow them to stand out in a paragraph
- Links should be clear even without surrounding context. No vague or naming that is not unique such as "Click here"
<a href="">tag that includes the link in the ""<title="This link opens in a new window">(if applicable) should be added as well
Reads "Link name, Link", "This link opens in a new window"
- Note: the new window message is only if applicable
Enter key: activates the link