How to make web pages accessible

This guide will show you how to make web pages accessible. Check who is responsible for making web content accessible. 

We have created a checklist  so you can make sure you have covered everything.

Read why content should be published as a web page.

Need help?

How NCC staff can get help to publish accessible content. 

You need to do manual and automatic checks to see how accessible your web page is.

Manual checks

Before you publish your web page, check you have:

• Added a unique and descriptive page title
• Added headings using HTML tags and checked they are in the right order
• Written link text that makes sense by itself
• Added image alt text for informative images and left decorative images blank. You should also avoid images with text in.
• Used sufficient colour contrast
• Used tables correctly
• Written accessible instructions - eg so they don't refer to visual items
• Used plain English - LocalGov Digital explains how and you can also use The Writer's free readability checker (opens new window) (opens in a new window)

Automated checks

The WAVE extension tool (opens new window) (opens in a new window) checks the accessibility of a web page. You can add this extension to your browser and turn it on to check your page's accessibility.

If you are unable to add extensions to your browser, contact IMT via Assyst to get permission (for Norfolk County Council staff only).

A web page needs a good page title to tell the user what your content is about. This is not the same as adding a title to the page as web page text.

Titles should be:

• Descriptive
• Unique
• Clear - eg, not 'Accessibility' but 'How to create accessible content'
• Simple

Why web pages need a page title

A title is the first thing a screen reader will read to the user, so it needs to clearly describe what your page is about.

Search engines also use the title to understand your content. If it's relevant to what someone is searching for, it should appear in the search results. A user can then decide if it matches what they are looking for.

Headings give your web page structure, so users can find the content they need. For example, they introduce new sections or sub sections - a bit like chapters of a book.

The title on your web page should always use a 'Heading 1' style. There should only be one Heading 1 on the page.

You must style headings using the correct HTML. Using bold, underline or large font size to show a heading will not work for screen readers.

Headings must follow the right order (eg Heading 1, Heading 2, Heading 3). They must not skip down (eg Heading 2 then Heading 4), but they can skip back up (eg Heading 4 then Heading 2).

Headings should be clear and informative.

Why web pages need headings

Web pages need headings because:

• They allow users to understand the structure and hierarchy of your content
• They help screen readers to read out your content in the right order
• They help users quickly skip to the content they want to read

How to add headings to a web page

Add HTML heading tags around the text you want as a heading in the HTML editor.

For example:

<h1>example main heading</h1>

 <h2>example subheading</h2>

Remove empty heading tags eg <h2></h2>. They are confusing and time-wasting for screen readers.

Plain English is easy for everyone to understand. It uses simple wording and does not contain jargon.

You should avoid using italics or block capitals as some people find them hard to read.

We follow the LocalGov Digital content standard. This standard sets out five rules that content should meet before we consider publishing it online:

• Is it easy to read and understand?
• Is it easy find?
• Does it answer a question that visitors are asking?
• Is it original?
• Are images necessary and helpful?

Why web pages should be written in plain English

We must write our web content in a style that's easy for people to read and understand. Our web content must be accessible by law - read more about why we must make content accessible.

16.4% of adults in England, or 7.1 million people, have 'very poor literacy skills' (Source - National Literacy Trust).

An article from Nielsen Norman Group about how users read on the web, says:

"People rarely read web pages word by word; instead, they scan the page, picking out individual words and sentences".

How to write in plain English

There are lots of resources to help you write good web content:

• LocalGov Digital explains how to make your content easy to understand
• The Writer's free readability checker (opens new window) (opens in a new window) - a readability checker will assess the reading age someone needs to be to understand your writing
• GOV.UK have a guide on how to write well for your audience

Link text should describe where the website link is taking the user.

This helps users understand where a link will take them and decide whether they want to click on it. It also helps people using screen readers in particular - they might skip straight to the links rather than reading all the text on the page. So, the link text needs to make sense out of context.

Go to YouTube to watch how someone uses a screen reader to navigate a web page (video).

You should try to avoid:

• Linking to untrustworthy sites
• Sites where a user must pay or register to see the information

How to write accessible link text

• Keep the link text short yet informative
• Make sure you use plain English
• Consider starting with an action like download, visit, how to, go to, find out, read...
• Use either: 
  • The title of the web page you are linking to
  • A description of the page you are linking to

Good link text examples:

• 'How to create accessible content'
• 'Go to GOV.UK's working, jobs and pensions page'
• 'NHS heatwave guidance'
• 'What happens next when you contact us'

Bad link text examples:

• '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

You can include urls if they are descriptive and don't include 'https://'.

Good URL link text examples:

• www.norfolk.gov.uk/digital
• www.norfolk.gov.uk/contactus

Bad URL link text examples:

• https://www.norfolk.gov.uk/digital/
• www.bit.ly/49rYKgx

We recommend writing email addresses out in full - like 'email@example.com' rather than 'email us'. This is because:

• Email addresses are usually short and descriptive
• This allows users to find out the email address without clicking the link. Clicking the link may open an application the user doesn't want to use

Most links should open in the same tab or window

All internal links - which go to a page on the same website - should open in the same tab or window. This is standard industry practice and users expect it.

Most external links - which go to a page on another website - should also open in the same tab or window.

This is because:

• Opening links in a new tab can be a poor experience for screen reader users
• New windows or tabs can disorientate. Users do not realise that a new window or tab has opened. It increases the 'clutter' of the user's information space
• Mobile users must click twice to return to our website if a link opens in a new tab. This can be confusing for users who are not good with technology. They might not know how to switch tabs on a mobile browser

When links should open in a new tab or window

Some external links should open in a new tab or window.

For example, if an external link is to an online form or a secure website where personal information is submitted. A new tab or window prevents inputted data from being lost if the user clicks the back button (the back button allows the user to navigate to a previously viewed web page). 

It is recommended that you give the user advance warning. For example, write (opens in new tab/window) within the link text.

Good link text examples:

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

Both these external links should open in new windows because they link to online forms.

Other useful resources

• GOV.UK's guidance on how to write link text

There are two main types of list: 

• Bulleted lists - also known as unordered lists 
• Ordered lists - these are usually numbered 

Using bulleted or ordered lists to format any lists on your webpage will make it easier to read. This is because they can break up long sentences and make the information easier to scan. 

Using bulleted or ordered lists can also help people using assistive technology. They will help them understand your webpage. 

For example, when screen readers come to a bulleted or ordered list, they will tell the user there is a list and how many items are in it. This helps users orientate themselves and understand the information. 

Good example: 

'To receive support from the Client Hardship Service you must: 

• Be 16 years old or over 
• Live in Norfolk 
• Be claiming a means tested benefit' 

Good example: 

1. 'Press the "Borrow" button on the screen  
2. Scan your library card, by holding it with the barcode facing up underneath the bottom of the screen 
3. Place the item(s) on top of the shelf' 

Bad example: 

'To receive support from the Client Hardship Service you must be 16 years old or over, live in Norfolk and be claiming a means tested benefit.' 

How to create accessible lists 

You must make sure that any bulleted or ordered lists on your webpage are presented using the following HTML elements: 

• Bulleted lists: <ul> and <li>. Go to an example of accessible HTML for a bulleted list 
• Ordered lists: <ol> and <li>. Go to an example of accessible HTML for an ordered list 

This will: 

• Help you format lists consistently 
• Mean assistive technology correctly identifies the content as a list

Don't place non-list content within your lists. For example, don't insert a table or image between two bullet points. This can cause accessibility issues.

Instead, place the non-list content after your list. Or consider using text headings instead of a list.

Don't insert empty lines between list items. This can cause accessibility issues.

Other useful resources 

• Go to an example of accessible HTML for nested lists 
• Watch a demo of VoiceOver screen reader reading lists 

Alt text is a short description of an image. Alt text is not visible on a web page, but screen readers can see it.

When to use alt text

There are two types of images - informative and decorative.

An informative image is one that helps people to understand a web page. You must add alt text to informative images.

For example, an informative image might visually demonstrate an instruction - like how to open a fire door. This image needs alt text so that people who rely on screen readers can also understand how to open the door.

Decorative images do not add important information to your content. They do not need alt text. Think about whether you need to use decorative images at all. They can make web pages look cluttered.

If you're unsure whether your image is informative or decorative, try reading your page out loud. If you need to explain the image to understand the page, it's probably an informative image. If you don't need to explain the image, it's decorative.

The World Wide Web Consortium (W3C) website explains the difference between informative and decorative images in more detail.

Why images need good alt text

Some people will not be able to see your image. For example, they may have a visual impairment. Alt text means they will not miss out on important information.

How to write and add alt text to your web page images

Informative images

Once you have added your image to your content management system, there is usually a field for alt text in the image's properties.

Or, you can describe what the image is conveying in the body text of your web page.

Go to Scope's guide to writing alt text descriptions to get help on what information to include.

Decorative images

If an image does not need alt text, you can normally leave the alt text field empty. Screen readers will know to ignore the image.

Foreground colour must be clear against background colour so people can understand your content easily. The Who Can Use tool (opens new window) (opens in a new window) shows you how colour contrast can affect different people with visual impairments.

If it's hard to understand content because of the colours, it's likely not meeting colour contrast ratio requirements. Colour contrast ratio means how dark and light colours must be on a screen.

What to check

Two things to check with colour contrast are:

• Does text meet colour contrast ratio against the background colour? Normal text (anything under 18 point/24px) must have a colour contrast ratio of 4.5:1. Larger text is defined as 18 point/24px and above or 14 point/18.66px and above for bold text. Larger text must have a colour contrast ratio of 3:1.
• Do non-text elements have the right colour contrast against colours around them? Non-text elements must have a colour contrast ratio of 3:1. Examples include buttons, graphics, graphs or charts that are essential to using/understanding your content. For example, if you had a search button graphic that was crucial to someone being able to search your website, it would need to meet colour contrast ratio.

Logos are exempt from colour contrast ratio requirements.

Why web pages need sufficient colour contrast

There are approximately three million colour blind people in Britain (Source - Colour Blind Awareness).

But poor colour contrast doesn't only affect those with vision problems. Factors like tiredness, screen differences, age, and daylight can all affect how we see colour.

Higher contrast between colours means more people can read and navigate your web page.

Also, if colour is the only way to convey meaning, users who cannot see colour will miss out.

Go to YouTube to watch a video on the importance of colour contrast.

How to check colour contrast on a web page

Web AIM explains how to check colour contrast with Dev Tools. This includes checking hover and focus states.

Another quick way to check elements of a page is by using Dev Tools in Google Chrome or Microsoft Edge. This works for most web page elements.

In either browser, open Dev Tools by right-clicking and choosing 'Inspect' at the bottom of the menu. Or you can just use the key combination ctrl + shift + I.

Then navigate to the select element button - this is the arrow icon in the top left of the Dev Tools window (screenshot below).

Moving your mouse over individual elements should show various CSS and accessibility values for the element.

For most elements, the browser will then show you the contrast ratio between the element and its background. It will appear in a little pop-up (screenshot below). If it passes, there should be a green tick next to the contrast ratio.

Checking colour-only links

Some links only show colour and are not underlined. Use this contrast checker from Web AIM to evaluate colour-only links (opens new window) (opens in a new window).

WAVE extension tool

The WAVE extension tool (opens new window) (opens in a new window) can review your web page to check colour contrast is sufficient. Web AIM explains more about how to use WAVE.

Read more

• Minimum colour contrast ratio for text (Web Content Accessibility Guidelines (WCAG) website)
• Minimum colour contrast ratio for non-text elements (WCAG website)

Government Digital Service (GDS) advice on tables says:

'Tables should only be used to present data. Do not use tables for cosmetic changes to layout, for example to present a list because you think it looks better that way'.

When you use a table to present data on a web page, it must have:

• No split, merged, or empty cells
• A formatted header row
• A reading order that makes sense

Why tables need to be accessible

Inaccessible tables are difficult for people using:

• A mobile or tablet - over 60% of www.norfolk.gov.uk users use these devices
• Screen readers - they need tables set out in a certain way to understand them
• Only a keyboard - some people are not able to use a mouse and only use a keyboard to navigate

How to make tables accessible on a web page

Read Web AIM's guidance on how to create accessible tables.

Your web page might contain instructions that users need to follow. Accessible instructions must not refer to visual items on your web page. Instructions that mention visual items can be problematic for people with visual impairments. For example, to be able to follow 'apply using the green button below', you would need to be able to see colours and shapes.

A good example: 'Complete our online form to apply'.