.png){kind=icon}
Did you know that one of the very first instances of business-to-consumer ‘online’ shopping was done by a person with a mobility disability? In May of 1984, 72 year old and UK pensioner Jane Snowball was at her home in Gateshead when she used her television (alongside a custom chipset and domestic telephone line connection) to place an order for groceries from a local supermarket. She was affected by a broken hip and through the help of a community initiative, she was given access to technology that allowed her to use her TV remote to browse, select, and purchase goods from a directory of retailers. These would then be packaged and delivered directly to her home (much in the same way that online shopping functions now.)
For the e-commerce market to continue to shift the way we buy and sell goods globally, it must also meet the unique challenges that its diverse customer base face in their daily lives. A major part of accomplishing this comes from developing a user experience that is accessible and can be enjoyed by as many people as possible.
In our previous blog post, we talked in-depth about what e-commerce testing is, how it can be done, and the effect it has on the quality of an e-commerce website. Through accessibility testing, we can also validate that an e-commerce meets the needs of customers who may be facing a permanent, situational, and/or temporary disability.
Making an e-commerce website more accessible is a comprehensive process, and if done effectively, it can enable a business access to an even larger customer base than ever before. It can also help a business maintain legal compliance as new laws like the European Accessibility Act seek to further democratize the web for users with disabilities.
Above all, online shopping should be inclusive so that users with disabilities can enjoy the same independence and equal access to goods and services as those without. Read on to learn more about the impact disabled users have on the e-commerce market, how people with disabilities shop online, and what it takes to make an e-commerce website more accessible.
What is Accessibility?
Digital Accessibility is the practice of designing the content and user experience of a website or mobile application to be sensible and usable for as many people as possible, especially those with disabilities. Fortunately, if digital content has already been built without considering accessibility, it can often be tested and updated to be made more accessible.
When we think of the experience of having a disability, the scope is often limited to those who have a permanent disability such as blindness, are deaf or have restricted physical mobility. In reality, everyone experiences some form of disability — whether it is permanent, temporary or situational — and digital accessibility helps by eliminating barriers that would otherwise impact their user experience.
The acronym POUR (which stands for Perceivable, Operable, Understandable and Robust) is used to evaluate the quality of content accessibility based on how successfully it meets or exceeds WCAG (Web Content Accessibility Guidelines) expectations. This is useful for accessibility testing an e-commerce website because each component of the platform can be reviewed and tested from the perspective of how a user with a disability would experience it.
The Impact of Disabled Users on E-Commerce Sales
An estimated 16% (or 1.6 billion) of the world’s population experience a significant disability, according to the World Health Organization. While that might not entirely represent an audience of users who are engaged with e-commerce, it is still a substantial population and, therefore, cannot be ignored when developing an e-commerce website.
In fact, within the 2019 Click-Away Pound Report, authors Rick Williams and Steve Brownlow spotlight the experience of customers with disabilities while online shopping and the cost associated with not meeting their needs for accessibility. Among their findings, they conclude that customer experience continues to suffer for users with a broad spectrum of disabilities as not many companies are choosing to consider the accessibility of their digital storefronts.
As of the time of conducting their survey, they found that the number of disabled people with access needs was 7.15 million and that 86% of users with access needs would spend more money if there were fewer accessibility barriers when shopping online. This is a huge amount of spending power (estimated as £24.8 billion in the report) and a significant customer base that is choosing to shop in places that can offer them a more accessible user experience instead.
How Users with Disabilities Shop Online
It is clear that users with disabilities are active participants in the e-commerce market. In fact, according to an online shopping survey conducted by Fable, people with disabilities shop nearly twice as often as the general population. Their survey states that 50% of respondents shop on a weekly basis with as much as 28% of respondents saying that they shop online on a monthly basis. But what kind of technology do disabled users take advantage of to be able to access and navigate an e-commerce website? And what is the online shopping experience like for a person with a disability? How do they navigate and browse for products?
In the 2019 Click Away Pound Report, they outline the technology and devices that disabled users in the UK prefer to use when shopping online. From the survey response, 63% of people said that they used assistive technology, with 52% of that being screen readers. As far as devices go, mobile devices remain the most popular platform for accessing the web without (30%) and with (41%) a screen reader.
For users with visual impairment, usability on an e-commerce website can be difficult if it has not been developed with many of the navigation methods and assistive technologies that they require in mind. One of these is keyboard navigation, as for visually impaired users, a mouse may be difficult or completely impractical to use (depending on the severity of their condition.) Using a keyboard and a screen reader, however, a user can navigate through e-commerce page elements, select from options, and have the content read out loud to them.
Unfortunately, this is not something that will automatically function without some level of developer involvement which is why it should be considered from the beginning of an e-commerce website project. Accessibility testing can help as well, since a tester can evaluate the keyboard navigation and screen reader experience of an e-commerce and identify any critical issues that would prevent an unsighted user from being able to browse through products or complete a purchase.
How to Make an E-Commerce Website Accessible
Now that we’ve covered what accessibility is and the impact that it can have on the buying behavior of a person with a disability, it’s time to talk about how an e-commerce website can be made more accessible. While every e-commerce is different and the spectrum of disability types is diverse, these are just a few best practices that should be followed for a positive user experience:
Web Structure and Navigation
For users with a screen reader, they rely on the structure of the page in order to navigate and understand its content. One of the first places to start with addressing this is by utilizing proper HTML markup across page elements. This includes assigning the correct heading levels for page content sections, adding aria labels and roles for page elements to provide semantic meaning, and structuring content so that it is keyboard navigable and follows a logical order.
One area in particular that can be problematic are content carousels. These are popular on e-commerce sites since they are visually appealing and can cycle through different types of content automatically but from a usability perspective, they can be challenging for users with a cognitive disability. Carousels often update frequently which can leave minimal time for a user to understand or interact with its content. They can also have unclear navigation controls which make it hard for a user to return to a previous slide. In general, carousels should be avoided in favor of more static page design elements to make them easier to navigate and use.
Alt-Text for Images/Descriptions for Visual-Based Content
Missing alt-text is arguably one of the most common issues found across all types of websites and, in fact, even affects some of the top e-commerce websites in the world. Alt-text helps users with visual impairment be able to understand image content that appears on a web page. Without it, a user may be unable to confidently shop on an e-commerce website since they’ll be missing important descriptions of product images and media content that would help them make a decision on their purchase.
The same also applies for any video or visual-based media content. When possible, an audio description should be provided so that users with a visual impairment can understand its contents.
Color Contrast Issues
As another one of the most common accessibility violations, color-contrast issues can have a huge impact on the experience of visually impaired users. Anytime that text, icons, links or other important web elements are rendered on backgrounds which do not provide a sufficient amount of visual contrast they can either be difficult to read or completely missed. In general, in order for web content to pass for contrast it must maintain a minimum 4.5:1 contrast ratio.
We’ll discuss this in more detail in the next section but if you are ever uncertain on whether or not a particular web element passes for color contrast, there are free tools available to use that can help (like WebAIM’s Contrast Checker.)
Accessible Form Elements
When it’s time to checkout, it’s critical that the user experience is flawless otherwise you run the risk of losing the sale. Without accessible form inputs, a disabled user may struggle to enter their shipping or billing information and give up on their purchase entirely. In order for a form to be accessible, they should include the proper labels for a screen reader user to understand their semantic purpose, be keyboard navigable and selectable, and placeholder text shouldn’t disappear when the field is entered.
Long & Complicated Checkout Processes
According to the Baymard Institute, 22% of US adults abandoned their cart during checkout due to the process being too complicated or taking too long. For users with a cognitive disability, this might be even more frustrating, as a confusing checkout process can overwhelm and cause someone to abandon their purchase.
Checkout should be simple and efficient — making it so that a user does not have to complete an excessive amount of steps, remember specific information, enter details that they already have more than once or anything else that could cause unnecessary frustration.
Tools for Accessibility Testing an E-Commerce
Evaluating an e-commerce platform for accessibility can seem daunting (especially if you don’t have the help of an experienced testing partner) but thankfully there are a variety of resources and tools available that can help make the process easier. Here are just a few examples of tools that can be used to check for common web accessibility issues:
WebAIM Contrast Checker
As we mentioned earlier, the WebAIM Contrast Checker is a helpful and free tool for evaluating color contrast. Simply enter the HEX code for both the foreground and background colors and then see what contrast ratio the tool returns. If the provided colors do not meet the 4.5:1 minimum requirement, you can adjust each of them using the color slider and picker options.
WAVE (Web Accessibility Evaluation Tool)
WAVE is a suite of tools that helps web authors, testers, and developers identify accessibility issues that impact usability for users with disabilities. It can be used directly in a browser for testing via a browser extension or the WAVE API and users can receive comprehensive results about their sites accessibility performance via the Accessibility IMpact assessment report.
ARIA DevTools
ARIA DevTools is a free and open-source Chrome extension that helps developers see a website from the way it is presented to screen reader users. Using ARIA DevTools, identifying missing ARIA labels, incorrectly used ARIA roles, and incomplete keyboard support is made much easier.
AccessibilityInsights
AccessibilityInsights is a free and open-source tool developed by Microsoft. It is used to evaluate the accessibility of web pages and desktop applications by offering a comprehensive suite of features (like Visual Helper and FastPass) with the ultimate goal of helping developers ship more accessible products to their customers.
Google Accessibility Developer Tools
Included in the native Dev Tools built into Google Chrome there exists a host accessibility specific features (that can even be accessed using assistive technologies) which help developers build more accessible website and web applications. They also provide helpful documentation that developers who are new to accessibility can use to get started. To access it from a Chrome browser, simply open the DevTools menu, navigate to the ‘Lighthouse’ section, and choose the ‘Accessibility’ option before generating a report.
Conclusion & Next Steps
As we’ve covered, accessibility is an integral part of making an e-commerce website a great experience for both disabled and non-disabled users alike. Disabled users have tremendous spending power and buying frequency that, left ignored, could result in millions of dollars of potential sales lost. Even worse, an inaccessible e-commerce experience runs the risk of being subject to significant legal consequences if it violates any laws of the ADA (Americans with Disabilities Act) or EAA (European Accessibility Act.)
Thankfully, this is not a problem that you have to face alone — PLUS QA’s accessibility testing services can be used to perform a complete audit of an e-commerce website or mobile application; saving you valuable time, money, and resources. Our accessibility team has over 15 years of experience and can review your e-commerce platform for critical accessibility issues across real testing devices.
Want to learn more about our e-commerce or accessibility testing services? Get in touch with us today.