Building accessible and inclusive services

Read about why accessibility is important and ways to make your services more inclusive and accessible.

The importance of accessibility 

The disability charity, Scope, found that at least 1 in 5 people in the UK have a long-term illness, impairment or disability. Many more have a temporary disability. 

There are 4 main types of disabilities to be mindful of when designing products or services: 

Making your services accessible 

There’s no such thing as being fully accessible, only more or less accessible to individuals. 

Ensuring our products and services are accessible is a legal requirement for all public services. Services must: 

WCAG 2.1, an internationally recognised set of recommendations for improving web accessibility. The Web Content Accessibility Guidelines (WCAG) define how to make Web content more accessible to people with disabilities. 

Visual design 

Colour contrast 

Web Content Accessibility Guidelines 2.1 guidance states there should be a contrast ratio of 4.5:1 to meet the minimum AA level standard. 

Tools to help check the colours you use 

WebAIM Colour Contrast Checker 

In this tool, you enter a foreground and background colour in RGB hexadecimal format (e.g., #FD3 or #F7DA39) to check the colour contrast.  

Colorzilla is an excellent tool for extracting the colour value from any page element to use with this checker.  

Colour Contrast Analyser (CCA)

TPGi’s free colour contrast checker tool allows you to easily determine the contrast ratio of two colours simply using an eyedrop tool. 

Coblis – Color Blindness Simulator 

This amazing tool allows you to see what your images look like to people with colour vision deficiencies. The Color Blindness Simulator allows you to experience different types of colour blindness. 

All the calculations are made on your local machine, no images are uploaded to the server. Therefore, you can use images as big as you like, there are no restrictions.  

Avoid using colour alone to convey meaning 

You should never use colour alone to convey meaning – not everyone will see the colours or recognise the contrast.  

The project management tool, Trello introduced patterns to its card colours (

People with different forms of colour blindness may view stacked bar charts differently. A chart that uses 3 colours would look very different to a colour-blind person and therefore lose meaning. 

A very quick and easy way to test how people may view how you have used colour is to print your webpage or graphic in black and white only. This will give you a quick way to see how the colour may lose meaning.  

Read more about using more than colour to show meaning 

Data visualisation  

Charts and graphs are tools often used to communicate messages but often, their use is inaccessible to many and can be misleading.  

The Analysis Function Central Team in the UK Civil Service has created this data visualisation e-learning course for anyone who must create data visualisations.  

The course covers: 

The course has 11 modules and how you complete it is up to you. You can do all the modules at once, or one or two a day. To help you decide, each module comes with an estimate of how long it should take to complete. 


Many web pages use icons to supplement or replace text. Many of these are common, such as three lines (a hamburger icon) to represent a menu, a cog to represent settings or an envelope to represent an email. 

When using icons, ensure they have a text alternative to show what they mean and, if clickable, to be clear to the user where the icon will take them.  

Icons should be simple, easy to understand, and consistent. Icons almost always require familiarity to be useful.  

Across cultures and languages, they can be misinterpreted. In many cases, using adjacent text is helpful. 

Avoid introducing icons that are not widely used and known by all. They will cause confusion to the user. We want to make our services inclusive, so don’t make the user work harder. 


Animations on web pages rarely enhance accessibility. Most of the time they are simply annoying and distracting.  

The use of animation should almost always be user controlled or very short in duration. Images that continually animate can cause the rest of the page to be more difficult, or for users with very high levels of distractibility, inaccessible. 

WCAG 2 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user. Common failures include carousels or sliders that automatically animate or cycle through content. 

Accessible content 


Everything on a website that is text, should be in code. 

Avoid putting text in an image or graphic.  

Learn more about HTML on W3 Schools


People using assistive tech often browse differently from those who don’t use technology or machines to help them browse. 

Those using speech activation, or screen reading software, will browse using the options in the tech.  

This image shows how a person may browse in Chrome on an Android phone.  
Image source:

Help people navigate your content by: 


Language itself needs to be accessible. Read our content design tips to improve your content [link]. 

Some content rules to follow: 

The readability and language of your content can be scored and measured to make it easy to understand for all.  

Tools to write accessible content 

These tools help to understand ways to make your content more inclusive and improve written communication.  

Inclusive language 

The content we write should be inclusive and open to all. Even if we know our users well, we should remain open to other people being interested in our content – this is why we believe even highly technical information (such as technical or legal documentation) should be as easy to understand as possible. 

We have the power to create an inclusive, supportive environment for all people, we can embed the spirit of inclusion into every piece of content we create and publish. 

Inclusive language respects and promotes all people by using vocabulary that avoids exclusion and stereotyping and is free from descriptors that portray individuals or groups of people as dependent, or less valued than others. It avoids all discriminatory terminology. 

A few guiding principles: 

Be aware that preferred terms change over time and language evolves. If you are unsure about how to proceed with a certain text, always stay on the side of caution. 

There is a lot more information in the following guides: 

Designing for neurodiversity 

Our brains all work differently and the diversity in how our brains make sense of the world around us is often referred to as neurodiversity.  

Neurodiversity refers to differences in how people socialise, learn, their moods or their attention. Some ways people can be classified as neurodiverse is when they have been diagnosed with things such as OCD, dyslexia, ADHD, Bipolar, and Autism Spectrum Disorder among many other forms.  

Many of the best practice advice shared help with neurodiversity, such as ensuring content is easy to understand for everyone.  

There are more and more articles and blog posts being written about neurodiversity: 

Emojis and emoticons 

Below are some rules for using emojis or emoticons in your content. These are research-based and have been taken from the Readability Guidelines

  1. Never use emojis to replace words. 
  1. Do not use emojis as the only way to express an emotion you intend to communicate. 
  1. Use popular emojis that are widely recognised. 
  1. Use emojis that translate well across devices. 
  1. Put emojis at the end of sentences, and do not use repeated or too many emojis. 
  1. Use emojis, not emoticons. 
  1. Avoid emojis that are not visible in both dark and light modes. 

Further reading from UX Design.  

Images, animations, video and audio 


A picture can be worth a thousand words. But only if you can see it.  


Avoid using GIFs. 

GIFs and moving images cause lots of problems for many people. They can be a distraction and stop somebody from being able to complete a task.  

They can also be dangerous and cause seizures in some people if the image or media is bright or strobing. Seizures can be dangerous, even life-threatening. Don’t be responsible for causing them. 

To potentially trigger a seizure in a user with photosensitive epilepsy, a flashing image or multimedia must: 

Additionally, the colour red is more likely to cause a seizure.  

While large, flashing images are rare on the web, seizure-inducing media is more common in web video, especially HD-quality video that includes strobing special effects.  

Guidelines from the WCAG 2 Success Criterion 2.3.1 (Level A) define thresholds for frequency, size, contrast, and colour of strobing images. 


When publishing videos to the internet, the following guide will help to ensure your content is accessible: 

  1. Add closed captions. 
  1. Be mindful of video design (see GIFs section for advice on bright or strobing designs). 
  1. Use alt text on thumbnails. 
  1. Transcribe visual or auditory media. 
  1. Make the right colour choices. 
  1. Include video descriptions on social media. 
  1. Remove autoplay from videos. 

Audio files 

When publishing audio files, please always provide a transcript in HTML.  

Accessibility audits 

Conducting accessibility audits helps you ensure better visibility, compliance, and overall performance. It also makes it easier to identify which areas are causing the biggest issues for your users so that you can prioritise and focus on improvements. 

Conducting accessibility audits is an effective way to identify and resolve any existing issues and enables you to give people a better experience when engaging with your product or service. 

An accessibility audit of your website, app or service is not something I recommend you do yourself but I wanted to share this link to how to get an accessibility audit

Testing with users 

The best way to see what parts of your service cause issues to your customers or users is to test with them. 

We published a guide on how to get started with testing, this has lots of ways to start testing with real people and will help you to identify consistent issues or pain points in your service.  

Technical accessibility 

Everything we build should be as inclusive and understandable as possible. 

While we may sacrifice elegance in search of being inclusive, we never sacrifice accuracy. 

Browser testing 

Browser testing is a type of non-functional testing that lets you check if and how your website works as intended when accessed through different browsers, on different devices or with assistive technology. 

Tech and code best practice resources 

Pop-up windows 

WCAG 2.1 bans all popup windows without explicit alerts beforehand.  

New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of the user interface and expects to get a new window, such as an options dialogue.  

The failure comes when pop-ups appear unexpectedly. 

Technically, pop-up windows should use accessible scripting and the site should still be functional even if JavaScript is disabled. Also, be aware that many users with visual browsers use pop-up blockers to avoid pop-up advertising. 

JavaScript pop-up windows should only be used if they add a significant advantage in functionality. 

Social media and externally hosted content 

  1. Keep links and hashtags to a minimum (but always link to more information) 
  1. Start with the basics and work up – aim for a 9-year-old to start with 
  1. Avoid jargon and acronyms 
  1. Accessible design of images 
  1. If you can add alt text, please do 
  1. Ensure the copy clearly tell the user where the link will take them (clickbait should be illegal!)  
  1. Video content should have captions and audio description 
  1. Only use a GIF if it adds value to the content 

Making social media accessible – GDS Digital Engagement ( 

Social Media Playbook – GDS Digital Engagement ( 

Accessible communications – GCS ( 

Top tools  

Funkify – Disability Simulator 

Funkify is an extension for Chrome that helps you experience the web and interfaces through the eyes of users with different abilities and disabilities. 

WAVE Web Accessibility Evaluation Tools 

WAVE is a suite of evaluation tools that helps people to make their web content more accessible to individuals with disabilities. WAVE can identify many Web Content Accessibility Guideline (WCAG) errors. 

I personally like this tool for its easy way to insert a link to any webpage to access a free report. 

Online training 

Legal reading 

UK Government’s accessibility blog 

The UK Government’s accessibility blog helps to raise awareness and to share the knowledge, tools, techniques and research that will be needed to make government services accessible to everyone. 

The UK Central Government created helpful posters showing the dos and don’ts of designing for users with accessibility needs including autism, blindness, low vision, D/deaf or hard of hearing, mobility and dyslexia 

Highlights include: