Site menu

How to make web pages accessible

What this guide is for

This guide is for web page editors. You may find it helpful if you have admin access to create or edit pages on:

  • Websites (including public facing websites, our intranet (myNet) and SharePoint sites)
  • Digital systems

It explains how to make web pages accessible. We have created a checklist so you can make sure you have covered everything.

Most content can, and should, be published as a web page. Read why content should be published as a web page.

If you want to find out more about accessibility or why digital content needs to be accessible, go to our about accessible content page.

Responsibility for making web content accessible

Check who is responsible for making web content accessible.

How NCC staff can get help to publish accessible content.

Checklist

Before you publish your web page, you must check: 

  • It has a unique and descriptive page title
  • It has descriptive headings that are formatted using the correct heading level 
  • Written content is in plain English 
  • Any link text describes where the link takes the user 
  • Any lists are presented using the correct HTML elements 
  • Any informative images have alt text 
  • Text and any other content users need to understand the page have good colour contrast
  • Any tables are used to present data and have accessible formatting 
  • Any instructions don't rely on the user being able to see the page 

Testing tools

Each page in this guide suggests tools you can use to help you check the accessibility of your web page.  

These tools include automated and manual checks. You must not rely on automated checks alone to check the accessibility of your webpage, as they can't find all issues. 

You might also find the WAVE browser extension useful. This checks multiple parts of your web page at the same time. 

Page title

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 - this means that none of the pages on your website should have the same title
  • 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.

How to check a page title

Open the web page in a web browser, like Microsoft Edge or Google Chrome. There are then several ways to find out the title of the webpage:

  • The page title is usually shown as the name of the browser tab. Hover your mouse over it to see the full title
  • If you are using a screen reader, your screen reader should read the title out to you
  • Open the browser developer tools (devtools) and look for the 'title' element in the HTML

How to edit or add a page title

Most content management systems (CMS) allow web page editors to edit the page title. This could be in a 'Metadata' or 'Properties' section.

Some CMSs use the main page heading text as the document title.

For example, when you create a new page on a SharePoint site, you are prompted to add a page heading. This text is also automatically used as the page title.

When editing a SharePoint page, you can change the page title by selecting the first button in the Command Bar. This will be called 'Page' if you haven't added a page heading yet.

This will show a 'Title' field, where you can enter your new page title.

Headings

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.

Headings must be clear and describe the content in the sections they introduce.

You must format headings using the correct HTML element, like 'h1' (heading 1), 'h2' (heading 2) and 'h3' (heading 3). Don't rely on visual formatting, like bold or large font size, to show a heading.

You must format headings using the correct heading level:

  • The main text heading on your web page should always be a h1. There should usually only be one h1 on the page.   
  • The main sections on your web page should be introduced with h2s.
  • Headings for sub sections should be h3s
  • You can also format headings as h4s, h5s and h6s if you need to. If you need more levels than this, it's a sign that your heading structure is too complicated. Consider splitting your content across multiple pages.

Our Join the library page is an example of a page with effective and accessible headings:

screenshot of headings on the join the library page. It is described in the page text

The screenshot shows the page has:

  • A main text heading, 'Join the library'. This describes the page content and is formatted as a h1
  • Two section headings, 'Why join the library?' and 'How to join the library'. They describe the content in those sections and are formatted as h2s
  • Two sub-headings within the 'How to join the library' section: 'In person' and 'Online'. They describe the content in those sections and are formatted as h3s

Why web pages need headings

Web pages need headings to help users:

  • Understand what the page is about
  • Understand how the page information is organised
  • Find specific information on the page quickly and easily

How to check headings

  1. Open the web page in a web browser, like Microsoft Edge or Google Chrome.
  2.  Read through the headings on your web page to check they are clear and describe the content in the sections they introduce.
  3. Check the headings are formatted using the correct heading level and there aren't any empty headings:

How to edit or add headings

Most content management systems (CMS) allow web page editors to edit or add headings in at least one of the following ways:

  • Manually edit or add heading elements in the HTML
  • Apply headings 'styles' to text using a formatting toolbar

For example, when editing a SharePoint site page, editors can apply headings styles using a 'Paragraph style' drop-down list in the text formatting toolbar.

Written content

You must make sure that text on your web page is easy for people to read and understand.

Plain English

Write your web page in plain English. Plain English uses simple wording and does not contain jargon.

Plain English benefits everyone. This includes:

How to write in plain English

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

Technical terms and abbreviations

You can include technical terms and abbreviations on your web page. But you should explain what they mean the first time you use them.

For example, the first time you use an abbreviation like 'NCC', write 'Norfolk County Council (NCC)'.

Instructions

Your web page might contain instructions that users need to follow.

You must make sure that any instructions on your web page don't rely on the user being able to see the web page or hear its content. This includes only describing things based on their:

  • Colour
  • Shape
  • Size
  • Visible location
  • Sound

You should make your instructions more accessible by referring to visible text. Even though some visually impaired people may not be able to see the text, they can use assistive technology to translate it to a format they can access.

You can still include references to appearance or sound too, if you think they will help users.

For example:

  • Don't write: 'Apply using the square green button'
  • Do write: 'Apply using the square green 'Submit' button'

Links and link text

Link text is the visible, clickable text in a link. It's often a different colour to other text and sometimes underlined.

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 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:

Bad URL link text examples:

We recommend writing email addresses out in full - like '[email protected]' 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

Lists

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

Accessible list formatting  

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

This will:  

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

Watch a demo of VoiceOver screen reader reading lists.

How to check lists 

  1. Open the web page in a web browser, like Microsoft Edge or Google Chrome. 
  2. Check any lists are formatted using the correct list HTML elements: 

How to edit or add lists 

Most content management systems (CMS) allow web page editors to edit or add lists in at least one of the following ways: 

  • Manually edit or add list elements in the HTML 
  • Apply list formatting to text using a toolbar 

For example, when editing a SharePoint site page, editors can apply list formatting using the 'Bulleted list' and 'Numbered list' buttons in the text formatting toolbar.  

Alt text

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.

Colour contrast

Colour contrast is the difference between two colours. Colours with good contrast stand out from each other. Colours with poor contrast look similar and can be difficult to tell apart. 

Factors like tiredness, screen displays, light levels, age and visual impairments can all affect how difficult it is to tell colours with poor contrast apart. 

Using good colour contrast means more people can understand and navigate your web page. 

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

What to check 

Colour contrast ratio measures the difference between two colours using numbers. You should use colour contrast ratio to check that colour combinations on certain parts of your web page have accessible contrast. 

The accessible contrast standards we must meet are detailed in the Web Content Accessibility Guidelines (AA standard). We summarise them on this page. 

Text 

Normal text is unbolded text under 18 point/24px and bolded text under 14 point/18.5px. Normal text colour and the colour behind it must have a colour contrast ratio of at least 4.5:1. 

Large text is unbolded text that is 18 point/24px and above and bolded text that is 14 point/18.5px and above. Large text colour and the colour behind it must have a colour contrast ratio of at least 3:1. 

Non-text content in interactive components 

Interactive components include things like links, buttons and form fields.  

Any non-text content, like icons, that users need to be able to see to identify the component must have good colour contrast. It must have a colour contrast ratio of at least 3:1 with the background colour. 

Non-text content in informative images 

Colours that are next to each other in informative images must have a colour contrast ratio of at least 3:1. 

For example, if you had a pie chart on your web page, you'd need to make sure that: 

  • The pie chart's segment colours and the document's background colour have good colour contrast 
  • The colours of segments next to each other have good colour contrast 

Our alt text page has advice on how to decide if an image is informative or decorative. 

Decorative images and logos do not have to have accessible colour contrast. 

How to check and correct colour contrast 

There are lots of different tools available to help you check colour contrast and find more accessible colour combinations. 

You should use the tools you feel most comfortable with. However, bear in mind that using browser developer tools (devtools) usually gives the most accurate results. 

Find out more 

Tables

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, you must make sure:

  • It has a clear, logic layout
  • It has at least one descriptive header row or header column, formatted using 'th' (table header) HTML elements
  • Any merged or split cells are formatted using appropriate HTML

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

How to check tables

  1. Open the web page in a web browser, like Microsoft Edge or Google Chrome.
  2. Check that any tables have at least one header row or column with text that clearly describes the data in each row or column.
  3. View the table HTML by either:
  4. Check the table HTML is correct by following W3C's tables tutorial

How to edit or add tables

Most content management systems (CMS) allow web page editors to edit or add tables in at least one of the following ways:

  • Manually edit or add table elements in the HTML
  • Apply table 'styles' to tables using a formatting toolbar

For example, when editing a SharePoint site page, editors can apply header row and column formatting using the 'Table styles' button in the text formatting toolbar.

Share this page