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:
- impaired vision
- motor difficulties
- cognitive impairments or learning disabilities
- deafness or impaired hearing
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:
- meet the international WCAG 2.1 AA accessibility standard – although there may be valid legal reasons for not meeting accessibility standards
- publish an accessibility statement that explains how accessible your website or mobile app is
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 (atlassian.com).
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:
- how to create charts that communicate messages clearly and with impact
- best practice approaches for formatting and publishing data visualisations
- how to make data visualisations more accessible to all, regardless of health condition or impairment
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.
Icons
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
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
HTML
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.
Formatting
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.
Image source: pauljadam.com
Help people navigate your content by:
- keeping line lengths short (nobody likes to scroll horizontally!)
- making your text left-aligned
- making sure there is space between lines
- adding space between paragraphs
Readability
Language itself needs to be accessible. Read our content design tips to improve your content [link].
Some content rules to follow:
- Always use plain language
- avoid jargon
- no Latin
- explain abbreviations
- avoid legal or technical words
- Avoid walls of text – use subheads, bulleted lists, short sentences and paragraphs.
- Remove visual stumbling blocks – do not use italic, bold or underline .
- Characters such as /, &, +, – can be problematic or ambiguous. Many people using screen readers turn off punctuation.
- Avoid link text such as “click here” or “more” – links need to have context, so the user knows where they are going.
- Avoid “see below” – the use a specific location necessary for the user to navigate the page.
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.
- Readability Guidelines
- The Plain English Campaign free guides
- Grammarly
- The Hemmingway App
- Microsoft Word document readability
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:
- Always be respectful of a person or group’s preference regarding vocabulary.
- Remember there is a difference between respectful and appropriate language for those belonging to a group (in-group) and those who don’t belong (out-group).
- Make a conscious effort to reflect diversity in written work and images. Consider different cultural, ethnic, religious, or racial backgrounds, as well as age, gender, sexual orientation, and disabilities (visible or not), of all people.
- Avoid using descriptors that refer to a person’s race, gender, sexual orientation, disability, or age, unless those descriptors are essential to the writing.
If it is necessary to use a descriptor, the person should always come first. Use language that emphasises ability and conveys a positive message.
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:
- Guide to writing inclusive content
- Words and phrases to avoid or be cautious of
- Readability Guidelines: Writing about people
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:
- Celebrating neurodiverse superpowers by Tony Richards and Sarah Crandall
- Neurodiversity and designing for difference by Nia Campbell, Content Design London
- Designing for people with dyscalculia and low numeracy by Laura Parker, Jayne McFadyen and Rachel Malic
- Designing with the autistic community by Irina Rusakova
- How to use Bionic Reading for people with dyslexia and ADHD by Joe Fedewa
- How to write dyslexic-friendly web content: colours and fonts from Scope
- Simple writing is better writing by Ettie Bailey-King
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.
- Never use emojis to replace words.
- Do not use emojis as the only way to express an emotion you intend to communicate.
- Use popular emojis that are widely recognised.
- Use emojis that translate well across devices.
- Put emojis at the end of sentences, and do not use repeated or too many emojis.
- Use emojis, not emoticons.
- Avoid emojis that are not visible in both dark and light modes.
Further reading from UX Design.
Images, animations, video and audio
Images
A picture can be worth a thousand words. But only if you can see it.
- Always add alt tags to your images.
- Avoid using text in images.
- Be mindful of colour contrast in images.
- Be mindful of the brightness.
- If there is information in the image (such as a chart or graph), please put this information in HTML too.
GIFs
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:
- flash more than 3 times per second
- be sufficiently large (a very small flashing image, such as a cursor, will not cause a seizure), and
- be bright, with significant contrast between flashes
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.
Videos
When publishing videos to the internet, the following guide will help to ensure your content is accessible:
- Add closed captions.
- Be mindful of video design (see GIFs section for advice on bright or strobing designs).
- Use alt text on thumbnails.
- Transcribe visual or auditory media.
- Make the right colour choices.
- Include video descriptions on social media.
- 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
- Keep links and hashtags to a minimum (but always link to more information)
- Start with the basics and work up – aim for a 9-year-old to start with
- Avoid jargon and acronyms
- Accessible design of images
- If you can add alt text, please do
- Ensure the copy clearly tell the user where the link will take them (clickbait should be illegal!)
- Video content should have captions and audio description
- Only use a GIF if it adds value to the content
Making social media accessible – GDS Digital Engagement (blog.gov.uk)
Social Media Playbook – GDS Digital Engagement (blog.gov.uk)
Accessible communications – GCS (civilservice.gov.uk)
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
- Digital Accessibility Experts Live
- Aus Gov accessibility toolkit
- W3C accessibility (intro to accessibility 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:
