Skip to main content

Creating links in Typecase

How to add clear, accessible, and functional links to web pages on the University website.

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

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.

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:

  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.

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:

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 page
  • https://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:

  1. 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.
  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 and easy to copy if a new email doesn't open

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.

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:

  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 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.

Contact us

If you have any questions about using Typecase or creating content, get in touch.

On this page