What are links?
When talking about links in content, we mean hyperlinks – those which we create highlighting text in the WYSIWYG editor using the ‘link’ option. They can be assigned to visit a site page, file, external URL, email, or telephone. These accessibility rules apply to all of those, and where noted, a few have some more specific things to remember.
Wording of links
Generally speaking, whatever text you are linking should have a clear ‘destination’. It should be obvious where the link will take the user, without the context of anything surrounding it.
It’s easiest to look at some examples for this – let’s say we want to link to the NHS mental health services page, the URL being https://www.nhs.uk/using-the-nhs/nhs-services/mental-health-services/. There see a few ways to do that in content.
1. Click here (avoid)
...if you require further information about the service, click here
In this first example, we have applied our link to the word ‘here’. This follows the trend of working visually, as you can refer to the content preceding for context, relating that to the word ‘here’. However, assistive technologies often take links for what they are – in this case, ‘here’. Screen readers would read this literally as ‘link, here’. Along with methods of keyboard navigation for users without mice, they will often provide their user the option to skip straight to links without reading the content around it. The link is to ‘here’, but without the surrounding content, where is ‘here’? The user does not know where they are navigating too.
2. Title text (avoid unless necessary)
It is possible to make this more accessible by using ‘title' text, which we will follow up with in the next section – but it does not make it the most optimal solution.
…if you require further information about the service visit https://www.nhs.uk/using-the-nhs/nhs-services/mental-health-services/
This example is actually somewhat worse. Although most users generally know how to interpret a written link, some users may not understand that and the content with https:// might almost look broken. Furthermore, screen readers will read the link quite literally, as in ‘h t t p s colon slash slash w w w dot…’. The same idea then applies, in that many people will not be able to properly interpret a pronounced link. This could be frustrating for users with assistive technology.
3. Written destination (use)
…if you require further information about the service, visit NHS mental health services
In this final example, we have written the destination of the link clearly into the content. Linked is the text ‘NHS mental health services’, which is exactly where the user would be going – therefore the destination is clear. Visually we see the words to get a clear destination, and screen readers would pronounce ‘link, NHS mental health services’. If you navigate directly to said link, you do not need any of the content surrounding it to understand the context.
Other links
As noted above, where possible, it is always best to adapt our content slightly to make it clear in the text itself where your link is going. However, that might not always be possible, or you might not feel like you can make it clear enough. For those scenarios, we can make use of ‘title text’.
Title text is separate from but remains tied to the wording itself. It is there for you to expand and provide a clearer destination. It is that small popup you will sometimes see when you hover over a link in your browser – though you will not see it every time, as not every link needs it.
Taking the following text as an example, our link destination is unclear from the text ‘visiting this NHS webpage’ – so we need to give it clear title text.
…you can find more information by visiting this NHS webpage, otherwise please contact the service.
To apply title text to a link once it has been created, edit the link, and click on the ‘Advanced’ tab. One of the fields available will be for an ‘Advisory title’.
In this field, you need clearly state what you are linking to.
This title text takes priority, where necessary, over the text itself. If read by screen readers, for example, they may disregard the text ‘visiting this NHS webpage’ and use the title text, instead pronouncing ‘link, NHS Mental health services’.
Second to changing the wording in the paragraph itself, using title text in this way is optimal, as it ensures the destination is clear to the user – so make use of it where you cannot amend the content accordingly.
You can of course also create email and telephone links as part of the WYSYWIG editor.
Creating telephone links
When creating telephone links, while the text in the content may have spaces in the phone number to follow conventional formatting, we must ensure that there are no spaces in the telephone number itself. See the example to the right – we have linked the text 0161 273 53 54, but have made sure to remove the space in the ‘Phone number’ field beneath.
Title text
Extending what was covered on title text above, we would apply the same theory to email and telephone links. It would be optimal for our text content itself to say ‘Email info@frankdesignltd.co.uk’ for example, and for the entire text (including ‘Email’, so that it’s clear we are emailing) to be the link. Just linking the email address alone might causing confusion.
Taking the example from above where we have linked a phone number, but the text is the phone number alone, we can one again make use of title text. Simply entering ‘Telephone 01612735343’ into the Advisory Title field will ensure that the link’s purpose is clear.
Instead of pronouncing ‘link, 0161 273 53 54’, likely grouping the numbers instead of saying them one-by-one, so ‘two-hundred-and-seventy-three’ as opposed to ‘two seven three’, a screen reader would now pronounce:
‘link, telephone 01612735354’, pronouncing each number separately as 01612735354 is not a conventionally recognised number – or a ridiculously large one, at least.
Links to files in the CMS are much as you would expect, but you might want to consider adding clearer title text. It can be useful to add the file extension or application type to the end of the title text, so that the user understands what they are downloading and how they can open it.
For example, if we are linking to the file frank-staff-directory.xls, a useful title text might be ‘Frank Staff Directory (Excel)’ – the user knows that the link is to ‘Frank Staff Directory’, and has the additional information that it is to open in Excel.
Similarly, if we are linking to ‘marine-report-2019.pdf’, then our title text could be ‘2019 Marine Report (PDF)’. The user will know how they are accustomed to opening PDF files, so it is best that they know what to expect when opening this linked file.
When creating links, it might be tempting to force them to open in a new browser tab, or this may simply exist in past content.
This can cause issues for visually impaired users. If you are using a screen magnifier, for example, it can be disorienting. For screen readers, as they often get no alert to a new tab being opened, it’s incredibly confusing – and impossible, in many cases, to return to the previous page.
As such, it’s best to avoid this behaviour. Where it is absolutely necessary, the recommendation would be to include title text, as above, but with ‘(opens in a new tab)’ at the end. This will, at least, make the user aware of the behaviour before it happens. Ideally, you should avoid opening in a new tab. This is consistent with the approaches used by gov.uk and NHS.uk.