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

Make your links accessible

You must make sure every link you add to the website is accessible to all users. This means that anyone should be able to use any link using any device.

We create accessible links by writing descriptive link text, which appears as highlighted or underlined text that users can click or tap on to activate the link. This makes it clear to people reading the website what the link is for and allows screen readers and other assistive technology to read the description of the link instead of the URL character-by-character.

Write descriptive link text

You must write link text that explains what the user will learn about or get to do when they click or tap on that link. This applies to any type of link you create, including email and phone links.

You must also 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, people using screenreaders could find it hard to navigate around the page.

You should use link text that makes sense to the reader as a standalone phrase.

Examples of good link text include:

• Tell us if you're self-isolating 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

Creating links to other web pages

To create a link to another web page:

1. Put square brackets around the text you want to link from.
2. Put round brackets around the destination URL.

Don't leave a space between the square brackets and the round brackets.

You can use this Markdown to create a link to a web page on bath.ac.uk or another website.

If the page you're linking to is in Typecase, don't:

• use a preview page URL - if you do, the link will break when you publish the page
• include 'https://www.bath.ac.uk' - the resulting link is called a relative link

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:

• food and drink outlets
• read students' blog posts
• Find out about benefits and financial support

Why we use relative links between Typecase pages

Using a relative link lets you connect to the preview and the published versions of a page. This can be useful when you are working on several related pages at once.

For example, the relative link /professional-services/food-and-drink/ connects to both:

• https://preview.bath.ac.uk/professional-services/food-and-drink/ - the preview page URL and
• https://www.bath.ac.uk/professional-services/food-and-drink/ - the published page URL

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 using the in-page navigation on this Guide.

In Typecase, you can only create an anchor link to a section heading on a Guide 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:

1. Copy the anchor link from the destination page - if the destination is a Typecase Guide, click the section you want to link to in the in-page navigation on that page, then copy the link from your browser's search bar.
2. Put square brackets around the text you want to link from.
3. 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

To create a link to an email address:

1. Put square brackets around the email address.
2. Put round brackets around 'mailto:' followed by the email address again.

Don't leave a space between the square brackets and the round brackets.

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

To create a link to a phone number:

1. Put square brackets around the phone number.
2. 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 also install an extension on your browser to help you check that all the links on a preview page work, for example, Check my links for Google Chrome.

Don't rely on tools like this, however. It's up to you to make sure your links work and go to the correct destination page.