If your eCommerce site isn’t compatible with screen readers, you’re ignoring potential customers.
Under the Americans with Disabilities Act (ADA), every business must make their online resources accessible for people with disabilities, and eCommerce businesses are especially common targets for ADA lawsuits.
However, digital accessibility isn’t just about compliance: When your website plays well with assistive technologies, you’re providing all customers with a better experience. Shoppers can find and order products more easily, and you demonstrate your brand’s commitment to a more inclusive internet.
Below, we’ll look at four quick ways to address common accessibility barriers that impact screen reader users.
1. Provide all visual information about your products via text
Screen readers convert on-screen content to audio or braille. Most screen reader users have vision-related disabilities (although, according to WebAIM’s latest screen reader user survey, a significant number of users do not have disabilities).
Many developers assume that blind users don’t care about visuals. This common misconception is often reflected in alternative text (also called alt text) for images; a product image might be described with simple terms like “t-shirt.”
But a blind user may want to know the color of the t-shirt. They’ll want to know whether it has graphics, or whether it has a crew neck or a V-neck. If none of that information is presented in the alt text or in the product description, the shopper will feel frustrated.
While you’re not writing a sales pitch, you need to include all relevant information that might help someone decide whether to buy the product. For example:
Plain olive-green T-shirt with a polo collar
Make sure that all visual information is available through text. For more guidance, read: What is the Best Way to Write Alternative Text?
2. Don’t rely on color alone to indicate form errors
People need to be able to understand when they’ve submitted information in an unacceptable format.
The Web Content Accessibility Guidelines (WCAG) addresses this in Success Criterion 3.3.1, “Error Identification,” which reads:
“If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.”
The key phrase here is “in text.” If an error notification reads, “fields in red are required,” that’s a problem for screen reader users, who might not be able to determine the colors of each field.
For more guidance, read: Tips for Meeting WCAG's Requirement for "Error Suggestion"
3. Don’t use carousels (or optimize them for keyboard users)
Carousels can be aesthetically pleasing, but they’re often bad for accessibility. If your carousel constantly rotates between several products or videos — without giving the user a way to stop the motion — you’re creating unnecessary barriers for people with vision and cognitive disabilities.
Depending on the implementation, carousels can be particularly problematic for screen reader users. The software may not be able to announce each product before the slide changes, and if the slides contain images of text, that text needs to be included in alt text.
If you decide to use a product slider, follow our tips for creating accessible carousels. Use CSS (Cascading Style Sheets) if possible, and provide users with a mechanism for pausing or stopping the carousel.
Then again, you might decide to simply avoid this feature: One study found that only about 1% of users click on carousels, and accessible alternatives to carousels (such as columns, buckets, and videos) may be much more effective for marketing.
4. Make sure that users can complete an order with a keyboard alone
Most screen reader users browse with a keyboard alone (no mouse), so make sure your eCommerce website has an appropriate focus order. Browse your site with a keyboard, using the Tab and Shift+Tab keys to navigate.
In addition to checking for basic operability, you should make sure that the keyboard experience is — well, good. To that end:
- Provide users with skip to content links.
- Limit the number of fields in each page of your checkout process.
- Provide accurate labels and instructions for forms.
These improvements will help you provide a decent experience for screen reader users, but remember, accessibility benefits everyone. Following WCAG can help you market your store more effectively, retain more users, and build a more successful brand.
To see how your website stacks up against WCAG Level A/AA, get started with a free automated analysis or send us a message to connect with an expert.
