WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Image alt text for multiple product views on retail websites

for

From: Mark Magennis
Date: Sep 26, 2019 2:28AM

Hi Greg,

I have two immediate thoughts on this.

First, alt text is intended to give equivalent information. The information a person gets by viewing an image depends not just on the visual content of the image but on the user's purpose in viewing it. For example, "Front view of man wearing Wrangler Button-Down Shirt" might be good alt text on a stock photo library image because a user might be looking for images of men wearing particular types of clothes. But it is probably not good on a shopping site because you're not interested in what the image shows but on the nature of the item. So better alt text might be "Men's Wrangler Button-Down Shirt in brown and blue bold check pattern".

My second thought is who's going to write this alt text for all these products? Is it even feasible? Are they even likely to do a half decent job that gives the information that visually impaired users need? Do we even know what information these users do need (my example above may be quite wide of the mark)?

In practice it may be beyond the client's writing skills and resources to produce alt text any better than " Wrangler Button-Down Shirt" or whatever description is already attached to the product in the database, and this may well already be being used for the page heading anyway.

Don't want to put a downer on it, but worth considering.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Greg Jellin
Sent: 26 September 2019 00:26
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] [WebAIM] Image alt text for multiple product views on retail websites

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