Writing accessible web content

Readable web content

Write content that's clear, simple and easy to read, so people can quickly find and understand your information.

Readable content helps everyone

People may not have a choice when using our websites, so it’s important they work for everyone.

Our users may have:

limited time, attention span or be stressed
different education levels, reading abilities or digital skills
a visual impairment or reading difficulty, like dyslexia
English as a second language
pay-as-you-go device or limited access to the latest technology
a poor internet connection

They include residents and visitors to Nottinghamshire, businesses, subject matter specialists and employees.

The simpler your content is to read and use, the fewer questions and complaints you'll receive.

Making web content readable is about more than just the words you write. It includes writing style and tone, content structure, use of colour and any non-text content you use like images and video.

Plan for your audience

Your writing will be most effective if you understand who you’re writing for. To understand them, you should know:

how they behave, what they are interested in or worried about so your writing will catch their attention, answer their questions and solve their problems
their vocabulary, so you can use the same terms and phrases they use to search for information

Once you know your audience, plan information so it's easy to read and understand using these tips.

Get to the point early - put need to know first, nice to know after (‘inverted pyramid’ approach).
Use less words - pressure on the brain increases for every 100 words you write.
Imagine you're talking to your reader, but with the authority of someone who can actively help - use words appropriate to them.
Use 'you' and 'we' where appropriate but make sure the reader understands who 'you' or 'we' are.
Do not be afraid to give instructions - if something is a requirement, use ‘must’.

Style and tone

Write using consistent style standards and tone.

You should:

use plain English to make text easy to read for most people
make content easier to scan using headings and bulleted lists to break up and structure text
use active voice ("Subject does X to Object") not passive voice ("Object has X done to it by Subject") where possible
put user or action-oriented words first (front load) in headings, paragraphs, lists and links
include keywords or phrases people would use to search about your topic

Read our in-house style guide for more tips or use GOV.UK's Style guide

Use plain English (or plain language)

In England, 1 in 6 adults have very poor literacy skills or are functionally illiterate. This means they can understand short clear texts on familiar topics, but reading text from unfamiliar sources can be hard.

More about adult literacy from the National Literacy Trust

Use plain English - it's direct, clear, everyday language. It helps as many people as possible understand your content.

Features of plain English

Short sentences and paragraphs
Simple, everyday words with fewer syllables
Avoids jargon (unneeded technical or professional language)
Explains technical terms or acronyms
Clear sections of text with enough spacing
Easy to understand headings and bulleted lists that break up text

People with at least some secondary level education should be able to understand text written in plain English. That's about an age 12 to 14 year old reading ability.

Learn our tips for writing in plain English

Structure for online reading

Headings and hyperlinks

Headings and hyperlinks help readers navigate information on the web. Headings help people move through content quickly to find what they need. Hyperlinks take people to the other information they may need.

Write and structure them using our guidance:

Lists (bulleted and numbered)

Lists, also know as a bulleted or numbered lists, can make complex information easier to read and understand.

Always use more than one item in a list, otherwise use an individual sentence or paragraph. This is because screen readers and other assistive technologies will announce lists to users and how many items are in it.

For all lists, avoid:

using more than one sentence within a bullet point – start another bullet point or use commas or dashes to expand
putting “or” or “and” after the bullet points (although there may rarely be a need)
putting a comma or semicolon after each bullet point
adding the whole bullet point as a link - add them as a concise link within the bullet text or put the link after the list.

Do not place content that isn't text, like tables or images, in a list or use the Enter key to insert spacing between your list items.

This confuses screen reader users into thinking the list content after is a new list. Instead, place the non-list content before or after your list.

Do not use bullets to visually indent information that isn't a list. For example, do not style the lines of a postal address as a list to make them stand out.

Bulleted lists

We use bulleted (or bullet point) lists in two ways:

as part of a continuous sentence within text
as complete sentences within text

Be sure to make lists consistently either all sentences or all fragments – do not combine styles in one list.

The following tips are an example of a list within text that's part of a continuous sentence.

When a list is part of a continuous sentence, make sure that you:

