By one estimate, the worldwide eCommerce market is expected to approach $5 trillion in 2021. Amazon, the world’s largest e-commerce site, recently outsold Walmart for the first time, and online sales continue to grow in proportion to brick-and-mortar retail sales each year.
Despite the growing market, many eCommerce businesses are leaving money on the table. The vast majority of eCommerce sites have serious accessibility issues that prevent people with disabilities from finding product details, navigating through checkout, or getting information about their orders. Accessibility issues can lead to costly litigation, but more importantly, they have a negative impact on user experience.
Fixing accessibility barriers can improve the onsite experience for everyone — not just people with disabilities — and many of the most common problems can be resolved with a few quick updates. In this article, we’ll address a few of the most common issues.
Of course, this isn’t a comprehensive list of all of the accessibility problems that could affect an eCommerce website. For specific guidance, we recommend reviewing the Web Content Accessibility Guidelines (WCAG), the most widely recognized standards for digital accessibility. With that said, these accessibility issues are relatively common for online stores, and addressing them can remove barriers for your audience.
1. Relying On Color to Deliver Information
eCommerce sites are designed to get customers to take action, and designers often use color to attract attention or to convey important information. That’s perfectly fine, but some people cannot perceive color, and websites have a responsibility to accommodate those users.
WCAG Success Criteria (SC) 1.4.1 notes that color shouldn’t be used as the only visual means of conveying information. eCommerce sites often fail this criterion. Some potential examples:
- A website tells users to “click on the red box to see special deals.” If no other information is provided, some users will be unable to determine where to click.
- A website’s checkout process requires users to enter information, but uses color alone to identify the required fields. Some users may not understand why they can’t submit the form, since the site doesn’t provide any other way of receiving that message.
- A product page contains charts or graphs, using color alone to indicate different information. For example, on a bar graph: “The blue bar shows our product, and the yellow bar is our competitor.”
These oversights can cause usability issues. Some people have color vision deficiencies (color blindness) or other vision disabilities, and many people use screen readers and other assistive technologies to access the web.
In most cases, eCommerce sites can avoid these issues by simply providing another way for users to get the information. Writing “click on the red box to the left to see special deals" would give people more guidance — and proper use of descriptive link text and form controls would let people navigate the page naturally, regardless of whether they’re using assistive technologies.
Read More: Use of Color for Accessibility Explained
2. Poor Color Contrast Ratios
Color contrast ratios assign a value to the difference in light between the foreground and background of a website or app. People with color vision deficiency, low contrast vision, or low vision may be unable to read websites with low color contrast ratios.
WCAG SC 1.4.3 requires normal text (including images of text) to meet a contrast ratio of at least 4.5:1, while large text (18 point or larger, or 14 point or larger and bold) should have a contrast ratio of at least 3:1.
eCommerce sites often fail this criteria by not paying attention to hyperlinks, navigation elements, menus, and stylized product pages. Make sure to consider color contrast from the first stages of design and development. The a11y® Color Contrast Accessibility Validator is a free color contrast analysis tool, and it’s an excellent resource when planning updates.
Read More: The Basics and Importance of Color Contrast for Web Accessibility
3. Out-of-Order Heading Structures and Poor Headings
eCommerce sites often use headings as style elements, which can create confusion for people who depend on accurate heading structures to navigate. A person using a screen reader might skip around on a product page, reading heading tags to decide whether to make a purchase; if the page skips from an <h2> tag to an <h4> tag, the user might assume that they’ve missed some important information.
When used properly, headings clearly describe the content of the page. A heading that reads “But that’s not all!” might be effective as copywriting, but it’s not useful to a person using a screen reader who’s scanning the page for important information.
Some simple tips to optimize your eCommerce store’s headings:
- Avoid using headings out of sequential order.
- Make sure headings are consistent and descriptive.
- Use CSS and other tools to style your pages — don’t rely on headings alone.
Improving your site’s heading structure can also help with search engine optimization, since search engines expect pages to follow a clear structure. By adding keywords to your headings, you may see improved traffic, and you’ll certainly provide a better experience for your users.
Read More: Why Headings Aren’t Simply Style Elements
4. Unlabeled or Mislabeled Form Fields
All eCommerce sites require users to input information, but developers often design forms without considering their entire audience. People may purchase something from your site while using a screen reader or other assistive technology. Additionally, many people with disabilities browse the web using a keyboard alone — no mouse — and poor form controls can cost you sales.
Form labeling is especially important for eCommerce accessibility. Placeholder text is often used to identify errors in a form entry, but some screen readers won’t read the placeholder text, and some users with cognitive disabilities may not be able to remember the placeholder text after it disappears.
Some tips to keep in mind for form fields:
- Make sure your forms have clear instruction text at the beginning of the page.
- Provide examples of expected values and format, particularly for dates, credit card numbers, and other entry fields that might change from site to site.
- Avoid “keyboard traps,” which occur when keyboard focus can be moved to a form field (or other component of a page), but cannot be moved away from the component with standard keyboard controls.
Test forms regularly to make sure they’re accessible. Using a keyboard, make sure you can navigate between form fields. Does the site provide a clear keyboard focus indicator? Can you select between different product options?
Read More: Give Yourself an Accessibility Test: Don't Use a Mouse
5. Missing or Incomplete Alternative Text for Images
eCommerce sites may have thousands of images, and in many cases, those images deliver important information about products. If users can’t see the images — or if the images don’t load — the image’s alternative text (also known as “alt text,” or “alt description") will provide a functional replacement.
Of course, that’s only true if you’ve filled out the alternative text for all the image on your site. Alt text should descriptively explain the image, providing all relevant information that a person would be able to gather from seeing the image. For instance, “bicycle" is useful information, but “Red Ranger bike on a blank background" is much more descriptive and potentially more helpful for the visitor.
Add alt text to every item that provides important information or additional context to your page. Make sure the description contains any text that appears on the image — otherwise, some visitors will miss out on that content.
Read More: 8 Common Image Alt Text Mistakes to Stop Making
Accessible eCommerce Sites Provide a Better User Experience
Improving your eCommerce site’s accessibility has numerous benefits including better search engine optimization, higher customer retention, and added revenue. Put simply, if your website hasn’t prioritized accessibility, you’ll need to change your approach to stay competitive.
Many accessibility improvements enhance the user experience for all visitors. Improving color contrast ratios, for instance, will help people with colorblindness use your site, but it can also improve the on-page experience for someone who’s browsing your store in a bright outdoor environment. Adding image alt text makes your site more useful for people with low vision, but it’s also crucial when a user’s slow internet connection prevents images from loading.
To take the first steps towards a more accessible eCommerce site, consider engaging a WCAG Accessibility Audit to find issues that don’t conform with the latest version of the Web Content Accessibility Guidelines. Our team can provide expert advice and recommendations to help you understand the principles of accessibility — and realize the benefits.
