Seven tips to make your e-commerce website more accessible

Online businesses such as e-commerce stores could be missing valuable sales by not making their websites as accessible as they could be.

With around 14.6 million people in the UK reported as having a disability, and the online spending power of people with disabilities estimated at £16bn, accessible e-commerce sites can help grow your bottom line.

For those with disabilities that affect their mobility or their social skills, online shopping is sometimes the only option to buy products and services.

However, not all websites are easily accessible for those with disabilities, meaning the shopping experience can be difficult and exclusionary.

The Purple Pound reported that 73% of disabled customers have faced accessibility issues when shopping online.

According to research (PDF, 229 KB) Opens in new window, nearly three-quarters (71%) of disabled online shoppers click away from websites that they find difficult to use, with online retailers losing out on a potential combined spend of £11.57bn.

What is accessible web design?

Web accessibility is built on the idea of universal design, ensuring websites that are usable by everyone, regardless of any disabilities they may have.

There are many benefits to having an accessible website, including:

• better industry and social reputation
• access to a larger customer base and potentially greater sales
• avoiding potential challenges relating to discrimination
• greater visibility in some search engine results pages.

Seven ways you could make your website more accessible

If you don’t experience difficulties yourself in accessing website, it can be difficult to figure out which aspects of your website you need to make accessible.

However, there are many suggestions and recommendations online that can help.

1. Don’t rely on colour to deliver information

Approximately 4.5% of the UK population is colourblind.

Colour blindness comes in many different forms and degrees but typically those affected are unable to see colours clearly or differentiate certain colours, making it difficult for them to experience your website as intended.

Choose colours carefully when designing a website.

Two key areas to pay attention to are: colour contrast and the use of colour alone to convey information or instruction.

Consider adding written prompts or labels for links or interactive elements.

You can use a colour accessibility website checker, such as WAVE, to ensure your website colour contrasts work well for everyone.

2. Broaden device compatibility

Think about how individuals access your e-commerce website – from a desktop or tablet, choice of web browser or by using assistive technology.

Test your website using different screenreaders, devices, and assistive technology.

Ask users to send feedback on their experience using assistive technologies so you know how to improve your site.

3. Enable keyboard navigation

Some online shoppers may have poor hand function and mobility, making it difficult for them to navigate websites using a mouse or trackpad.

An alternative is to use their keyboard instead, as it requires less dexterity.

When implementing a keyboard navigation system, it’s important that the system order – where items on a webpage are highlighted as user tabs through them – is intuitive and logical.

This is particularly important if you’re selling products, as it makes it easier for customers to select the items they want.

When testing the keyboard navigation, use a screen reader to hear the content described as you move through elements with the arrow or tab keys.

Ensure that what is being read out by the screen reader is what is indicated on the website.

4. Prioritise colour and text options

Prioritise text clarity to make your e-commerce site accessible across a variety of visual impairments and disabilities.

Text clarity is about making sure any text is easily identifiable and readable.

Providing different text size and font options for visitors to pick from, as well as different and sufficient colour contrasts between the text and background, can help improve text clarity.

Read more about how to find the correct size and colour contrast ratio in the Web Content Accessibility Guidelines by visiting W3.org.

5. Create audio and video options for your content

Larger online websites have begun adding audio recordings to the top of web pages.

This makes content more accessible for visually-impaired visitors and those who have trouble reading.

While e-commerce stores often use video content to showcase products, adding audio descriptions and subtitles enables disabled shoppers to fully understand the intended meaning of the content and not incorrectly infer meaning from the visuals or in-video audio alone.

6. Make clickable areas larger

Small buttons and links can be difficult to click on for those with limited mobility or dexterity.

If your website has clickable areas, such as fields to enter text, select an option, or click ‘buy’, a simple way to solve this accessibility issue is to make the buttons bigger and easier to click on – the minimum recommended size is 44×44 pixels.

7. Use real customer feedback

Ask visitors and customers what will make shopping on your website easier, or the challenges they face when shopping online.

By undertaking user research, you can work towards creating a more inclusive shopping experience while also avoiding alienating current and potential customers.