From missing alternative text to redundancy, several of the Internet’s leading ecommerce sites have potential web accessibility problems, which might make it difficult for shoppers with disabilities.
In the absence of clear and specific U.S. government regulation and guidance, 2016 may see an increase in the number of lawsuits filed against ecommerce sites for perceived web accessibility failures. To make the point, a Bloomberg report published last November stated that there had been more than 40 web accessibility lawsuits filed against American companies in 2015.
Online retailers certainly do not want to turn away consumers or even make it more difficult for them to shop. On the contrary, most ecommerce companies work hard to remove barriers in the path to purchase. But web accessibility is not a perfect science.
Web Accessibility Is Not Clearly Defined
Online merchants face at least three challenges related to making a site easily accessible to disabled shoppers.
First, web accessibility is not necessarily defined or at least not clearly defined. There is a longstanding reference, the Web Content Accessibility Guidelines (WCAG), which is part of the World Wide Web Consortium’s (W3C’s) Web Accessibility Initiative. But as good as these W3C guidelines may be, they may not be enough. Until the U.S. defines rules for web accessibility, it is impossible to be compliant with those nonexistent rules. Thus, it is not certain that using and following WCAG is sufficient.
Second, not every web accessibility recommendation makes perfect sense or is completely necessary. For example, guideline 13:5 on the U.S. Department of Health and Human Services usability website effectively says that every form field should have an associated label. But this is not necessarily an essential practice. Screen readers and assistive devices can, often, interpret a name attribute for a field and there are many times when a form field is hidden, so that this rule might require a hidden label for a hidden input.
Third, some accessibility problems are built in to an ecommerce platform’s core files. For example, some versions of WooCommerce produce an orphaned form label when a business only sells domestically. Without describing the specifics, this can be relatively hard to correct, since it is part of a core WooCommerce function.
Taking a Snapshot of the Industry
Given this environment, I selected 20 ecommerce websites of leading American retailers. I then submitted the home page to the WebAIM WAVE Web Accessibility Evaluation Tool.
This tool produces a report, pointing out web accessibility concerns. The goal of this non-scientific survey was to identify common or perhaps even the most common sorts of web accessibility problems on ecommerce sites.
There are two things to consider when we look at the number of errors and alerts for each site.
First, each instance of an error is counted. So if a site makes the same error 10 times, WAVE counts all 10.
Second, sites change constantly. Several of the sites on this list were reviewed, with WAVE, on consecutive days. The number of errors and alerts for these sites changed as the site content changed. So the error or alert count is not static; it is a snapshot.
|WEBSITE||ERRORS||ALERTS||CONTRAST CONCERNS||TYPES OF ISSUES|
|amazon.com||32||166||3||Missing alt text for images, long alt text, redundant text.|
|walmart.com||115||505||208||Missing alt text for images, empty links, redundant alt text.|
|costco.com||7||102||13||Missing alt text for images, missing form labels, redundant alt text, long alt text.|
|ebay.com||26||195||26||Empty links, redundant links.|
|target.com||3||49||6||Empty link, redundant title text.|
|macys.com||12||103||0||Empty link, orphaned form label.|
|apple.com||11||3||2||Empty link, redundant link.|
|kohls.com||123||199||34||Missing alt text for linked images, empty links, redundant links.|
|nordstrom.com||15||599||2||Empty link, orgpahed form label, redundant title text.|
|gap.com||18||46||5||Missing alt text for images, redundant links, small text.|
|rakuten.com||61||129||26||Missing alt text for images, empty links, redundant alt text, suspecious link text.|
|starbucks.com||7||10||3||Empty form label, noscript element.|
|staples.com||71||563||31||Empty form label, missing alt text, redundant title text, redundant link.|
|officedepot.com||14||39||69||Empty link, redundant title text, redundant alt text.|
|petsmart.com||12||89||4||Missing alt text for images, redundant title text.|
|tractorsupply.com||15||99||8||Empty link, missing alt text, redundant link.|
|narnesandnoble.com||18||105||30||Missing alt text for images, nearby image with same alt text, redundant link.|
|footlocker.com||26||277||15||Empty link, missing alt text, tabindex, redundant title link.|
|williams-sonoma.com||17||45||21||Image map area missing alt text, nearby image has the same alt text.|
|dell.com||5||288||16||Empty link, nearby image has the same alt text, redundant title text.|
Missing Alt Text for Images
The WAVE tool found that many of the sites surveyed did not include alternative text for every image displayed. The concern is that some site visitors many not be able to see the image, thus there could be important meaning lost.
Not all of the examples of missing alt text were egregious. Amazon was dinged, if you will, for several occurrences of spinner GIFs meant to indicate some portion of the page was loading. The Walmart site has several instances of this error for what seem to be tracking images.
To avoid this problem, use text alternatives to inform shoppers.
Nearby Image with the Same Alt Text
Several of the sites had alerts for using the same alt text for images very near each other on the page. This does not violate a guideline, but is a strong indicator of potential problems that something on the page is redundant or that the wrong alt text may have been entered.
The Dell website, as an example, had 67 instances of this alert associated with the site’s fly-out navigation. In this case, the alert really represented an error, since the trouble was that Dell was using a period (.) as the alt text for all of the images in the navigation.
To quote WebAIM, “if a link contains not text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.”
This sort of an error might make it impossible for some users to find a product or complete a purchase. The Ebay home page had 19 empty links. Each of these tended to be a link wrapped around an icon, which in some cases, was only delivered via CSS.
From alt text to title tags and more, redundancy generated many alerts from the WAVE evaluation tool. When adjacent links go the same place, or adjacent titles say the same thing or even when adjacent alt attributes are the same, users can become confused or annoyed.
As an example, Nordstrom generated 520 alerts for redundant title text, mostly in its navigation. Each title in the navigation had an attribute that exactly matched the link’s text, as in “Shop Gift Cards” and “Shop Gift Cards.”
On some screen readers both the title attribute and the link text would be read. The shopper would literally hear “Shop Gift Cards, Shop Gift Cards, Recommendations, Recommendations, Stores and Events, Stores and Events” and so on.
According to the WAVE tool, all of the sites surveyed exhibited contrast errors, meaning there were sections where the ratio between the text color and the background color was less than 4.5:1.
Low contrast can make it difficult for some site visitors to see or read content. The WCAG guideline is the aforementioned 4.5:1 contrast ratio. It is, however, recommend that you use at least a 7:1