WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WebAIM-Forum Digest, Vol 174, Issue 25

for

From: Christine Hogenkamp
Date: Sep 26, 2019 12:42PM

Hi Greg,

If the content of your image (ie the product info regarding item, size,
colour, etc) is already addressed elsewhere on the page in live text (as is
best practice for accessibility), then repeating that just to identify the
image would be considered redundant, as the image is acting decorative to
match that product info.

I find this tree handy sometimes:
https://www.w3.org/WAI/tutorials/images/decision-tree/

Goodluck!
--
*Christine Hogenkamp*
Front-end Developer

CONTEXT CREATIVE
317 ADELAIDE ST. W., #500 | TORONTO, ON CANADA | M5V 1P9
<https://maps.google.com/?q=317+ADELAIDE+ST.+W.,+%23500%C2%A0+%7C%C2%A0+TORONTO,+ON+CANADA%C2%A0+%7C%C2%A0+M5V+1P9&entry=gmail&source=g>

On Thu, Sep 26, 2019 at 2:00 PM < <EMAIL REMOVED> >
wrote:

>
>
> ---------- Forwarded message ----------
> From: Greg Jellin < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Wed, 25 Sep 2019 16:26:21 -0700
> Subject: [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
>
>
> > > > >