Analyzing the Top 100 Retailers for Digital Accessibility
Are the top 100 retailers ready to support people with disabilities throughout this holiday buying season? Let’s take a look at how they fared.
General Summary & Methodology
We ran an automated accessibility scan using axe-core against a common “checkout-flow” across the top 100 retailers according to the National Retail Federation (NRF). The “checkout-flow” consists of 3–6 pages and page states—navigating from the homepage, to a product listing, to a product detail page and then, adding it to the shopping cart in an attempt to purchase.
Across the 433 total pages tested, axe-core found 10,586 accessibility issues.
Automated testing for digital accessibility issues using axe-core can detect 57% of the total issues. Therefore, the results depicted in this report should be understood to be a conservative snapshot of the broader accessibility of these brands. That said, automated testing should always be supplemented with manual testing using an expert to ensure all possible accessibility barriers are detected.
Initial Findings
Considering Black Friday and end-of-year holiday shopping are just around the corner, the majority of these top 100 retailers still have a large number of critical accessibility issues in place, for arguably the most important core function of their sites: buying things.
70% of the pages contain Critical issues, which are issues that likely have a very significant impact on many people with disabilities attempting to perform the core functions of the site.
In fact, the average top retail brand has 25 Critical issues and 58 Serious throughout their “checkout-flow.”
Graph 1: Depicting Issue Severity. 10,586 total issues. 2,516 Critical issues. 5,777 Serious issues. 2,286 Minor issues.
The Good and Not-So-Good Performers
If we break down the top retailers into industry segments, Auto Parts, Luxury and Sporting Goods brands performed the best—containing fewer Critical issues than other segments. It’s also important to note that these brands all offer robust e-commerce stores. If you look at the Fuel or Convenience retail segments, they use their web properties to drive in-person activity as opposed to online sales.
Warehouse, Home Furnishing, Home Improvement and Clothing brands performed the worst, containing more Critical issues than other segments.
So, why do some retail industries struggle more than others? Site complexity. Generally speaking, brands that offer a faster path to purchase have also made accessibility testing a consideration–which isn’t a surprise since many UX/UI designers are acting as accessibility champions within their digital organizations.
Other Trends
Dynamic and complex sites are more difficult to support, Retail isn’t much different from other sites in this respect. The most common digital accessibility issue types across Retail are Parsing, Color Contrast and ARIA misuse. This is not unique to Retail alone.
The Grocery and Home Improvement brands appear to struggle with Color Contrast. These color contrast issues are most often caused when the retailer’s brand colors have poor color contrast. For example, if the main brand colors are a bright red and white, that don’t have enough contrast and the site over uses these two colors for text content, button text and/or link text, then significant amounts of text is difficult to read by people with low vision. Brands that have low contrast colors can develop text color design guidelines that are easy for the human eye to perceive while also honoring their brand. Interestingly, roughly half of the grocery and home improvement brands are making an “A” in meeting color contrast, proving that this requirement is very achievable.
Some Grocery, Home Improvement and Clothing brands struggle with Parsing. Organizations with many accessibility parsing issues on their websites tend to fall into two categories. Category one: the organization is relatively new to accessibility and has many issues across all the types of accessibility requirements. Category two: the organization has made good progress on other types of accessibility requirements (like alternative text for images and labels for form fields), but they have not had a chance to fix all the accessibility parsing issues yet. A closer inspection of this automated accessibility scan data reveals that more than half of the Grocery, Home Improvement and Clothing brands are actually making an “A” on accessibility parsing. But the remaining organizations that do have parsing issues have a high incidence of these problems on most if not all of their pages.
Clothing brands struggle with Name, Role, Value. Clothing brands struggle with Name, Role, Value issues because they have product pages and checkout flows that contain a lot of unique elements. There are heavily styled radio buttons that represent colors for the items, listboxes for picking size, checkboxes for ‘add a gift card’ and ‘ship to billing address’, input fields for first name, last name, delivery address. All these elements may have a role by default, but often don’t and if you don’t give them a name, and a value when needed, they won’t have them.
Understanding the issue types
What are Color Contrast issues?
Good color contrast between text and the background is important so people can read the text. Have you ever had to squint to read medium gray text on a dark gray background? Chances are that text did not meet minimum color contrast requirements for accessibility. People with color blindness and people with low vision need good color contrast to be able to read content.
What are Parsing issues?
Parsing is simply making sure the code used to build the web page follows the syntax requirements. Web pages are primarily built using HTML, CSS and JavaScript. All programming languages have syntax requirements that must be followed for code to work properly. When a web page has accessibility parsing issues, it can cause problems for people who rely on assistive technology like a screen reader.
What are ARIA issues?
ARIA (Assistive Rich Internet Application) is a way to make web content accessible to people with disabilities. ARIA is most frequently needed when a web developer decides to hand-code functionality using JavaScript instead of just using basic HTML. When developers use HTML correctly, accessibility is built-in. For example, if a developer uses a native html <button> correctly, it will be fully accessible. However, if the developer hand codes a button using JavaScript, they will have to hand stitch in accessibility using ARIA.
What are Name Role Value issues?
“Name , Role, Value” sounds complex but isn’t. Every webpage contains elements. Elements are what make a page more than just content. Elements include, but aren’t limited to inputs (like a search field, or ‘first name’ field), buttons (continue, back, next), Checkboxes, radio buttons, listboxes (shipping state), and so on. Each of these things must have at least a programmatic name and role, and sometimes a value. A checkbox can visually look checked, and visually be associated with a block of text that says ‘I agree to have 125 dollars billed to my credit card ending in 1234’ but if you don’t associate that label with the checkbox, don’t give it a role like ‘checkbox’, and don’t let assistive technology know it’s checked. If a person using an assistive technology can even reach the checkbox, it will simply read ‘clickable’. In this example above, that costs you a sale.
Summary
The good news is that a very, very large number of the Critical and Serious accessibility issues detected can be easily fixed. While it might be too late for some brands to implement fixes in time for Black Friday shopping, they can still make a difference for the remaining shopping season. Every barrier removed makes a difference.
While there is still plenty of room for improvement, we’re also seeing a number of retailers make significant strides in minimizing accessibility barriers. Emboldened by the pandemic, retailers were forced from digital-first to digital-only operating models, and accessibility teams everywhere gained the attention and buy-in they needed. As attention on the pandemic wanes this season, remember that the need for digital accessibility is still as important as ever.
