Facebook Tracking Pixel

The key to building accessibility into your eCommerce store website

Published By:

woman looking at ipad

eCommerce has taken the world by storm. And the trend doesn’t seem like it will die down any time soon. According to the BCG, ecommerce is poised to capture 41% of global retail sales by 2027. This is great news for online stores, but with great power comes great responsibility.

To play their part in contributing to a fairer, more equitable society, ecommerce sites must make their products and services accessible to those with disabilities. Besides being the right thing to do, implementing accessibility best practices brings with it a range of compelling business benefits, from increasing sales to improving SEO rankings. Before you jump straight in, there is a lot of ground we need to cover. This article will break down the key steps needed to create a more inclusive online shopping experience, benefitting both your customers and your bottom line.

Why is web accessibility important for eCommerce stores?

Web accessibility is important for all websites, but particularly for eCommerce. Globally, over 1 billion people live with a disability. In the UK alone, 73% of people with disabilities have experienced barriers on more than a quarter of websites they visited, and 71% leave sites they find hard to use.

This demonstrates just how much of an impact web accessibility, or lack thereof, can have on your business. For ecommerce stores, your website is your store front, so if the browsing experience is not easy, users will go from potential customer to lost customer very quickly. In this way, your ability to create an inclusive online space is inextricably linked to your business’s ability to make a sale. It’s not just a moral obligation; accessibility is a business imperative.

recite me accessibility checker example

Free Accessibility Check of your Website or eCommerce Store

Detecting accessibility issues has never been easier than it is now. At Recite Me we offer a free automated scan of your websites homepage. This will identify and highlight any non-compliance on your website. Followed by recommendations on how to implement the necessary changes to improve your websites accessibility score and standing.

Key accessibility laws for eCom stores in the UK and Europe

So you’re sold. You agree that taking steps toward making your ecommerce store more accessible is necessary. Now, what? While it would be great to just jump straight in and start tearing down barriers to inclusion left, right, and centre, we first need to understand the laws which form the foundation of web accessibility. Knowing what is required of you legally, gives you something to aim for.

Web Content Accessibility Guidelines (WCAG)

WCAG is a globally recognised set of guidelines for making web content more accessible. It provides recommendations based on four key principles: perceivable, operable, understandable, and robust.

For ecommerce sites, this could mean adding alternative text for your product images, providing a minimum level of colour contrast across your web pages, or ensuring that your site is keyboard-navigable.

While not legally binding in itself, WCAG forms the basis of, and is referenced across, many regional accessibility laws, such as the European Accessibility Act (EAA). Think of it as your north star, guiding you along your accessibility journey.

Computer illustration

European Accessibility Act (EAA)

The EAA is European-wide law which requires businesses to make their products and services accessible to those with disabilities. It applies to any business operating within the EU, except microenterprises, and is particularly relevant to European ecommerce stores, who must ensure that everything from their product pages to customer service lines are barrier-free.

10 Strategies for building an accessible eCommerce store

While there might seem like a lot of rules and regulations involves, creating an online store does not need to be an overwhelming process. Here are 10 key accessibility strategies you can implement today to help you get started:

man holding a pencil to show a visual representation of alt text

1. Descriptive alt text

Alternative text, often referred to as ‘alt text’, provides a description of what the image contains. This is essential for blind users or those with visual impairments, as it allows screen readers to read image descriptions aloud. An ecommerce store, for example, might tag a product image of a red handbag with the following alt text: “Red leather handbag with gold buckles”. This provides enough detail for the user to know what the image contains without confusing them with too many words or too much jargon.

2. Clear colour contrast

People with vision impairments or colour blindness may struggle with low-contrast text. Make sure that text stands out clearly from the background by using dark text on a light background. According to WCAG best practices, the minimum contrast ratio for normal text should be 4.5:1. Use a contrast checker tool, or similar, to ensure your brand’s palette aligns with current accessibility guidelines.

3. Keyboard navigation

Some disabled users rely on keyboard accessibility, rather than a mouse, to navigate websites. Your site structure should accommodate this by allowing users to browse and purchase products using keyboard functions only, like the “tab” key and “enter”.

4. Font size and style

Font size and legibility help make your website content accessible for those with visual impairments or conditions such as dyslexia. Stick to simple, sans-serif fonts like Arial or Helvetica, and make sure your font size is easily readable – typically, a minimum of 16px, or 12pt, works well for body text.

5. Descriptive links

When inserting hyperlinks on your online store, rather than using generic link text, like “click here,” use descriptive link text that will tell the user exactly where they will end up by clicking on the link. For example, writing “view our summer collection” provides much more context about the link destination. This also improves your site’s SEO and helps visually impaired users who rely on screen readers.

6. Responsive design

Responsive design ensures your website works seamlessly across all devices, including mobile phones, PCs, tablets, and laptops. If, for example, your ecommerce site is designed for desktop viewing only, buttons, text, and images may appear too large or too small on a mobile device, making it incredibly difficult for anyone, but especially disabled users, to navigate your website.

7. Accessible online forms

Forms are essential for any ecommerce store. They are used both when customers first register their account and when they check out. Therefore, all forms need to be fully accessible. Label fields clearly, use placeholders in the field entry box to show examples of what is required, and provide specific instructions. And don’t forget that, like the rest of your website, forms should also be navigable via keyboard only.

Icon showing website

8. Content structure and headings

Structuring your website content with clear headings (H1, H2, H3) and a strong hierarchy brings about a range of accessibility benefits. First, it makes your online content easier to read for everyone, but especially for those with cognitive impairments.

Second, it helps users with visual impairments, who rely on screen readers, to better understand the structure of your content. Without a logical structure, certain elements might be misinterpreted, which can lead to inaccurate reading of the web page. The screen reader might even misunderstand the intended flow of the content, confusing the user by skipping heading or using them out of order.

