Links to phone numbers and email addresses
On this page
- Links to phone numbers and email addresses for Jadu users
- Links to phone numbers and email addresses for WordPress users
- Links to phone numbers and email addresses for Word users
- Links to phone numbers and email addresses for SharePoint users
Overview
When linking to a phone number or email address there are three keys:
- The clickable link text should make it clear what the link will do and who or what will be contacted via link.
- Show the phone number’s digits or the ‘bare’ email address.
- Ensure the URL address field for the link contains the prefix ‘tel:’ before the full phone number or ‘mailto:’ before the email address.
For example, an ideal email link would be as follows:
Email the Student Services Centre via ssc@leeds.ac.uk
What and why: When a screen reader calls out link text of only a phone number or email address, it can be hard for a user to tell who or what they would reach via that sequence of numbers or address. The link text should make this clear and provide easy access to the phone number or email address for copying to another app/program or device. Applying a link to email addresses and phone numbers retains one-touch usability for many people.
Alternative approaches
Site and content owners should always first try to use the ideal approach to linking to email addresses and phone numbers. This is our 'gold' standard. However, there is a 'silver' approach that is less helpful for your audience but still compliant.
Gold standard
The link action, recipient and email address or phone number are all in the link text. For example:
Email the Student Services Centre via ssc@leeds.ac.uk
This approach is the most useful and compliant way to display email and phone links.
This makes it clear what selecting the link will do (it will create an email) and what will be contacted (Student Services Centre). It also shows the bare email address (ssc@leeds.ac.uk) so someone can type or dictate that address into another device or application if they don't want to use the link. Finally, 'mailto:' is used at the start of the URL field so that the link creates a new email in someone's chosen email platform.
Silver standard
In cases where there may be concerns about the length of the link text becoming too long if the gold standard is followed, it's acceptable to remove the bare phone number or email address from the link text only if this is placed immediately after the link text in parentheses. For example:
Email the Student Services Centre (ssc@leeds.ac.uk)
Presentation
Email and phone links should have consistent presentation so all users have a simple and predictable experience across the University’s web estate.
When email and phone links for contacting the same person or thing are shown together, they should be placed in a bulleted list and be cued with the terms ‘Phone:’ and ‘Email:’. For example:
You can contact the Student Services Centre via:
- Phone: Call the Student Services Centre on +44 (0)113 3438877
- Email: Email the Student Services Centre via ssc@leeds.ac.uk
Return to the top of the page.
How to
Links to phone numbers and email addresses for Jadu users
The University web estate currently has a mix of Jadu types. Setting links to phone numbers and email addresses works slightly differently in each.
Linking to phone numbers
How to link to a phone number in older versions of Jadu
- Select the descriptive text and phone number you want to use as the link.
- Select the link icon in the editor toolbar.
- In the ‘Web or Email Address’ field, write ‘tel:’ and then the phone number that should be dialled. For example, ‘tel:+441133438877’.
How to link to a phone number in Jadu Continuum
Note: This process may not be possible in all versions of Jadu Continuum used in the University at this time.
- Highlight the descriptive text and phone number you want to add a link to and go to the Jadu toolbar and select the 'Insert Telephone Link' icon .
- In the ‘Telephone Link Properties’ pop-up window, add the descriptive text and telephone number details in the ‘Number as displayed on website’ field and the number to the ‘Link number’ field and press the ‘OK’ button.
Linking to email addresses
How to link to an email address in older versions of Jadu
- Select the descriptive text and email address you want to use as the link.
- Select the link icon in the editor toolbar.
- In the ‘Web or Email Address’ field, enter the email address you want to link to. For example, ‘ssc@leeds.ac.uk’.
How to link to an email address in Jadu Continuum
- Highlight the descriptive text and email address and go to the link icon on the page editor toolbar.
- In the ‘Link’ pop-up window set the ‘Link Type’ drop-down to ‘Email’. Add the email address in the ‘Email Address’ field.
Return to the top of the page.
Links to phone numbers and email addresses for WordPress users
How to link to a phone number in WordPress
- Highlight the descriptive text and phone number and select the 'Link' button in the toolbar.
- Select the 'Link options' button, which looks like a cog.
- In the 'URL' field type in 'tel:' followed by the phone number, eg tel: +44113 3438877.
How to link to an email address in WordPress
- Highlight the descriptive text and email address and select the 'Link' button in the toolbar.
- Select the 'Link options button, which looks like a cog.
- In the 'URL' field type in 'mailto:' followed by the email address, eg mailto: webcomms@leeds.ac.uk
Return to the top of the page.
Links to phone numbers and email addresses for Word users
How to link to a phone number in Word
- Highlight the descriptive text and phone number and select the ‘Link’ button in the ‘Insert’ tab of the toolbar, or right-click and select ‘Link’.
- In the ‘Text to display’ section, keep the descriptive text and ‘bare’ phone number displayed as on the page.
- In the ‘Address’ field, write ‘tel:’ followed by the phone number to dial. For example, ‘tel: +441133438877’.
How to link to an email address in Microsoft Word
- Highlight the descriptive text and email address and select the ‘Link’ button in the ‘Insert’ tab of the toolbar, or right-click and select ‘HyperLink’.
- Keep the descriptive text and email address in the ‘Text to display’ field.
- In the ‘Address’ field use the ‘mailto:’ prefix before the full email address.
Return to the top of the page.
Links to phone numbers and email addresses for SharePoint users
SharePoint doesn't allow the 'tel:' link type so you cannot set links that will dial a phone number. If you want to share a phone number on a SharePoint site it cannot also be a link.
How to link to an email address in SharePoint
- In a text editor area, highlight the descriptive text and email address and select the 'Hyperlink' button in the toolbar, or press Ctrl+K.
- The 'Insert Link' pop-up has an 'Address' field. Type in 'mailto:' followed by the email address, eg mailto: webcomms@leeds.ac.uk, in this field.
- Select 'Save'.