How to Make Your Ecommerce Site More Accessible to All (And Why It Matters)

With the launch of Salesforce Commerce Cloud (SFCC) in headless mode and the release of its PWA-based storefront frontend (Composable Storefront), online retailers using SFCC can significantly improve the quality of their storefront experiences.

Moving to a PWA-based storefront powered by headless commerce APIs, as well as a headless CMS like Amplience, can dramatically improve your page load speed and SEO performance.

But it can also make your site more accessible.

And given that Covid lockdowns have driven many older and visually, aurally and physically impaired shoppers to online shopping, this is an important area to address. After all, if someone can’t navigate your online storefront they’re not going to buy anything!

So how do you know how well you’re doing on the accessibility front?

Checking Your Google Lighthouse Score

A Lighthouse report is simple to run (see here for more detail). It scores your SFCC storefront on a range of measures, including Performance, Accessibility, Best Practices and SEO.

According to Google’s Web-dev resource, which describes how Lighthouse scores for Accessibility:

“The Lighthouse Accessibility score is a weighted average of all accessibility audits. Weighting is based on axe user impact assessments. Each accessibility audit is pass or fail. Unlike the Performance audits, a page doesn’t get points for partially passing an accessibility audit. For example, if some buttons on a page have accessible names, but others don’t, the page gets a 0 for the Buttons do not have an accessible name audit.”

The Lighthouse Accessibility audit performs a number of tests (30+) to assess whether a screen reader can navigate your site (think of this as using a keyboard to navigate, with text and other elements like buttons being spoken aloud).

This is a high bar. Your storefront PWA need to be structured so that the content is clearly labelled and easy to read. All elements in the screen need to be properly and logically labelled. And the content needs to be ‘clean’ and well structured (this is where a headless CMS like Amplience really helps, as it stores content in modular chunks, often with supporting meta-data, and the content can include experience elements like button labels etc.)

By clicking on the Accessibility score, the page scrolls to show you the sub-scores that contribute to your overall score:

It’s important to note that the scores only tell you if everything is set up OK in your storefront to make it accessible. It does not score the quality of the content – that’s up to you. If it’s easy to navigate using a screen reader but the actual content is hard to follow or incomprehensible, the experience will be poor regardless. User testing can help to address these sorts of issues.

Why Does All This Matter?

We can break the answer to this question down into three key areas:

1. Commercial

2. Legal

3. Moral

Let’s look at each of them in a little more detail…

The Commercial Benefits

According to the WHO, over a billion people across the globe live with a disability. That’s around 13% of your addressable market, and with an ageing population it’s a growing segment.

If you could increase your shopper base by even half of that, the benefits would be huge. If 7% more of your current traffic was able to transact with you, when they couldn’t before, that’s the equivalent of a 7% uplift in conversion.

An accessible site is also an SEO-friendly site (read our recent blog post to learn more about that). So not only do you increase your sales but your cost of customer acquisition comes down as well.

The Legal Risks

According to a 2019 Lexology article, 10 Risks Associated with Inaccessible Websites and Mobile Apps, ‘inclusive technology – that is, technology that is accessible to people with a wide range of physical and cognitive abilities – is now a legal requirement for any US organisation with a public facing website or mobile app.’

The article goes on to say, ‘In the first three quarters of 2019, 2,088 lawsuits were filed alleging inaccessible websites or other technologies, compared with 1,665 in the same period last year – a 20% increase.’

So the risk of a lawsuit resulting in substantive damages are real and growing. In the US, the Americans with Disability Act (ADA) uses the WCAG 2.0 level AA guidelines as a reference.

Ensuring your storefront is optimised for accessibility is not just about the commercial benefits but has become a key risk to manage, and one that you can mitigate by optimising your experience.

The Moral Imperative

We like to think we live in a more enlightened age where we care about inclusion and diversity, and yet many online shopping experiences still exclude large sections of the population from full participation.

That has to change, and there is no better time than now, particularly as the new headless technology stack makes compliance so much easier to achieve.

How the 64Labs Composable Storefront Accelerator Helps

Now that we have an understanding of why accessibility is so important and how it impacts your organization from a commercial, legal and moral perspective, let’s turn our attention to Composable Storefront and Headless SFCC.

What difference does it make to your Lighthouse Accessibility score and why?

To demonstrate the impact, 64labs has used the Composable Storefront Accelerator to create a fully functioning storefront demo, with products sourced from the SFCC catalog, content and media from Amplience and search and product listers driven by Algolia.

Using Lighthouse, 64labs scored the demo storefront and compared it with the scores for the Salesforce SFRA reference Northern Trail Outfitters storefront across the homepage and category pages:

1.     Homepage:

As you can see, not only is page load performance significantly enhanced (by 260% and 485% respectively) with the Accelerator based storefront, but it also achieves perfect Accessibility scores!

Conclusion

At Amplience we believe in freedom, and better accessibility aligns perfectly with our purpose.

The new SFCC headless solution, powered by 64Labs Composable Storefront, Amplience and Algolia delivers on our vision for digital experiences without limits, delivering 2x to 4x improvements in Lighthouse performance scores and – with the right content – perfect Accessibility and SEO scores.

Want to know more?

Check out the solution now.