How to make webpages accessible

Before you publish a web page, check the following:

• the page has a clear and unique title
• headings are descriptive and use the correct format
• content is written in plain English
• links clearly describe where they take the user
• lists are set up correctly
• images include helpful alternative text (alt text)
• text and important content have good colour contrast
• tables are used only for data and are set up correctly
• instructions do not depend on someone being able to see the page

Testing tools

This guide includes tools to help you check your web pages.

These tools include both automated checks and manual checks.

Automated tools are useful, but they cannot find every issue.

You should always carry out manual checks as well.

You may also find the Silktide accessibility toolbar useful -it's free and checks your webpage for 200 WCAG issues. 

Every web page needs a clear page title.

The page title tells users what the page is about. It is different from the main heading shown on the page.

What makes a good page title

A good page title should be:

• clear and easy to understand
• descriptive, so users know what to expect
• unique (no two pages should have the same title)
• simple and direct

For example, use “How to create accessible content” instead of just “Accessibility”.

Why page titles matter

The page title is often the first thing a screen reader reads out. It needs to clearly describe the page.

Search engines also use page titles to understand your content.

A clear title helps your page appear in search results and helps users decide if it is what they need.

How to check a page title

You can check a page title in a few simple ways:

• Look at the browser tab. The title is usually shown there (hover over it to see the full text)
• Use a screen reader, which will read the title aloud
• Open browser developer tools and look for the “title” in the page code

How to add or edit a page title

Most content management systems (CMS) let you add or edit the page title.

You may find this in a section called Metadata or Properties.

Some systems use the main page heading as the page title.
For example, in SharePoint:

when you create a page, the heading is often used as the title you can edit the title using the Page option in the command bar this will open a field where you can enter a new title. 

Headings give your web page structure.

They help users find the information they need. They are like chapters in a book.

Each heading should clearly describe the section that follows.

Using headings correctly

Headings must use the correct format (HTML headings).

Do not rely on bold text or large font to create headings.

Use heading levels in the correct order:

H1 – the main page heading (usually only one per page)
H2 – main sections
H3 – sub-sections
H4, H5, H6 – used only if needed

If you need too many heading levels, your page may be too complex.

Consider splitting your content into more than one page.

Example of good headings

A clear and simple structure might include:

• a main heading that describes the page
• section headings that introduce key topics
• sub-headings that break content into smaller sections

Each heading should match the content below it.

Why headings matter

Headings help users to:

• understand what the page is about
• see how the information is organised
• find what they need quickly

They are especially important for people using screen readers.

How to check headings

Open your page in a web browser, such as Microsoft Edge or Google Chrome.

Check that:

• headings are clear and describe the section content
• heading levels are used in the correct order
• there are no empty headings

You can also:

use a headings bookmarklet tool
check the heading structure in browser developer tools

How to add or edit headings

Most content management systems (CMS) allow you to add or edit headings.

You can usually do this by:

• selecting a heading style from a formatting toolbar, or
• editing the HTML directly

For example, in SharePoint you can choose heading styles from the Paragraph style menu in the toolbar.

Text on your web page should be easy to read and understand.

This helps all users find and use your information quickly.

Plain English

Write your content in plain English.

Plain English uses simple words and avoids jargon (specialist or technical language).

Plain English helps everyone. This includes:

• people with low literacy skills
• people with higher literacy skills, who want to understand information quickly

How to write in plain English

There are tools and guides that can help you improve your writing.
You can:

follow guidance from LocalGov Digital on clear content
use GOV.UK advice on writing for your audience
check your writing with tools like the Hemingway Editor
use The Writer's readability tools to understand the reading level of your content

Technical terms and abbreviations

You can use technical terms and abbreviations when needed.

Always explain them the first time you use them.

Writing clear instructions

Your page may include instructions for users to follow.

Instructions must be clear and accessible for everyone.

Do not rely only on things people may not be able to see or hear, such as:

• colour
• shape
• size
• position on the page
• sound

Instead, refer to clear text labels that users can recognise or access with assistive technology.

You can still include visual details if they help, but they should not be the only way to understand the instruction.

Link text is the clickable part of a link.

It is often a different colour and may be underlined.

Link text should clearly describe where the link will take the user. This helps people decide if they want to click on it.

It is especially important for people using screen readers. They may jump straight to links instead of reading the full page. Because of this, link text should make sense on its own.

Writing good link text

Good link text should be:

• short and clear
• written in plain English
• descriptive of the destination

You can start with action words such as:

• download
• visit
• find out
• read
• go to

Use either:

• the title of the page you are linking to, or
• a clear description of that page

Examples

Good examples:

How to create accessible content
Visit GOV.UK working, jobs and pensions
NHS heatwave guidance
What happens next when you contact us

Avoid unclear links such as:

Click here - it is too vague and not everyone can see where 'here' is
Read this link - 'this' is not descriptive, and you don't need to tell users it's a link
Learn more - 'more' is not descriptive

These do not tell the user where the link goes.

Using web addresses (URLs)

You can use web addresses as link text if they are clear and easy to read.

Examples 

Good examples:

www.sefton.gov.uk/contact-the-council
www.sefton.gov.uk/council-tax

Avoid:

