eCommerce websites can be a valuable resource for people with disabilities, particularly for those who encounter barriers when shopping at brick-and-mortar retail stores. Unfortunately, online stores can also have barriers: According to a report from Baymard Institute, 94% of the top-grossing eCommerce websites have detectable issues that prevent them from conforming with the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA.
WCAG is the consensus standard for digital accessibility, and it’s a vital resource for developers. When content conforms with WCAG, it’s generally considered usable by most people with disabilities. When content fails to conform with the guidelines, users may encounter barriers that prevent them from finding products, completing forms, and ordering goods.
15% of the global population experiences some form of disability, and to reach a wide audience — and provide them with an excellent shopping experience — you’ll need to think about accessibility when developing your estore. Here are a few quick tips to help you get started.
Related: 5 Common eCommerce Website Accessibility Issues
1. Make sure your checkout process can be completed with a keyboard alone
People with disabilities that affect vision, motor control, and mobility often use keyboards (or keyboard emulators) to browse the web. Instead of using a mouse, these users utilize the Tab and Shift + Tab commands to move focus. Other keyboard commands enable people to select links, switch browser tabs, and carry out other common actions.
However, some websites behave in unpredictable ways when accessed with a keyboard alone. If your e-store has an illogical focus order, users might become confused when navigating each page. Keyboard accessibility is especially important when users need to fill out forms or move through a multi-step process — and if customers become frustrated when checking out, they’ll often abandon their shopping carts.
Try placing an order on your eCommerce website without using a mouse. Ask questions:
- When I press the Tab key, does my focus switch to the next form field or the next important part of the page?
- Can I select all of the options I need (for example, product colors or add-ons)?
- Do I ever feel lost or confused?
- If I make a mistake, can I easily go back and correct it?
- Do I ever get “stuck" in a form field?
The last question is especially important. Keyboard traps occur when form fields are incorrectly written, causing the keyboard focus to lock into a single form field. It’s one of the most frustrating accessibility issues, but it’s easy to detect and fix — as long as developers test their forms carefully.
Related: Give Yourself an Accessibility Test: Don't Use a Mouse
2. Check your form descriptions and labels
eCommerce websites rely on input from users. If your visitors can’t provide their addresses and payment information, you can’t process their orders — make sure you give them clear instructions when their input is required.
Follow these tips to make sure your checkout process is accessible:
- Provide form instructions at the beginning of each page that requires input.
- Make sure your instructions are clear, concise, and easy for most users to understand.
- Include examples of the expected values and formats (for example, Date: Month/Day/Year) alongside each form field.
- If a form cannot be processed due to insufficient data, users should receive an error message that identifies what steps they need to take to complete the form.
- Provide every form element with an unambiguous label.
- Provide indications when form fields are required. Don’t rely on visual appearance alone (for example, red text) to indicate a required field — remember, some users cannot perceive color.
Related: Online Shopping and ADA Compliance: What You Need to Know
3. Pay attention to how your eCommerce site uses images and color
Color is a powerful tool for keeping customers engaged and moving them through your checkout process. However, not every customer perceives your website visually.
Follow these tips when reviewing product pages, checkout pages, and other essential content:
- Add alternative text (also called alt text) to all non-decorative images. Make sure your alt text follows these best practices.
- Avoid rendering text as a part of an image. Screen readers and other assistive devices can’t identify text within a picture — use CSS instead.
- Make sure your text has appropriate contrast. The Bureau of Internet Accessibility’ s a11y® Color Contrast Accessibility Validator is a free color contrast analysis tool that instantly identifies whether text meets WCAG contrast requirements.
- Never use color alone to convey information. Ask yourself: If the color is removed, does everything on the page still make sense?
Building an accessible eCommerce website requires dedication from every member of your development team. However, it’s well worth the effort: Accessibility expands your audience, improves customer retention, and enhances the on-page experience for every visitor — regardless of their abilities.
