altattribute identifying it as an image; however, no accompanying text is required (21% of sites get it wrong)
altattribute with text that accurately conveys the information within the image, in addition to the image’s function or destination (49% of sites don’t)
Our rating of 33 top-grossing sites, conducted during our research on Accessibility in e-commerce, reveals that 82% of e-commerce sites have broad compliance issues when it comes to images — resulting in a subgroup of users being unable to use images to learn more about a site’s products and services, or use images to navigate the site.
Moreover, 52% of sites have specific compliance issues with regards to making “Decorative” and “Functional” images accessible.
With the importance that images have on most e-commerce sites, this can lead users who rely on assistive technology to abandon the site.
In a previous article we discussed the accessibility requirements for “Informational” images.
Yet “Informational” images are only 1 of 3 main image types, as identified by the WCAG, as needing specific accessibility considerations.
In this article we’ll discuss the other 2 image types, and why sites should
We’ll also discuss a specific implementation of “Functional” images that link to multiple locations — often called “Image Maps” — that sites need to ensure compliance with accessibility principles.
Images that are included on an e-commerce site for strictly aesthetic reasons — for example, background images or similar “optional” images that have no impact on the ability of users with visual impairments to understand, interact with, or navigate a site — are considered “Decorative” images.
While most e-commerce images will need descriptive text following the
alt attribute (e.g.,
alt="A Craftsman circular saw...") — as described in our previous article — “Decorative” images don’t need any
alt text content explaining the image’s contents or purpose.
However, even purely “Decorative” images still need to contain an empty
In the Zappos example, the code is written as
<img alt src="homepage-the-style-room-december.jpg" class>
When screen readers encounter images with an empty
alt attribute (i.e., no text content associated with the
alt), they will simply note the presence of an image — announcing “image” — before moving on to the next focusable element.
Since the image from Zappos is included purely for decorative reasons — as the model is merely being shown wearing selected products from the site — the image needs no additional
alt information to convey the meaning.
Images that are used to initiate an action are referred to as “Functional” images, and their functions can be quite wide-ranging indeed.
Some examples of “Functional” images can be
While most sighted users will generally be able to understand the purpose of “Functional” images from the visual context, special considerations must be made for users with visual impairments to clearly communicate the same information.
For example, a graphic “Heart” icon — which most sighted users will likely understand as allowing them to save a product to their “Favorites” list — would need
alt text content informing users aided by screen readers of this visual context information (e.g.,
alt="Save to Favorites").
The same goes for other “Functional” images: “Add to Cart” buttons need “Add to cart”
alt text, “Submit” buttons need “Submit”
alt text, etc.
Similar to “Informational” images, “Functional” images that lack HTML
alt attributes can result in screen readers reading aloud the image’s file name or the URL link address, if not both — a frustrating waste of time for users to say the least.
(for Baymard Premium customers who would like to know more about accessibility for links, you can find this and 18 other Accessibility-related guidelines in the Accessibility study.)
An “Image Map” is a type of “Functional” image which contains multiple navigational links or area hotspots.
These images can often be seen in sitewide banners and large homepage or hero images, which direct users to different areas of the site based on which hotspot or link they activate.
However, while sighted users can quickly interpret where the various image-embedded links will take them using the visual context, users navigating the site via screen reader must rely on well-structured and accessible HTML.
For example, the image at Ann Taylor displayed above is organized around 3
Code Example from Ann Taylor
<img src="main-tiermap" usemap="#MainMap" alt="Shop Ann Taylor"><map name="MainMap"> <area shape="rect" coords="10,5,20,15" target="" alt="Shop Sale" href="/sale-view-all/cata055"> <area shape="rect" coords="10,5,20,15" target="" alt="Shop Petite Sale" href="/sale-petites/cat302"> <area shape="rect" coords="5,5,10,10" target="" alt="Details" href="/ann/common/popupContent"> </map>
Ann Taylor uses
<area> elements to convey to users the link destinations in the image map hotspots.
alt tags within each
<area> element communicate the informational content (e.g., “Shop Sale”, “Shop Petite Sale”, and “Details”).
However, this markup could be improved.
Here’s what a screen reader will announce when it comes across this image map:
The “Shop Now” and “Shop Petites” links would both likely make sense to users aided by screen readers, given that the image
alt text just prior to the “Shop Now” link announced “Shop Ann Taylor”.
However, the problem with the example at Ann Taylor is that users aided by screen readers aren’t given any information regarding the sale mentioned in the image unless they activate the ambiguously titled “Details” hotspot (which is the last interactive element in this image map).
Users using screen readers may wonder, “‘Details’ about what?” and “Where will that link take me?”.
A user navigating the site via a screen reader won’t have any context about what is awaiting them if they select the “Details” link, and therefore cannot accurately predict its destination.
To bring this image into full compliance with the spirit of accessibility standards, a few changes must be made:
alttext should provide details about the promotion — for example, “Shop now - 60% off 3 or more items, 50% off 2 items…“
alttext should be more descriptive — for example, “Promotion Details”
alttext could also be clearer — for example, “Shop All Clothing”, as users may not already be familiar with the types of products Ann Taylor sells
(For more information on implementing image maps, visit Mozilla’s image maps page.)
Images abound in e-commerce, which is why ensuring users can focus on the important images — that is, “Informational” and “Functional” images — while ignoring less-important “Decorative” images is key to their ability to efficiently navigate the site.
Yet 21% of sites don’t use an empty
alt attribute for “Decorative” images — resulting in a subgroup of users wasting their time as their screen reader reads nonimportant visual information to them.
Additionally, 49% of sites don’t use
alt text to describe the action a “Functional” image will initiate — meaning some users will miss key links and other site functions.
In the end, image accessibility on e-commerce sites comes down to identifying the types of images and their functions, and then coding the images appropriately so that users who use screen readers or other assistive technology can have the same rich experience as others.
Yet 82% of sites have broad image-compliance issues — indicating the vast majority of e-commerce sites are failing their users when it comes to image accessibility.
Join 25,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 firstname.lastname@example.org