An icon is available in the component to inform users if the link opens in a new window (see properties).
- To allow users to navigate to a different part within the application.
- To allow users to navigate to a different site (make sure to include an icon to inform users).
- For emails or phone numbers
- Do not use links when the user is required to take an action. If there are a long list of actions that the user should choose from, then use the ActionList component. For one or two actions, use the CTA component.
Live example
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
✓ |
How to use it
Writing link text
- Read just the words that you’ve hyperlinked. Do you know what you’re getting?
- Now double check. Are you linking as few words as possible?
- Link just enough text to make it clear where the link leads
- Be clear about what the user will see from the link – if that’s not easy to do, consider formatting it as a secondary instead
- If the link points to a page where a user would take an action, use actionable language for the link
- Don’t link an entire sentence – 5 words maximum
- Don’t have a text link on it’s own outside of paragraph copy
- Don’t use more than one textlink per section of text
Matching our tone of voice
Hyperlinks will follow the tone of the sentence they fall in. Read our tone of voice guidelines for details.
- Link just enough text to make it clear where the link leads
- Be clear about what the user will see from the link – if that’s not easy to do, consider formatting it as a secondary instead
- If the link points to a page where a user would take an action, use actionable language for the link
- Don’t link an entire sentence – 5 words maximum
- Don’t have a text link on it’s own outside of paragraph copy
- Don’t use more than one textlink per section of text
Examples
According to the 2023 Report on Green Energy, switching to a greener grid can help slow climate change.
Download our app to find out the greenest time to use energy.
Find out about OVO plans
Read the PAYG Terms & Conditions
Use our Direct Debit calculator
Choose a plan that suits you
Go green for the planet and your pocket
Plan Zero is our commitment to becoming a net zero carbon business by 2035.
According to the 2023 Report on Green Energy, switching to a greener grid can help slow climate change.
Download our app to find out the greenest time to use energy.
Click here
Find out more
Check it out
Click for more
So, what is Plan Zero?
It’s our commitment to being a net zero carbon business by 2035. We’re doing this by helping our customers half their carbon footprint at the same time.
Properties
|
Name |
Values |
Default |
|---|---|---|
|
opensInNewWindow |
Boolean |
false |
|
... |
JSX.IntrinsicElements["a"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As a keyboard-only user, I want to be able to navigate to the control using the Tab key.
- As a keyboard-only user, I want to be able to activate the link using the Enter key.
- As someone with a cognitive disability, I want to be able to easily understand the purpose of the control.
- As someone with a motor disability, I want to be able to easily select the correct control.
- As a screen reader user, I want to be able to understand the purpose of the control and whether it will redirect me to a page on the OVO site or elsewhere.
Test steps
Use these steps to check that the Text link component has been implemented correctly:
- Turn on a screen reader.
- Navigate to the link using the Tab key.
- Verify that the visible label for the link is included in the name announced by the screen reader.
- Verify that the link can be activated using the Enter key.