WebAIM - Web Accessibility In Mind

E-mail List Archives

Image alt text for multiple product views on retail websites

for

From: Greg Jellin
Date: Sep 25, 2019 5:26PM

Hello friends,

I'm working on an interesting problem for a major retailer. Each product
detail page has several product view images in both thumbnail format and
large image. As is typical on retail product sites the expectation is
that users will select various product thumbnails and the main image
will be a larger version. To see an example of what I'm talking about
take a look at a random product on Target's website:
https://www.target.com/p/wrangler-men-s-button-down-shirt-gray/-/A-54587668?preselect=54501186#lnk=sametab

Notice that Target wraps each thumbnail image with an a button
containing an aria-label. The aria-label basically provides the name of
the product with "image x of x". The alt text on each thumb is null. And
the large version of the image also uses null alt.

I've investigated several major retailers (Walmart, Amazon, Zappos,
etc.) and they all have different techniques. None describe the details
of the images.

I'd like to hear your opinions. What is useful to screen reader users
here? If you can't see the images what would be an appropriate treatment?

Do you think that each thumb should be described in detail (i.e., "Front
view of man wearing Wrangler Button-Down Shirt")?

Should null alt be used across the board on these images?

Should the entire region be hidden from screen readers?

Thanks,

Greg