Links are a combination of clickable text and a URL.
# Description
Text links should be coloured blue and with bold text (as well as underlined on web), to provide a clear visual indicator and best affordance for clickability, whilst also aiding accessibility.
URL links can be used by users to navigate to a new page in web (or in-app content on apps). In-page links are used to help users navigate through in page content or sheets that don't require a new page.
# Must include
Label - to communicate what the user is being linked to.
# Rules
- When writing links, be specific about the destination of the link when clicked.
- Use descriptive links to aid usability by explaining clearly where the link will take the user. Avoid generic copy such as 'click here'.
- Avoid placing links close together to ensure usability for all users.
- On apps, convention usually dictates that the whole field is clickable where a link is present. Avoid including multiple links in one area of text.
- Text links should be lower in the hierarchy on the page compared to buttons as they are usually take on less importance.
- Don't underlined any non-link text that is not a link.
# To consider
- Clear colour contrast for links between the background and text.
- Consider using a different variant (or shade) of same colour for a link that user has already visited/interacted with to clearly show they are related.
- Consider content length when assessing whether to use an anchor link.
- Use anchor links for error summary to take user to affected field on the page.
# Accessibility
- Use suitable affordance of space (at least 56px) for clickable links to ensure usability for all users and avoid using links on subsequent lines in a body of text.
- Provide a clear colour contrast for links against the background to make sure they are readable to those with a visual impairment such as colour blindness.
- Provide clear, descriptive link text so that users using assistive technology can identify the purpose of the link without needing additional context.
- Links in a body of text should be bold, ensuring sufficient contrast (4:5:1 ratio to the background), to signify they are clickable links and not non-link text. Colour Review provides clear guidelines on contrast for accessibility.
- Avoid using links containing a small character count. This is to provide a large enough target for users with motor and/or visual impairments to click or tap on.
- Link text description should be consistent with the page that the user lands on.
- Use succinct, readable text descriptions for links instead of long URLs as these are not screen-reader friendly.