How to write accessible web content

Hyperlinks in web content

Use descriptive and meaningful link text so users can understand what your links are about.

What links and link text do

Links, or hyperlinks, are selectable text that take you to another place, website or digital format. Their purpose is to let you know what you'll find on the other side of a link.

Web developers may design special images or buttons to work as links. But for most online content, you should write and present links as selectable text.

Link text is usually a different colour to normal text and underlined.

You can create links to:

an internal page within our website
an external website, like a government resource, trusted organisation or approved third party application
a different digital format like a PDF, video or online form
to an email address

Links work best when written as descriptive and meaningful text.

Give link text enough context

Users must be able to understand what a link will do. Poorly written links can confuse and disorient users, especially those using assistive technology.

Link purpose using link text alone

The most accessible links are those where the link's purpose is clear without the nearby text. This helps everyone understand links quicker, especially those with:

visual limitations or who use screen readers because they can list links (out of the page's context) and still be able understand what they are about
cognitive limitations who might become disoriented or frustrated by extra navigation to and from unneeded content
motor impairments because they can skip unneeded web pages, avoiding the keystrokes needed to visit a link and return

For example, consider the following sentence:

'The government has created this guidance on writing good link text (GOV.UK).'

If you read only the link text (out of sentence context), it reads:

'guidance on writing good link text (GOV.UK)'

This link could also be written like this:

'The government has created guidance on writing good link text on the GOV.UK website.'

In these examples, the link text clearly explains what the page is about and who wrote the guidance.

Using descriptive link text helps:

everybody understand where the link goes, especially users who rely on screen readers or need to scan content quickly
search engines and AI tools that rely on meaningful link text to understand the link's purpose for its page rankings and text summaries

Link purpose using link text with it's surrounding context

A less accessible way to present links puts the links main purpose outside the link text, like in the text immediately preceding the link.

For example:

'The government has created guidance on writing good link text. Go to the GOV.UK website to learn more'
'Read the governments guidance on writing good link text on the GOV.UK website by clicking here.'

If you read only the link text (out of sentence context), it reads:

This link text is less accessible because it does not clearly explain the link's purpose.

Ideally, aim to to put your context within your link text.

Let people know what a link will do

Let people know what will happen or where they will go when selecting a link. Make it clear if a link goes to:

content from an outside source, like (GOV.UK)
a web system that's different to a standard web page, like [Microsoft Forms]
a different content format, like [PDF] or other document file
non-text content, like a [YouTube] video or [SoundCloud] audio podcast
content with barriers to access, like [requires a login]
an email address which may open an application the user does not want to use

You may have to restructure or reword content which contains links to better meet these recommendations.

Different websites or council systems

We recommend you use (curved brackets) to identify websites or council systems that are external to where your main web page content is.

Do not use for internal links, unless it's unclear. For example, avoid (Nottinghamshire County Council) if it's clear to the user they are already on our website.

Do not use web addresses in text links meant for online reading, use the organisation's brand name instead.

Sometimes, though, they can be similar. For example, the URL for the government's website is 'www.gov.uk', but the government's brand name for the website is GOV.UK (all upper case).

A link to GOV.UK on our website could be displayed like this:

'Read more about writing good link text (GOV.UK).'
'The government has created guidance you can read on writing good link text (GOV.UK).'

You do not need to use curved brackets if the owner otherwise clear in the link's text. For example, 'Read GOV.UK's guidance on writing good link text.'

Barriers to access

We recommend you use [square brackets] within the link text to identify any potential barriers to accessing a link.

Examples include:

document or image file types: [Word], [PDF], [Excel], [JPG] or [PNG]
time-based media formats, including their lengths rounded to the nearest minute: [12 minutes, YouTube], [42 minutes, SoundCloud]
very large file sizes - for example 'Download the concert event promotional pack [Word, 10MB]'
other barriers to access like [opens in new tab] or [requires login] - for example, "While reviewing our development plan, please fill out our feedback survey [opens new tab]."

Link writing tips

Writing good links takes practice and judgement. Here's what we can recommend to help.

Writing link text

When writing link text, do:

be descriptive and accurate - consider when to use the page or document title
'front-load' important words, for example, 'Before you arrive at a recycling centre, check what you can recycle'
start with an active verb for an action, like ‘‘Apply for or renew a Blue Badge’
use neutral terms like 'select', 'read', 'go to', or ‘visit’
use sentence case, not title case (except for proper nouns) -- 'This is sentence case' and 'This is Title Case'
try to link to a page a document is on, not the document itself, like for documents in our Policy Library or for those hosted on external websites
link to emails like 'departmetname@nottscc.gov.uk' because they are usually short and descriptive

Do not:

use unhelpful link text like 'click here', 'read more' or the word 'link'
have links with the same text on a page go to two different places - for example, repeating ‘Book this course’ on a page with different booking dates
use links longer than a sentence or very short 1 or 2 character links
describe actions users cannot perform -- mobile users do not 'click'
copy and paste full URLs with 'http:' as link text

Using a URL as link text

Avoid using a URL as link text unless there is a real user need. They are long, can contain special characters and are not screen reader friendly.

For example, you may need to use a URL in document content meant for both print and online reading, like:

alongside a QR code image in a flyer
in an easy read document that is printed out for a user

If you use a URL as a link, make it short and meaningful with no special characters, 'https://' or long paths.

For example, 'www.nottinghamshire.gov.uk/recyclingcentres'.

The council uses its own URL shorting service. If you work for the council and are considering setting up a short URL, first contact the communications team.

Positioning links in content

When positioning links in content, do:

put links in context at the point in the text where it's most useful
aim for an uninterrupted flow of reading, for example, by putting links at the end of a sentence or on a new line if it makes better sense

Do not:

have mid-sentence or mid paragraph links if it makes your text harder to read
place many links next to each other in a sentence -- they can be harder to select on mobile devices or for people with motor difficulties
repeatedly present a link every time it's mentioned on a page -- position it only where it's most useful
put links within document titles, page summaries, headings or subheadings
put all links together at the bottom of the page

Link text examples

Link text for an internal website

Good: 'Find out more about how to the council works.'

Good: 'Find out more about how to the council works.'

Bad: 'Find out more about how to the council works by clicking this link'

Link text for an external website

Good: 'The government has created this guidance on writing good link text (GOV.UK).'

Good: 'The government has created this guidance about writing good link text on the GOV.UK website.'

Bad: 'The government has created this guidance on their website about writing good link text.'

Bad: 'The government has created guidance on the GOV.UK website about writing good link text. Click here to learn more.'

Document file links

Good: 'You can download and print a paper short breaks application [PDF].'

Bad: 'You can download and print a paper short breaks application.'

Bad: 'You can print a paper short breaks application by downloading this PDF.'

Call to action link text

Good: 'Before you arrive at the recycling centre, check what you can recycle.'

Bad: 'Before you arrive at the recycling centre, check what you can recycle.'

Structuring links in content

Good:

'Digital accessibility helps people with colour vision deficiency, blindness and vision loss, hearing loss, Dyslexia and Autism.

Find out more about these conditions on the NHS's list of conditions.'

Good:

'Digital accessibility helps people with:

- - colour vision deficiency
  - blindness and vision loss
  - hearing loss
  - Dyslexia
  - Autism

To find out more about these conditions, go to the NHS's list of conditions'

Bad:

'Digital accessibility helps people with colour vision deficiency, blindness and vision loss, hearing loss, Autism and Dyslexia. Find out more on the NHS's list of conditions.'

Pasting URLs from Microsoft Edge browser

Sometimes when you copy and paste a URL from a browser like Microsoft Edge, it displays as descriptive link text by default. Make sure you check and alter this text so it follows our recommendations.

For example, consider this link pasted from Edge: 'How to write hyperlink text for better web accessibility (scope.org.uk)'

While descriptive, we recommend you edit the link text so the website name is replaced with the brand name, like 'How to write hyperlink text for better web accessibility (Scope for business)'

Learn more about URL copy and paste in Edge browser (Microsoft Support)

Broken or outdated links on council managed websites

Check links on your web page regularly to make sure they are not broken or out of date.

It will help if you let us know the web address (URL) of the page you found the broken link on.