How we use links in Typecase
In Typecase, you can create links that:
- open a different web page
- take users to a different place on the same web page
- open an email to a particular email address
- dial a phone number from compatible devices
Links appear as underlined text that users can click or tap on to activate the link.
Make your links accessible
You must make sure every link you add to the website is accessible to all users. This means anyone should be able to use any link using any device.
As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).
Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions.
Write descriptive link text
To create accessible links, you must write descriptive link text.
Descriptive link text makes it clear what the link is for. This is particularly important for people using assistive technology, who often navigate pages by moving from link to link and need to understand where each link will take them without any context.
You must write link text that:
- makes sense to the reader as a standalone phrase
- explains what the user will learn about or do when they click or tap on that link
This applies to any type of link you create, including email addresses and phone numbers.
Examples of good link text include:
- Report a maintenance issue in student accommodation
- Find out how we're tackling climate change
- Subscribe to our newsletter
Examples of bad or inaccessible link text include:
- Find out more - this doesn't mean anything out of context or tell the user where the link will take them
- Subscribe - this doesn't tell the user what they're subscribing to
- Click here - this doesn't mean anything out of context or tell the user where the link will take them
Make all links unique
You must write unique link text for every link you add to a page, even if you use the same link more than once.
If you repeat link text, some people, like those using screen readers, could find it hard to navigate around the page because they will hear the same link text multiple times throughout the page.
Make link text concise
Link text should be long enough to convey what users can expect to see if they select it, and no longer.
People who use screen readers can't skim through link text. Creating links out of sentences or paragraphs is an accessibility issue as it forces them to choose between listening to the entire link text or skipping to the next link in frustration and potentially missing important information.
Make email address and phone number links accessible
You must add email addresses and phone numbers as visible link text. Don't hide them behind text like ‘email us’ or 'call us'.
Adding email addresses and phone numbers as link text:
- helps people with visual impairments because assistive technology can tell them the email address or phone number
- lets people copy the email address or phone number, for example, if their email software doesn't open a new email when they click the link
Creating links to other web pages
You can use Markdown formatting to create a link to a web page on bath.ac.uk or another website.
To create a link to another web page:
- Put square brackets around the text you want to link from.
- Put round brackets around the destination URL.
Don't leave a space between the square brackets and the round brackets.
Use a full stop at the end of a sentence that contains a link unless the sentence ends with an email address. This is so people can copy and paste the email address without accidentally copying the full stop.
If the page you're linking to is in Typecase:
- remove 'https://www.bath.ac.uk' from the URL - the resulting link is called a relative link
- don't use a preview page URL - if you do, the link will break when you publish the page
If you're linking to a page outside Typecase, include the full URL.
For example, use:
[food and drink outlets](/professional-services/food-and-drink/)
for a Typecase link[read students' blog posts](https://blogs.bath.ac.uk/students/)
for a non-Typecase link[Find out about benefits and financial support](https://www.gov.uk/check-benefits-financial-support)
for a non-Typecase link
These appear on the web page as:
Why we use relative links between Typecase pages
Using a relative link lets you link from:
- a preview page to a preview page
- a published page to a published page
For example, the relative link /professional-services/food-and-drink/
links to:
https://preview.bath.ac.uk/professional-services/food-and-drink/
from a preview pagehttps://www.bath.ac.uk/professional-services/food-and-drink/
from a published page
Creating anchor links
An anchor link takes a user to a specific heading on a web page, instead of to the top of that page. This heading could be on the same page the user is on or on a different page.
Anchor links are useful for linking to long pages so users can jump directly to sections of interest without having to scroll through all the content.
You can see how anchor links work by clicking a heading in the 'On this page' menu on this page. This menu is called the in-page navigation.
In Typecase, you can create an anchor link from any content type to a section heading on a:
- Corporate information page
- Guide page
- Legal information page
If you create an anchor link to an external web page, test that the link works on the preview page.
To create an anchor link:
- On the page you want to link to, click the section heading in the in-page navigation then copy the link from your browser's search bar.
- Put square brackets around the text you want to link from.
- Put round brackets after the square brackets and paste the link into the round brackets.
Don't include a slash (like this /) at the end of the URL. Don't leave a space between the square brackets and the round brackets.
For example, on the Guide 'Communicating your messages to students', you could link to the section about social media by using:
[social media](/guides/communicating-your-messages-to-students/#social-media)
Creating links to email addresses
When you add an email address to the body copy of a page, make sure you:
- add it as a link so users can click on the address to open a new email
- use the email address as the link text so it's accessible for people using screen readers and easy to copy if a new email doesn't open
To create a link to an email address:
- Put square brackets around the email address.
- Put round brackets around 'mailto:' followed by the email address again.
Don't leave a space between the square brackets and the round brackets.
Don't use a full stop if the email address is at the end of a sentence.
For example:
[web-support@bath.ac.uk](mailto:web-support@bath.ac.uk)
Creating links to phone numbers
When you add a phone number to the body copy of a page, make sure you:
- add it as a link so users can click on the number to dial it
- use the phone number as the link text so it's accessible for people using screen readers and easy to copy off the screen for people not on a mobile
To create a link to a phone number:
- Put square brackets around the phone number.
- Put round brackets around 'tel:' followed by the phone number again.
Don't leave a space between the square brackets and the round brackets.
For example:
[01225 388388](tel:01225388388)
Make sure you know how to write phone numbers for different audiences on the website.
Check your links work
Always check the links on your page in the preview version before you publish it. Ask a colleague to review the preview page as well.
You can install extensions on a variety of web browsers to help you check the links on a preview page work. These include:
While link-checking extensions are available for Microsoft Edge, they are disabled on University computers with the Edge browser.
Don't rely on tools like this. You must make sure your links work and go to the correct destination page.