long links with “https://” at the start
shortened links (for example, bit.ly links)

Email links

Write email addresses in full, such as email@example.com, instead of using phrases like email us.

This helps users:

• see the address without clicking
• avoid opening an email app they may not want to use

Opening links

Most links should open in the same tab or window.

This includes:

• links to pages on the same website
• most links to other websites

Opening links in the same tab:

• matches user expectations
• reduces confusion
• works better for screen reader users
• is easier for people using mobile devices

When to open a new tab

Some links should open in a new tab or window.

For example, links to:

• online forms
• secure services where users enter personal information

This helps prevent users from losing their progress.

If a link opens in a new tab, tell the user in the link text.

Examples

Good examples:

Apply for a care needs assessment (opens in new window)
Visit GOV.UK to apply for Universal Credit (opens in new window)

Other useful resources 

You can read more about writing good link text on GOV.UK.

Lists help make your content easier to read.

They break up long text and help users quickly scan the information.

Types of lists

There are two main types of list:

• Bulleted lists (unordered) – used when the order does not matter
• Numbered lists (ordered) – used when the order is important

Why lists matter

Lists help all users understand your content more easily.

They are especially useful for people using assistive technology.

For example, screen readers will:

• tell the user they are reading a list
• say how many items are in the list

This helps users understand the structure of the page.

How to add or edit lists

Most content management systems (CMS) let you create and edit lists.
You can usually do this by:

• using list buttons in a formatting toolbar, or
• editing the list in the page code (HTML)

For example, in SharePoint you can use the bulleted list and numbered list buttons in the toolbar.

Alt text is a short description of an image.

It is not visible on the page, but screen readers can read it aloud.

When to use alt text

There are two types of images:

• Informative images – these help users understand the content
• Decorative images – these do not add important information

You must add alt text to informative images.

For example, an image showing how to open a fire door is informative.

It needs alt text so everyone can understand the instructions.

Decorative images do not need alt text.

In some cases, it may be best not to include them at all, as they can make pages feel cluttered.

How to tell the difference

If you are unsure, try reading your content out loud.

If you need to describe the image for the page to make sense, it is informative.

If the page still makes sense without it, it is decorative.

Why alt text matters

Some people cannot see images, for example people with visual impairments.

Alt text makes sure they do not miss important information.

How to write and add alt text

Informative images

When you add an image in your content management system (CMS), there is usually a field for alt text.

Write a short description that explains what the image shows and why it matters.

You can also explain the image in the main page text if it helps users understand it.

Decorative images

If an image is decorative, you can leave the alt text field empty.

Screen readers will ignore it.

Colour contrast is the difference between two colours.

Good contrast means colours are easy to tell apart.

Poor contrast means colours can look similar and hard to read.

Things like tiredness, screen settings, lighting, age and visual impairments can all affect how well people see colour contrast.

Using good contrast helps more people read and use your content.

What to check

Colour contrast is measured using a ratio, which helps you check whether colours meet accessibility standards.

We follow the Web Content Accessibility Guidelines (WCAG), which set the minimum contrast levels we must meet.

Text contrast

Text must be easy to read against its background.

Normal text (smaller text):
Contrast must be at least 4.5:1

Large text (bigger or bold text):
Contrast must be at least 3:1

Interactive content

Interactive elements include:

• links
• buttons
• form fields

Icons and other visual parts of these elements must also be easy to see. They should have a contrast ratio of at least 3:1 against the background.

Images and graphics

Colours used in informative images must also be clear.

For example, in a chart or diagram:

• colours should stand out from the background
• colours next to each other should be easy to tell apart

Decorative images and logos do not need to meet contrast rules.

You can read our alt text page to help decide if an image is informative or decorative.

How to check colour contrast

There are many tools that can help you check contrast - it is best to use the tool you are most comfortable with.

Browser developer tools often give the most accurate results.

You can also use online contrast checkers, such as Webaim, to test colour combinations.

Webaim explains how to test contrast with Dev tools and a range of other colour contrast checkers. 

Find out more

You can learn more about:

how colour contrast affects people with different visual impairments
minimum contrast levels for text
contrast rules for non-text content

Tables should only be used to present data.

Do not use tables just to control layout or how content looks.

Using tables correctly

When you use a table, make sure it:

• has a clear and logical layout
• includes at least one header row or column
• uses proper formatting for headers (for example, table headers or “th”)
• uses correct formatting for merged or split cells

This helps users understand the information in the table.

Why accessible tables matter

Tables can be hard to use if they are not set up correctly.

This can affect:

• people using mobile phones or tablets
• people using screen readers

Screen readers rely on clear table structure to read the data in the correct order.

How to check tables

Open your web page in a browser, such as Microsoft Edge or Google Chrome.

Check that:

• the table has a clear header row or column
• the headers describe the data in each row or column

You can also check the table structure by:

• using a table checking tool (such as a bookmarklet), or
• viewing the table code in browser developer tools

How to add or edit tables

Most content management systems (CMS) let you create and edit tables.

You can usually do this by:

• using table options in a formatting toolbar, or
• editing the table in the page code (HTML)

For example, in SharePoint you can apply header rows and columns using the Table styles option in the toolbar.