At Baymard our research team has just spent 4,400 hours researching accessibility principles and applying them to the e-commerce field — leading to our new research study on Accessibility for E-Commerce Sites.
Additionally, we’ve benchmarked 33 top-grossing e-commerce sites across 4 key areas of Accessibility — images, links, form fields, and keyboard navigation — resulting in 625+ weighted Accessibility performance scores (assessed by WCAG 2.1, AA success criteria).
The results are stark: up to 94% of sites are incompliant with these 4 basic accessibility requirements (WCAG 2.1 AA).
It’s important to reiterate that these are some of the largest sites — we can only assume the incompliance number is higher for sites with a much smaller budget (or no budget at all) to meet accessibility requirements.
In this article we’ll walk you through this Accessibility benchmark dataset, and show you 4 common accessibility areas to watch out for, as many e-commerce sites are incompliant on these.
This article is divided into the following 7 sections
Before we get into the Accessibility benchmark results, it’s important to understand why Accessibility requirements are vitally important to a subgroup of e-commerce users (leaving aside the fact that in many countries sites are legally required to meet an Accessibility standard — and can thus open themselves up to lawsuits if they fail to do so).
Users with disabilities can have a vastly different experiences on e-commerce sites, depending on the nature of their disabilities — and the assistive technologies (e.g., screen readers) they must use to understand and navigate the sites.
Take, for example, users with visual impairments. Whereas users with mild-to-moderate impairments may only have to rely on their browsers built-in zoom function and high-contrast mode to access site content, users with more severe visual impairments will require the use of a screen reader to access and interact with an e-commerce site.
Similarly, users with limited mobility or other physical impairments may not be able to reliably use a mouse to navigate and interact with a site and will instead have to rely on keyboard navigation to operate.
If sites fail to accommodate these users, it’s the same, for many of them, as being locked out from using the site at all.
Others may be able to struggle through and complete an order — yet will unnecessarily spend much more time doing so compared to users without disabilities.
Due to the importance of ensuring accessibility on e-commerce sites for all users, researchers at Baymard benchmarked 33 top-grossing sites to assess their varying levels of compliance — and incompliance — with our 19 newly published accessibility guidelines. (If you already have a Premium account, open the Accessibility study.)
When it comes to accessibility, all images on a site must contain some kind of descriptive label — either through the use of HTML markup (i.e.
alt text) or an accessibility-specific label using Accessible Rich Internet Applications (ARIA) markup.
However, during our rating we discovered that 64% of the benchmarked sites had some issues with making images adequately accessible.
Images can have a number of different functions on an e-commerce site, from acting as a link, conveying information, or being purely decorative. Consequently, each image type requires unique accessibility considerations to fully translate their function for users aided by screen readers:
Text embedded in images — for example, text reading “Shop the Spring Sale Now!” displayed over an image — should generally be avoided, since screen readers can’t access embedded text and must instead rely on labels included in the markup.
If these labels are missing, users aided by screen readers may have no idea what information the text contains — or if the text is even there.
Unfortunately, 63% of sites still use embedded text in images without adequately conveying the information contained therein, and 24% of sites have text which lacks sufficient contrast to be visible to users with visual impairments.
As links are critically important for navigating a site, it’s especially important that they’re implemented correctly for users with disabilities. When links aren’t given an adequately descriptive title (which 66% of sites failed to do), users aided by screen readers will have no way of knowing where a given link will take them.
Links fared generally better when it came to the markup, with only 9% of sites failing to identify links as links within the markup language for user aided by screen readers.
For example, if links aren’t identified within the markup it’s likely that screen readers will simply announce something generic (e.g., “Shop Now”), or merely read out the link URL destination (which isn’t always descriptive), neither of which are likely to be helpful to users with disabilities.
Furthermore, only 9% of sites failed to provide adequate contrast with the surrounding text and 12% failing to provide adequate contrast with the site background.
When it comes to users entering information on the sites, it’s important the form fields and inputs are all properly labelled — both individually (e.g., “First Name”) and as a group (e.g., “Shipping Address”).
Of the 33 sites we benchmarked, 18% of sites failed to provide screen reader–accessible group labels — for example, while sighted users may be able to see the visual heading (e.g., “Shipping Address”), users aided by screen readers must be informed of the form field group (and label) through screen reader–accessible markup language.
Similarly, another 18% of sites failed to group form fields together within the markup language — thus failing to inform users aided by screen readers that form fields and inputs are related to each other.
Further, while only 9% of sites have issues conveying the purpose of individual form field and inputs — usually as a result of missing form field and input group labels within the markup — 37% of the 33 sites we benchmarked failed to provide labels for individual form fields and inputs.
Additionally, when considering any special instructions for form fields and inputs — such as whether a given field is required or the data entered requires special formatting (e.g., “DD/MM/YYYY”) — 18% of sites failed to communicate these instructions to users aided by screen readers.
If accessible markup language is missing from form fields and user inputs, it will be much more difficult — if not impossible — for users aided by screen readers to progress successfully through an e-commerce site’s various flows, particularly checkout.
For users with mobility issues, or for those users being aided by screen readers, keyboard navigation can be the primary mode of interaction with e-commerce sites.
Consequently, it’s important to ensure that all site functionality is operable by keyboard (or provided via a keyboard-operable alternative), and that the focus indicator is visible at all times.
However, a full 45% of sites have some site functionality that is inoperable by keyboard navigation, and 48% fail to ensure that the keyboard focus indicator is visible at all times.
Similarly, ensuring the focus order of site elements follows a logical order improves accessibility for users with cognitive impairments; however, 30% of sites have some site elements that are placed unintuitively in the focus order.
Worst of all, 9% of sites have some site elements that can trap keyboard focus — making it difficult to impossible for user’s focus to escape back to the rest of the page.
Our benchmarking of 33 top-grossing sites across only 4 out of 19 accessibility-related guidelines shows that e-commerce sites harbor a multitude of accessibility-incompliance issues.
Indeed, 94% still have severe issues with basic accessibility (rated against the WCAG 2.1, AA success criteria), including within the following key site areas:
These basic accessibility issues will severely disrupt those users who need accessibility considerations, and will prevent some from being able to effectively use the site to purchase products.
Join 24,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 email@example.com