Learn how to use colour, navigation and labelling to make your website or digital service more accessible.
This resource is for anyone responsible for a website or other digital media at your non-profit.
It covers how to identify barriers that prevent, limit or block people from achieving their goals on your website. This isn’t a technical guide. Once you know what to look for you can identify the most common barriers visually or using free tools. Identifying them means you can avoid them. This will make your website more inclusive.
About me
My name is Jamie. I focus my work on inclusion and accessibility. I recently left the BBC after spending the last 11 years in senior accessibility and engineering roles. I’ve been working in the digital space for over 20 years.
In that time I've worked alongside technical, design, product and organisational leaders to build inclusive products that are used by millions of people everyday.
80% of barriers relate to colour, navigation or labelling
Accessibility and inclusive design are deep subjects. But a handful of simple and common barriers are responsible for most of the issues which exclude users.
Roughly 80% of barriers fall into one of three groups:
Group 1: Barriers relating to how we use colour
Group 2: Barriers relating to how a user navigates and moves around a website or app.
Group 3: Barriers relating to how we name (or label) the elements within a website or app.
Once identified, we can usually remove these barriers with small tweaks and changes.
1. Colour
For most users, apps and websites are a visual experience.
Our vision allows us to make meaning out of the shapes, colours and text we see. But we all have a unique experience of vision. Due to differences in eyesight and the devices we use, no two people ever see things in quite the same way.
Within our vision, perception of colour varies the most from person to person and device to device. This makes barriers relating to colour are likely to impact most of us at some point in our online life.
To identify potential colour barriers look out for:
- How a colour contrasts against other colours
- If a colour is being used to convey meaning.
Identify and remove these barriers so a wider range of users can interact with your website or digital service.
About contrasting colours
Contrast is the measure of how easily a user can tell two colours apart. For example being able to read text against a background, or perceive the edges of a dropdown menu or button. .
At some point all users will be unable to tell the difference between two colours. This point may occur sooner for older users, users with a vision impairment or users with low end devices. Lighting also plays a role. When using a phone in direct sunlight, more contrast is needed for the content to remain visible.
How to measure contrast
There are many ways to measure contrast. The most common comes from the Web Content Accessibility Guidelines (WCAG). WCAG is used as the legal requirement within UK and European laws.
The WCAG method provides a “contrast ratio” score for pairs of colours at different type sizes. For text smaller than 18px the required contrast is “7:1” and text over 18px its “4.5:1”.
It’s possible to hand calculate and test all the colours we use, but most of the time we use automated tools.
For web pages, I'd recommend using an automated scanner called WAVE. WAVE identifies areas where contrast dips below the recommended levels.
Testing apps is a little more complex. Methods depend on the type of phone and what information you have. This is my go to guide for checking contrast in apps.
Another method for quickly evaluating contrast is to turn the brightness of my monitor way down and see what content becomes hard to read. It’s not precise, but it's quick and gives a good approximation of where contrast barriers may exist.
Colour as a way to convey meaning
Even with great contrast, colour is still an unreliable way of conveying meaning.
It's best to use colour as an enhancement rather than relying on it being visible to users. If we design our graphs, charts and other graphics to make sense without colour they will be readable to a wider range of users in a broader range of situations. We can achieve this by using different styles of line, different symbols (squares, triangle etc) or shading things in different patterns and colours.
The same barrier also occurs with elements such as buttons and links. We can sidestep this barrier by adding an underline to our links and buttons which disappears when the user interacts with them. This technique is common. We made extensive use of it on BBC websites and apps.
2. Accessing and navigating interactive content
Most digital products have at least one interactive element. It could be the main navigation, a form or a button.
Most users will access interactive things by tapping a screen or using a mouse, trackpad or some other way to drive a cursor on the screen. We refer to all these as pointers.
Some users will move through the page using the tab key. This helps them navigate from item to item in a linear way. You may have done this while filling out an online form.
The focus order system
The tab key is connected to a system known as ‘focus order’. When the tab key is pressed it moves the ‘focus’ to the next interactive item on the page.
You may have seen the focus system in action. It’s often rendered as a little blue or black outline around an interactive element.
The focus system is very flexible. As well as the tab key, the focus system can be controlled and used by assistive devices such as bite switches, blow switches, big round buttons, eye gaze tools and more.
I have a spinal cord injury. As I was in hospital for my injury I had very little movement. Focus order and the mobile app equivalent enabled me to use my phone and the web. When I made an “uh” noise my phone moved focus to the next item. Going “Mmmm” made it click the focused item. It was slow, but it worked. I was not excluded from my digital life.
How to test the focus order
To test the focus order on a website, press the tab key. If it’s working you should be able to clearly see where the ‘focus’ is and you should be able to tab your way to every link, button and form on the page.
When you press the enter key it will act like clicking the item. If clicking an item opens a menu, pressing escape should close it. If this system works, your website or app is likely to be accessible to a wide range of users.
3. Labelling elements
Labels are the names we give to all the interactive elements in our web pages and apps. Barriers arise when labels are missing or unclear.
As we move through the focus order with the tab key, each item we land on will have a label of some type. Most often the label is text or an icon.
Depending on the user's device and their abilities, they may not be able to see or understand the labels we give things.
Not everyone uses an app or website visually. Labels are a critical part of making a website accessible and inclusive.
Assistive technology tools such as screen readers (which read aloud the text in digital products) and speech controllers (which perform commands spoken by the user) rely on the labels we use to work.
About good labels
A good label should convey the meaning and purpose in a unique and clear way. For example, a link to send an email displayed as an envelope icon should have the label ‘email us’ rather than ‘envelope’. Links to ‘read more’ should include the context, such as “‘read more about our services”
By identifying the labels and confirming they are meaningful we can ensure users of assistive technology are able to access our digital products.
When I was in hospital after my injury I couldn’t read my phone screen either. I navigated my phone by making noises and I heard the content as my phone read it aloud.
How to test labels
Labels are something we can test manually, or by using a tool. The WAVE scanner we used for checking colour contrast will also identify elements with missing labels.
The scanner is unable to tell if a label is meaningful. So it provides us with a way to view all the labels on the page so we can decide for ourselves.
Most labelling barriers happen with links, buttons, forms and images. But they also arise when media content lacks captions, audio descriptions (for video) and text transcriptions for audio. These ‘labels’ are known as ‘text equivalents’.
It’s not only users who benefit. Search engines use labels to analyse and rank the content of your website. Good labels make your content easier to find.
Final thoughts
Accessibility is a deep topic with many detailed corners. But it all comes back to barriers.
If you take care with colour, are mindful of how users interact and provide meaningful labels you’ll be off to a good start to removing them.
Read about Inclusive digital design: accessibility, assumptions and barriers.
Support & services
Our free services help you make the right decisions and find the right support to make digital happen.
Learn what other non-profits are doing
39+ organisations share 50+ Guides to how they use digital tools to run their services. Visit Shared Digital Guides.
