How to write 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 include residents and visitors to Nottinghamshire, businesses, subject matter specialists and employees. They may have:

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

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

To make content more readable, you must consider your:

writing style and tone
content structure
use of colour
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 your audience, 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 using these tips:

Get to the point early - put need-to-know first, nice-to-know after (‘inverted pyramid’ approach).
Use fewer 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 they would use.
Use 'you' and 'we' but make sure readers understand who 'you' or 'we' are.
Do not be afraid to give instructions - if something is required, use ‘must’.

Writing tone and style

Your writing's tone shapes how your reader experiences and understands your message. It includes word choice, sentence structure and overall writing style.

You should write for how people read online and aim to reach the widest audience possible.

This means you should:

use plain English to make text easy to read for most people
make content easy 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")
put user or action-oriented words first (front-load) in headings, paragraphs, lists and links
include words or phrases people would use to search about your topic

Find specific style advice in:

Use plain English

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

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, short, everyday words
Avoids jargon unless the audience is familiar with it
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 education can understand text written in plain English. That's around an age 11 to 14 year old reading ability.

Learn more tips for writing in plain English

Structure content for online reading

Headings and hyperlinks

Headings and hyperlinks help readers navigate information online. Headings help people scan through content on a page. Hyperlinks take people away from a page to other information they need.

Write, structure and present headings and hyperlinks using our guidance:

Lists (bulleted and numbered)

Lists, also known as a bulleted or numbered lists, help make complex text easier to scan.

Screen readers and other assistive technologies will also announce lists to users, including how many items are in it.

Always use more than one item in a list, otherwise use an individual sentence or paragraph.

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 - put a link within the bullet text or 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 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 include only one short sentence
do not use punctuation at the end of each point or a full stop after the last point

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

When list items form 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 only if the order is important. Otherwise, use a bulleted list.

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)

Example of a numbered list

Add a numbered list to content using the following steps:

Write out list steps as complete sentences with a capital letter at the start and a full stop after each point.
Select your list text and go to the text formatting toolbar.
Select the 'Numbered list' formatting icon.
Check your numbered list appears 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 about creating lists on web pages and in documents in How to create accessible content

Using colour

Colour vision deficiency (colour-blindness) affects 1 in 12 men and 1 in 200 women. This means some people see colours differently 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.

For example, consider this text:

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

Make sure text and other information in content like charts and graphs can be seen clearly by the most people. Do this by using a good colour contrast ratio.

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.

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

Normal text requires a minimum colour contrast ratio of at least 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.

Normal and large text

Normal and large text requires a minimum colour contrast ratio of:

4.5:1 for normal text - under 18 point (24 pixels) or 14 point (18.5 pixels) bolded
3:1 for large text - above 18 point (24 pixels) or 14 point (18.5 pixels) bolded

Non-text content

Colours for non-text content, like informative images, images of text, graphical objects or interactive components, must have a contrast ratio of at least 3:1.

An informative image could be a line chart where there must be good contrast between the:

lines and background colours
lines next to each other

An example of an interactive component could be a form field.

Decorative images and logos do not need accessible colour contrast.

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

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

Learn more about using and checking colour when publishing in specific formats:

Using non-text content (images, video, 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 and you can make it accessible.

Non-text content must have text alternatives

People must be able to access important information from any non-text content you create.

This includes those who:

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

This means you must make sure non-text content 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

You must make sure your text alternative is comparable to the content it replaces.

Do not rely on auto-generated alternative text, captioning or transcripts. It's often incomplete and inaccurate. But, it can be a good place to start.

We explain more about creating text alternatives for images in Using images in web content.

We also explain how to publish text alternatives in different formats: