The Accessibility of E-commerce: Best Practices for an Inclusive Shopping Experience

The impact of COVID-19 on e-commerce

The COVID-19 pandemic has disrupted our lives in many ways, including how we shop for goods and services. Due to the various restrictions and lockdowns imposed by governments around the world, many people have had to rely on e-commerce to purchase essential items such as groceries, medicines, and household supplies.

According to Apptus, 62% of consumers shopped online more during the pandemic than before. This substantial increase in online shopping has led to a growing dependence on e-commerce, resulting in people becoming increasingly accustomed to this shopping method, and as a result, e-commerce has become firmly established as a significant part of the economy and society. Consequently, e-commerce companies have had to adapt to meet the growing demand for online shopping.

The importance of accessibility in e-commerce

The rapid growth of e-commerce during the pandemic has highlighted the need for inclusive and accessible online shopping experiences. As more people rely on e-commerce to purchase essential items, it is important that online retailers ensure their websites are accessible to everyone, regardless of their abilities or disabilities.

E-commerce companies that prioritize accessibility and inclusivity not only improve the online shopping experience for all users but also tap into a growing market of consumers who value accessibility and inclusivity in their purchasing decisions.

Addressing different shopper constraints and providing solutions

Shoppers with disabilities or limitations may face unique challenges when shopping online. Let's explore some of the common user limitations and how e-commerce companies can address them through web accessibility best practices.

1. Users with visual impairments

The recent study of The Global Burden of Disease indicates that approximately 295 million people worldwide have moderate and severe vision impairment. This underscores the critical importance of ensuring that e-commerce websites are accessible and inclusive for all users. We will examine a few of the typical challenges faced by visually impaired shoppers and solutions to tackle them.

Relying solely on color for information

One of the challenges for visually impaired individuals when shopping online is that many websites rely heavily on color as a means of conveying information. An example could be a product page where different color variations of a product are shown without clear text descriptions or labels. Visually impaired users may not be able to differentiate between the color variations and may not know which one they are selecting. This can result in confusion and frustration, leading to a poor shopping experience.

Solution: Provide alternative ways of conveying information beyond just color. In this case, the solution could be to provide clear text labels or descriptions for each color variation, or to use different shapes or patterns in addition to color to convey the information.

No product image descriptions

Image descriptions (ALT texts) can be read by screen readers and other assistive technologies, which help people with disabilities navigate and understand digital content. Images that are not described or captioned properly can make it challenging for people with visual impairments to make informed purchasing decisions. ‍

Solution: Providing proper alternative text for product images will make online content way more accessible for visually impaired. Image descriptions can also be provided in audio format.

Read our comprehensible article on how to write effective ALT texts to learn more.

Inaccessible checkout forms

Checkout forms can be difficult to navigate and complete for individuals who rely on screen readers or have low vision. This can make it difficult for them to enter information accurately and complete their purchase.

Solution:

1. Use labels not placeholder text: To name the input field it is necessary to use native form labels, and not placeholders which are usually displayed in very low contrast. Labels used should be clear and descriptive, providing information about what information is required in each field.
2. Provide error messages and suggestions: If a user enters incorrect information, error messages should be provided to guide them on how to correct their mistake. Suggested corrections can also be provided to make the process easier.
3. Implement proper focus management: The focus should be properly managed so that users can easily navigate through the checkout form using the keyboard alone.
4. Allow users to review and edit their information: Users should be able to review and edit their information before final submission to ensure accuracy.

Missing visible focus indicator

One of the common challenges faced by users with visual impairments when navigating via keyboard in e-commerce sites is the lack of visible focus indicators. This means that when using the keyboard to move between links or form fields, it may not be clear which element currently has focus, making it difficult for users to navigate effectively.

Solution: The solution to tackle invisible focus order is to use CSS to style the focus indicator so that it's visible and easy to see. The best practice suggests using the "outline" property to create a visible border around the element when it receives focus.

Incorrect focus order

Another frustrating issue for the shoppers who use keyboard for navigation is when focus indicator moves in an illogical and inconsistent order. Users should be able to move through the page using the Tab key, and the focus indicator should move in a predictable order that matches the visual layout of the page.

Solution: To ensure that the focus indicator moves in a logical and following the natural flow of the page, it's important to follow the HTML structure and to use the "tabindex" attribute correctly.

The "tabindex" attribute specifies the order in which elements should receive focus when the user navigates through the page using the keyboard. By setting the "tabindex" attribute to the correct values, you can ensure that the focus indicator moves in a logical and consistent order, following the natural flow of the page.

Inaccessible website design

Websites that are not designed with accessibility in mind may have poor color contrast, small font sizes, or unclear navigation, making it difficult for people with visual impairments to access and navigate online shop.‍

Solution: Implement accessibility best practices, such as using large enough font size and high-contrast colors, and ensuring keyboard navigation options are available and no keyboard traps are present. Learn more about improving visual accessibility.

2. Users with hearing impairments

Hearing impairment and deafness are prevalent and can be observed in all regions and countries. Presently, over 1.5 billion individuals, which is nearly 20% of the world's population, are affected by hearing loss, with 430 million of them experiencing disabling hearing loss. For web accessibility and e-commerce, the prevalence of hearing loss and deafness highlights the need for providing alternative forms of communication for those who may not be able to hear audio content.

In the following section, we will explore some of the common issues experienced by shoppers with hearing impairments and the strategies that can be implemented to overcome them.

Product videos

One of the challenges faced by users with hearing impairments when shopping online is the use of product videos that rely solely on audio information to convey details about the product. For users with hearing impairments, this can result in a lack of information about the product, making it difficult for them to make informed purchasing decisions.

A couple of other issues that might prevent users from accessing the video are inaccessible media players or low color contrast.

‍Solutions:

1. Add closed captions: Closed captions are text-based versions of the audio content in a video. They typically appear at the bottom of the screen and include both spoken words and non-speech elements, such as music or sound effects. Closed captions can be turned on or off by the viewer.
2. Provide audio descriptions: Descriptions, also known as audio descriptions or video descriptions, provide additional information about the visual content in a video. They describe actions, characters, settings, and other visual elements that may not be apparent from the audio alone. Descriptions are typically provided as an audio track that can be turned on or off by the viewer.
3. Provide transcripts: Transcripts are text versions of the spoken content in a video. They don't include non-speech elements and are typically provided separately from the video. Transcripts can be useful for people who are deaf or hard of hearing, as well as for people who prefer to read rather than listen.
4. Use accessible media players: Use media players that support keyboard controls, provide accessible controls for playback, and allow users to change the playback speed, volume, and quality.
5. Ensure color contrast: Ensure that there is sufficient contrast between the video and its background, and that any text that appears in the video is easily legible.

Alerts and sounds

An online store might use a sound effect to indicate when a product is added to the cart or when an error message pops up. The problem with this approach is that it excludes users who are deaf or hard of hearing, who may not be able to hear the sounds. This can make it difficult for them to know when an action has been completed or if there is an issue that needs to be addressed.

Solution: Provide alternative forms of feedback that are not reliant on sound. For example, instead of playing a sound when an item is added to the cart, additionally, the website could display a visual cue such as a pop-up message or a change in the cart icon. Alternatively, the website could use text-based alerts that are displayed on the screen and can be read by a screen reader.

Customer support

For users with hearing impairments, customer support can be a significant challenge when shopping online. Traditional methods of customer support, such as phone calls, can be inaccessible for these users. This means that they may struggle to get the help they need to complete a purchase or resolve an issue with a product.

‍Solution: Offer alternative methods of customer support that are more accessible to users with hearing impairments. For example, providing live chat support or email support can be an effective way to offer support without relying on phone calls. Additionally, some e-commerce sites may offer video-based support services that include sign language interpretation.

It is important for e-commerce sites to clearly communicate the availability of these alternative support options and ensure that they are easy to access. Providing clear instructions for how to access support and including links or buttons to support options can help ensure that users with hearing impairments can quickly and easily get the help they need.

3. Users with cognitive impairments

Cognitive impairments are conditions that affect a person's ability to process, retain, or retrieve information. This can include difficulties with memory, attention, language, problem-solving, and decision-making. Examples of cognitive impairments include dementia, autism spectrum disorders, traumatic brain injury, attention deficit hyperactivity disorder (ADHD), and learning disabilities.

According to the World Health Organization (WHO), approximately 200 million people worldwide have an intellectual disability, which is defined as having an IQ below 75. This represents approximately 2.6% of the global population.

Cognitive impairment can affect a person's ability to shop online in various ways. It can impact their ability to understand information presented on the website, remember what they have seen or read, make informed decisions, and provide accurate information where needed.

Difficult checkout process

People with cognitive impairments may find the checkout process confusing, especially when it involves multiple steps or requires the user to input personal information.

Solution: 

1. Breaking down steps: Smaller, more manageable sections is a common solution to the challenge of a difficult checkout process for shoppers with disabilities. For example, instead of presenting the entire checkout process on a single page, an e-commerce website may present the user with a page for entering shipping information, followed by a page for entering billing information, and so on. This allows the user to focus on one step at a time, reducing the cognitive load and making the process more manageable.
2. Instructions and feedback: Providing clear and concise instructions, along with helpful feedback and error messages, can also help. This can make the process easier to understand and follow, reducing frustration and increasing the likelihood of a successful purchase.

Sensory overload

Sensory overload can occur when an e-commerce website contains too much visual, auditory, or other sensory information, making it difficult for users to focus on the relevant content. For individuals with cognitive impairments, a website with bright colors, flashing graphics, and loud noises can be overwhelming and lead to sensory overload.

Solution: 

1. Simplify the design of the website: Reducing visual and auditory distractions can include minimizing the use of flashy animations, bright colors, and loud sound effects.
2. Organize information: Breaking up information into small chunks and organizing it in a clear and logical manner can also help to reduce sensory overload. For example, using bullet points, short paragraphs, and clear headings can make it easier for users to scan and digest information without feeling overwhelmed.

Generic link text

Generic link text, such as "click here" or "read more" may not be helpful for a shopper with a cognitive impairment, as they may not understand where the link leads to or what information it provides. A better approach would be to use descriptive and meaningful link text that accurately reflects the linked content.

Solution:  Ensure using explanatory link to describe a link, which provides context and information about where the link leads to. For example, instead of using "explore" for the link to products on sale, use "explore our products on sale". This can help shoppers with cognitive impairments better understand the purpose of the link and make informed decisions about whether to click on it.

Complicated navigation

For people with cognitive impairments, navigating through an e-commerce site can be a daunting task if the website structure is complex and difficult to understand. This can lead to frustration and cause them to abandon their shopping experience.

Solution: Ensure that the navigation is simple and intuitive. One solution is to implement a clear and consistent navigation structure throughout the website. This can be achieved by organizing products and categories logically, using descriptive labels, and providing easy-to-use navigation tools like accessible dropdown menus and search bars.

4. Users with motor impairments

Motor impairments can affect a person's ability to use a keyboard or mouse, click small buttons, or navigate menus on a website. This can make it difficult for individuals to browse and select products, complete online forms, or complete the checkout process.

People with motor impairments may also experience difficulties in using touch screens or voice-activated devices, which are becoming increasingly common in e-commerce. They may require specialized equipment or software, such as keyboard alternatives or voice recognition software, to interact with the website.

Links and buttons too small or too close

One of the challenges for people with motor impairments when using e-commerce websites is the small or closely placed clickable elements such as buttons and links. These elements can be difficult to click for users who have difficulty with precise mouse movements or who use assistive technologies such as switch devices.

Solution: Increase the size of clickable areas and ensure that there is enough space between them. This can be achieved by designing larger buttons and links and leaving enough whitespace between them. This allows users to more easily click on the desired element without accidentally clicking on adjacent elements.

It is also important to provide clear visual feedback when a user clicks on a button or link. This can be done by highlighting the clickable element and, additionally, providing an auditory cue to indicate that the action has been performed.

Difficult form completion process

Difficult form completion processes can pose a significant challenge for people with motor impairments, who may struggle with using a mouse or typing on a keyboard. This can be especially problematic when forms require precise mouse movements, such as selecting small checkboxes or filling in captchas. Additionally, lengthy or complex forms can be overwhelming and exhausting to complete for people with motor impairments.

Solution:

1. Easy to select: Make sure that form elements are large enough and easy to select, with plenty of space between each item. Providing clear and concise instructions can also be helpful, as it can reduce confusion and frustration when filling out the form.
2. Auto-filling: Provide options for auto-filling forms, which can save users with motor impairments the effort of typing in their information manually. Additionally, allowing users to save their information for future use can also be helpful, as it reduces the need to fill out the same form repeatedly. Breaking up long forms into smaller, more manageable sections can also be beneficial, as it can help prevent users from becoming overwhelmed and fatigued.
3. Alternative input methods: Finally, providing alternative methods of form completion, such as voice input or assistive technology, can also be beneficial for users with motor impairments who may struggle with traditional keyboard or mouse input.

Conclusion

In this article, we have discussed some of the common shopper limitations and the solutions for each challenge. It is important for e-commerce companies to address different shopper constraints and provide solutions to ensure an inclusive shopping experience for all.

By doing so, e-commerce companies can increase their customer base and create a positive impact on society. The need for accessibility in e-commerce cannot be ignored, and it is imperative for businesses to take steps to ensure that their online platforms are accessible to everyone.