always use a lead-in line with a colon
put common information in the lead-in line
check points make sense running on from or continue the topic of the lead-in line
use lower case at the start of the bullet point, unless it starts with a proper noun
put bullet points in the same tense and verb forms
make each bullet point only include one short sentence
do not use punctuation at the end of bullet points and no full stop after the last bullet point

The following tips are an example of a list within text that form complete sentences.

When a list forms complete sentences, use the guidelines in the previous section, except for the following:

Use uppercase letters at the start of each bullet point.
Finish each sentence with a full stop (or question mark).

Numbered lists

Use a numbered list if the order is important, otherwise use bulleted lists.

For example, a set of instructions where each step or item is a new point in the list.

Numbered lists follow a similar style to bulleted lists, but:

usually are short complete sentences
use uppercase letters at the start of each sentence
finish each sentence with full stops (or question marks)

Numbered list example

These are instructions on how to add a numbered list to content:

Write out list steps as complete sentences with capital letter at the start and a full stop after each point.
Select your list text and go to the body text formatting toolbar.
Select the 'Numbered list" formatting icon.
Check you set up your list correctly.

List following a heading

Points can follow on directly from a heading or subheading.
They do not use a lead-in line.
Do not put a colon after the heading.
Include one short sentence - use commas or dashes if you need to expand.
Start with a capital letter.
Finish with a full stop (or question mark) if it's a complete sentence.

Learn how to create lists in different formats

Colour accessibility

It's important you consider the colours you use when communicating information online.

Colour vision deficiency (colour-blindness) affects 1 in 12 men and 1 in 200 women. This means some people see colours differently to most people, and have difficulty telling colours apart.

Tiredness, screen displays, light levels, age, visual and neurological differences can all affect how well people see colours online.

Information must have good colour contrast to be seen clearly by most people. Colours with poor contrast are hard to see or tell apart.

For example, consider this text:

On a white background, yellow text is almost impossible to read for most users. It's contrast ratio is 1.07:1, making it inaccessible.

Make sure text and other information in online content like charts and graphs has a good colour contrast ratio. This includes on web pages, in document files or in videos.

Colour contrast ratio

Contrast ratio is the difference in brightness between two colours.

No contrast, like white text on a white background has a ratio of 1:1. Extreme contrast, like black text on a white background has a ratio of 21:1.

Colour with very low and very high contrast can be harder for everyone to see. Some people will even find certain colour combinations overwhelming.

Normal text should have a minimum ratio of 4.5:1, everything else 3:1.

The most inclusive and easiest to read colours have a minimum ratio of 7:1 for normal text, everything else 4.5:1.

If you are unsure which colours to use, there are different colour palette generators you can try, like this WCAG Compliant Accessible Color Palette Generator (Venngage)

Decorative images and logos do not need accessible colour contrast.

Do not use colour alone to show meaning, even if you have an accessible contrast ratio. For example, you may need to add text labels or different patterns to bars in a chart.

Read more about using colour in images at Using images in web content

You can also learn how to check colour contrast ratios in different content formats:

Alternatives for non-text content (images, video and audio-only)

Explain things clearly and simply in words first. Text is faster and easier for most people to use in different situations and with different technologies.

Non-text content, like images, video and audio-only (podcasts) can take longer and be more expensive to make. They can also be harder to maintain over time and make accessible for people online.

Only use non-text content if there is evidence of a real user need.

Non-text content must have a text alternative

People must be able to access important information from any non-text content you create. This means you must make sure it has:

alt text added to meaningful images - decorative images do not need alt text
text alternatives given for charts, graphs, infographics or images with text
captions added to videos (and separate video transcripts where needed)
transcripts added to audio-only content, like podcasts

Offering text alternatives to non-text content helps more people in more situations, including those who:

are in a hurry or prefer text-only content
have auditory, visual or other impairments and need captioning or different assistive technologies to understand your content
choose to load a website without images due to limited bandwidth or slower technology
are using AI summary tools

Do not rely on auto-generated alternative text, captioning or transcripts. They are often inaccurate or incorrect. But, they can be a good place to start. You must give text alternatives the same message or meaning as the content they replace.

How to make non-text content accessible

We explain how to create text alternatives for images in Using images in web content.

We also explain how to add text alternatives to content in different formats: