Online purchasing was already becoming the preferred method of shopping for many Americans, and the lockdowns of the COVID-19 pandemic only served to hasten the trend of closing brick-and-mortar shops in favor of e-commerce. In the post-pandemic economic environment of skyrocketing commercial rents and a general trend toward more time spent at home, investing time and resources into perfecting an online shop is a must for any business owner.
Building a successful online shop is considering site functionality and its accessibility to all potential shoppers. According to the CDC, about 61 million Americans report having a disability. An online shop that fails to meet basic accessibility standards then runs the risk of excluding roughly 26% of potential shoppers. Building upon ADA guidelines, we offer some best practices for optimizing e-commerce accessibility to provide an online shopping experience inclusive to all users.
Web accessibility 101
Essential requirements for making web content accessible to people with disabilities can be found by consulting the Web Content Accessibility Guideline (WCAG). The process of making site functionality accessible to shoppers with disabilities (per WCAG) can be thought of as falling into four categories of compliance: ensuring content is perceivable, operable, understandable, and robust.
The first step in making the e-commerce experience accessible to all is understanding that some shoppers will be using assistive technology to access a store, and thus site functionality will need to be compliant with that technology. Many shoppers with visual impairments use screen readers to access the internet, which requires making some special considerations while designing an online shop.
Shoppers with visual impairments
An accessible online shop is compatible for use with screen readers. A common issue regarding compatibility is that technological advancement in particular browsers like MozBraille, EMACSPEAK, and pwWebSpeak that visually impaired individuals use to access the internet occur at a much slower pace than for mainstream browsers like Chrome and Safari.
For that reason, cutting-edge graphics and design may not be compatible with (older) assistive browsers. It's best then to avoid complicated graphics with flashy moving parts. For optimized accessibility, keep shop design simple. Simplicity has the bonus of cultivating a sleek, minimalized look for a site, a style favored by many trendy, up-and-coming brands.
To make visual content accessible to those with visual impairments using screen readers, adding alternative text (alt-text) and image descriptions to all images and videos is a must. Image descriptions should be especially detailed when describing products and their functionality. For general visual elements of the site, adding audio descriptions to the shop is another way to allow shoppers with visual impairments to experience visual content.
It's also important to keep in mind that screen readers read site content in a linear order, so the layout of information as it's presented spatially onscreen is essential.
Similarly, it's vital to prioritize text clarity. Clear, understandable text depends not just on word choice but also on the size, font, color, contrast, and positioning of the actual text itself.
Colorblind shoppers may have difficulty differentiating between low-contrast text colors on a site. Be conscientious of color schemes for text, images, and visual elements by choosing high-contrast color schemes that facilitate easy differentiation between background and foreground. The internet is filled with online tools to test for appropriate color contrasts.
Additionally, shoppers who are colorblind may have trouble distinguishing actionable items from other text or images, so it is necessary to add shape or texture cues to clickable buttons. For instance, simply having the text "add to cart" or "checkout" in a bold color may not be enough to indicate to a person who experiences colorblindness that the text is a clickable, actionable button. Encompassing the actionable text in a circle or square, something that looks more like an actual button, allows the distinction to be made. For similar reasons, another best practice is to underline external links even if they appear in a distinctive color.
Additionally, relying heavily on colors to communicate information can create accessibility issues for shoppers who have trouble with color differentiation. Instead of only having a text box turn red when a shopper doesn't fill out a required field, clear and concise text should appear to communicate what information is missing and how to proceed.
Shoppers with hearing impairments
Providing captioning or transcripts for video or audio content should be standard practice. Closed captions are the simplest way for shoppers with hearing impairments to access the auditory content of an online shop. Captioning grows increasingly integral to the e-commerce experience as about 85% of all online video consumed by all users is with the sound muted.
Shoppers with mobility issues
Mobility issues can prevent some shoppers from using a mouse to navigate an online shop. For that reason, it's a necessity that an online shop has keyboard navigation capabilities enabled. This necessitates that shop design is keyboard-friendly. Luckily, it's pretty simple to self-test the keyboard functionality simply by using the arrow and "tab" keys to navigate.
Additionally, shoppers with limited dexterity might have trouble accessing smaller clickable buttons that are placed close to other clickable options, leading to shoppers making incorrect selections and being unable to access their preferred item. Larger, spaced-out clickable areas are required with a 44×44 px, and the clickable area is the generally agreed-upon size that optimizes accessibility.
Perceivable, operable, understandable, and robust
An online shop designed using these best practices as a starting point and WCAG as a handy guide is on its way to achieving an optimized e-commerce experience that's perceivable, operable, understandable, robust, and ultimately inclusive to all.
Comments