7 Most Common eCommerce Accessibility Issues (and How to Solve Them)
It’s no secret that almost everyone shops online. However, not all shoppers have the same requirements. From product preferences to shopping pace and physical limitations, just how sure are you that you’re catering to all of your customers? This is where accessibility comes in. Did you know that well over 97% of all websites across the world are not fully accessible? This means countless disabled consumers are encountering barriers online daily. By using an accessibility evaluation tool to make your eCommerce site compliant, you are catering to over 40 million disabled consumers in the U.S. alone. Imagine the stark increase in sales? What’s more, by running an accessible online store, you are also staying clear of costly ADA-related lawsuits, which are becoming increasingly common globally.
Let’s dive into the eCommerce accessibility issues that might be present on your site.
Common eCommerce Accessibility Issues to Avoid (and How to Correct Them)
While ADA compliance for Websites includes a number of different aspects, there are a few issues that are most commonly found on eCommerce platforms such as Shopify. Yes, even popular platforms such as Shopify aren’t 100% accessible and require some action from your end.
1. Lack of Link Styling
Links should always be distinguishable from the surrounding text and background of a web page. If not, customers with visual impairments won’t be able to locate a link on a page, which could lead to an abandoned sale. When styling the links on your eCommerce site, make sure they are a different color and underlined. You can also add a hover effect to make differentiation more obvious. It’s also essential to give links a descriptive title. This way, customers using a screen reader will understand exactly where a link is taking them. Failing to identify a link within the markup means a screen reader will merely read out the URL, which doesn’t necessarily help a disabled customer.
2. Incorrect Color Contrast Ratios
Color contrast is what helps differentiate the foreground from the background of your online store. Sites with lower contrast ratios can’t be used by customers with visual impairments or low contrast vision. Web Content Accessibility Guidelines (WCAG) require text to have a color contrast ratio of at least 4:5:1. Larger text should have a ratio of at least 3:1 – this is text that is 18 point or larger, or 14 point or larger, and bold. Pay special attention to your site’s navigation, product pages, and hyperlinks when testing and adjusting your color contrast ratio.
3. Only Using Color to Show Meaning
There’s no doubt that color plays an important role in drawing a customer’s attention to certain products or areas of your site, and getting them to take action. However, since not all customers are able to perceive color in the same way, it’s important to not only use color to convey meaning. For example, using color to indicate which fields of a form a shopper should fill in or asking them to click on a purple button to place their order could ruin the user experience completely. This is not to say that you can’t use color in this way, but you also need to provide an alternative for users with disabilities. Using descriptive instructions and links can prevent a lot of frustration and isolation.
4. Mislabeled Form Fields
At one point or another, customers are going to need to add their details to a form, but completing a form isn’t as simple as you might think for users with certain types of disabilities. To ensure each of your customers has a seamless experience, add clear instructions to each form on your eCommerce site. It’s also helpful to add input examples to each form field so that a user knows what’s expected of them.
5. Poor Keyboard Navigation
Many users with mobility impairments rely on keyboards to navigate a site. The Tab key is used to move forward, Shift + Tab is used to move back, and Enter will activate page elements. For this reason, it’s essential for your site to be compatible with keyboard navigation technology. You also need to ensure that the focus indicator is visible at all times.
6. Poor Header Formatting and Structures
Disabled customers shopping online tend to rely on accurate heading structures to navigate and understand the content on a page. For example, a customer using a screen reader might just read the header tags to decide whether they want to purchase a product. When a product page skips from an H1 to an H3 header, your customer might assume they have somehow missed essential information, deterring them from making a purchase. To make your online store more accessible, avoid using headers out of their sequential order and keep your headers descriptive.
7. Failing to Add Alternative Text
If there’s one thing you know as the owner of an online store, it’s that good visuals are essential! However, they won’t mean much to a visually impaired user if you haven’t added alternative text. Alt tags give each of your images a detailed description that can be read by a screen reader, ensuring all customers know what a product is and looks like. Alt tags need to be useful, so think twice before you add a tag.
Offering Your Customers a Better Online Shopping Experience
There are so many good reasons to comply with ADA requirements and make your site accessible to all. By providing customers with a better online shopping experience you are doing your part to create a more inclusive society while increasing your sales at the same time. And because search engines value a good user experience, you can expect your rankings to improve too. As an added bonus, you are protecting your eCommerce store against costly and brand-damaging demand letters and lawsuits, which can easily be avoided.Start by checking your online store for the accessibility issues mentioned above before scanning your site with a trusted accessibility checker tool to catch any other issues that might be lingering.