9. Accessible multimedia

To create accessible videos and other media displayed on your ecommerce site, be sure to include captions, subtitles, or transcripts. This ensures that users who are hard of hearing or deaf can still engage with your content. Additionally, it gives non-disabled users the flexibility to follow along a video at times when there is too much background noise, or when they don’t have access to headphones in public spaces.

10. Compatible with assistive technology

Ensure your ecommerce site works well with different types of assistive technologies like screen readers, voice control software, and magnifiers. One way to do this is to add ARIA (Accessible Rich Internet Applications) labels to your site’s HTML elements. This gives assistive technologies, like screen readers, additional information about a given element’s purpose or functionality, helping users to better understand and navigate your store.

Ultimately, by making sure your ecommerce site is compatible with assistive technologies, you open your doors to a broader audience of disabled users, which, as well as being the right thing to do, helps you stand out from your competitors.

Online Accessibility and Inclusion Toolkit

This year we published our Digital Inclusion Toolkit that was developed to help businesses make a real difference to the lives of the millions of people around the world who encounter online barriers. The 40 page document provides practical advice covering the complete landscape of online accessibility from how to write an accessibility statement to our top tips for providing an inclusive recruitment journey.

mockup of the toolkit showing a page about colour contrast

Building accessibility with an eCommerce platform

If you’re striving to build an accessible online store, ecommerce platforms, like Shopify or Wix Commerce, should be your new best friend. But how do you know which one to choose? The right ecommerce platform for you can be rather subjective. But as a bare minimum, it should offer features that support accessibility and make it easier to comply with accessibility standards.

ecommerce illustration of woman sitting on mobile phone doing clothes shopping

Here’s a breakdown of popular platforms and how they cater to accessibility:

  • Shopify: Shopify is a user-friendly ecommerce platform which helps small businesses build an online store by offering a range of website templates and integrating with various payment gateways.
  • Squarespace Commerce: Squarespace is a popular choice, mostly for its aesthetically pleasing templates and ease of use. Its intuitive design means that creating an accessible ecommerce is simplified; easily adjust text size, colour contrast, and add alt text to images.
  • WooCommerce: WooCommerce is one of the most popular ecommerce platforms on the market today. As an open-source platform based on WordPress, WooCommerce allows for extensive customisation, opening up a huge range of possibilities for accessibility. 
  • Wix eCommerce: Wix ecommerce is ideal for small businesses looking to set up their online stores without much hassle. It offers a range of customisable templates, many of which come with screen reader compatibility, high-contrast colour schemes, and even visual indicators.
  • Magneto: In contrast to many of the other ecommerce platforms mentioned in this list, Magento is more suited to larger businesses and enterprises. It is a powerful ecommerce platform which offers a high level of customisation to its users. It supports ARIA attributes, keyboard navigation, and various assistive technologies.

The benefits of building an accessible eCommerce website for your business and its customers

Granting disabled people the same access to your company’s products and services as everyone else should be reason enough to make your ecommerce site accessible. But, fortunately for you, there are also a multitude of compelling business benefits that come with it too. Here are just a few:

  • Increased sales: Making your content available to a wider audience means more increases your pool of potential customers and, therefore, sales.
  • Better user experience: Implementing accessibility strategies improves usability for everyone, including non-disabled users.
  • Legal compliance: Adhering to WCAG principles helps you avoid fines and costly lawsuits associated with non-compliance.
  • Stronger brand loyalty: Demonstrating inclusivity builds trust and loyalty among ethically conscious consumers.
  • SEO improvements: Accessibility features like alt text and descriptive links helps improve your search rankings.
ecommerce website accessibility stats

Maintaining accessibility at your eCommerce web store

So, you’ve chosen your preferred ecommerce platform, implemented a few accessibility strategies, and made sure you’re WCAG-compliant. All well and done, right? Not quite. Once your eCommerce store is accessible, maintaining those standards is crucial.

Automated testing

Automated testing involves the use of software and other digital tools to audit your site for areas of inaccessibility. Auditing tools like Recite Me’s accessibility checker can be used to conduct a quick scan of your website, identifying any inaccessible or non-compliant features. Using such tools to conduct regular audits helps you stay on top of compliance with laws and guidelines.

Manual testing

Unlike automated testing, manual testing is conducted by humans, without software or third party tools. Typically, these tests are carried out in-house by developers or web designers, and can involve anything from checking navigation to checking that colour contrast ratios are within WCAG standards.

recite me accessibility checker example

User-testing

User testing differs from manual testing in that it is carried out by users, not developers or web designers. In this sense, it is the final step in the auditing process, and arguably the most important. Invite users with disabilities to test your site, and offer valuable feedback on how to improve the shopping experience. Capitalise on this feedback by implementing changes soon after. This demonstrates to your community a commitment to inclusivity.

Providing customisability

Beyond auditing, ecommerce sites can maintain accessibility long term by providing customisation options to their users. One of the best ways to do this is to integrate software, such as Recite Me’s accessibility toolbar, which allows users to customise things like text size, font style, and colour contrasts according to their specific needs.

Get serious about Accessibility Compliance with Recite Me

Act today to ensure your website or eCommerce store is accessible and compliant with the latest accessibility legislation. Get started on your website accessibility strategy with any of the following action points:

  1. Contact our team for more advice about how you can make your website or store compliant.
  2. Find out more about the Recite Me Web Accessibility Checker, to fix accessibility issues at source.
  3. Schedule a free demonstration to learn how our technology can help you.
  4. Run a free accessibility scan of your website for WCAG 2.1 AA compliance.
  5. Get a free trial of our toolbar, to see how it integrates with your website or eCommerce store.

Related Content