Accessible Marketing Part 1: Websites

7 in 10 disabled customers leave a website that’s difficult to use.

Here’s the situation: one billion people have some form of disability or impairment, and in the UK 23% of the population are disabled. That’s an eye-opening figure that illustrates just how important it is for businesses to create accessible websites that everyone can engage with.

We’ve put together a comprehensive guide to what an accessible website looks like.

Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) are the most important guidelines for web accessibility. Primarily for web developers to follow, they help avoid and fix any barriers that users with disabilities may face online.

WCAG is organised by four key principles:

Perceivable: Users must be able to adjust colour contrast, font size or view captions for videos.

Operable: Users must be able to perform required interactions using a keyboard or voice commands, not just using a mouse.

Understandable: Information and instructions should be clear and navigation methods should be easy to understand and use.

Robust: Content must be robust enough so that if technologies evolve, code and content should remain accessible for users with assistive devices and tools.

Screen readers

Screen readers read out loud any text or other elements that appear on a computer screen. Think of them as a digital personal assistant to anyone who is blind or has low vision.

They access the underlying code of websites and applications to understand what components are involved ‒ that could be text, buttons, menus or images. The information is then turned into spoken words, enabling users to hear the content.

Keyboard navigation

Not everyone can use a mouse ‒ people may have motor disabilities which prevent them from traditional scrolling, and so they rely solely on the use of a keyboard. To make your web page keyboard accessible, there are a few things to keep in mind:

• Use a visible indicator to help make it crystal clear which elements are in focus.
• Use a logical tab order so keyboard users have no problem following the visual order.
• Provide skip links to whisk users straight to the main content.

Colour contrast

WCAG provides a series of guidelines for minimum contrast requirements to make websites easier for visually impaired users to see. Choosing text and backgrounds that contrast clearly with one another is one of the easiest ways to make your website more accessible. But it comes with a few important things to consider:

• Use text and a background that everyone can see ‒ It’s difficult to differentiate between colours when they don’t contrast strongly with one another, so avoid the reds and the greens. Accessibility tools are a great way of whipping up a high-contrast palette based on your brand colours, allowing you to stay on-brand whilst being inclusive.
• Use a palette with the right contrast ratio ‒ The simple rule of thumb is to use high contrast colours all of the time. It’s best to aim for at least a 4.5:1 ratio for regular text, but a 7:1 ratio gives users an even more accessible experience.

Accessible buttons

Buttons are an essential component for a website’s overall usability and accessibility. As with all website components, they need to be easy to use, and the buttons need to be accessible to those who use assistive technology. So how do you do it?

• Create visual cues alongside dialog context ‒ this will lead users to the right places. For example, you can add an Aria label to a button, which will make components like a menu button or a toggle button more usable and visible.
• Use big buttons with a large click space ‒ 22×22 CSS pixel size is the minimum, but if you’re going for high accessibility, a larger size is the way to go.
• Be wary of the difference between buttons and links ‒ it’s an easy mistake to make. Buttons perform functions, whereas links will take you to another page. So make sure you have proper encoding cues and add extra code to make this clearer, otherwise accessibility tools will struggle to recognise the difference.

SEO

Accessibility and SEO go hand-in-hand; they both focus on optimising websites for better user experiences. Having an accessible website is extremely valued by search engines, and while they may not have a specific ranking factor, when accessibility is prioritised, everything becomes more user-friendly, leading to improved SEO metrics.

Accessibility Audits ‒ have you covered everything?

Understanding how your website can be more accessible is challenging, which is where accessibility audits come in.

What are they?
Accessibility audits provide a helpful check-up on your digital and product services by singling out any accessibility issues and making any recommendations.

Testing your website
An audit can test your web content against the success criteria of the Web Content Accessibility Guidelines (WCAG).

Highlighting missing components

Whether it’s absent alt text, inadequate colour contrast or inaccessible website elements, audits uncover areas for improvement.

Improving your accessibility
Audits will ensure that all digital services are accessible to anyone with a physical, hearing, sight or neurodiverse disability.

Accessibility is a huge topic, and it doesn’t stop at websites: you need to ensure all your marketing collateral is up-to-speed, from your emails to your copy to your printed material. We’ll be releasing more articles in this series, so keep your eyes peeled for the latest lowdown.

If you haven’t yet considered the accessibility of your website and would like to improve the user experience for more people than ever before, get in touch ‒ it all starts with a conversation.