WebAIM - Web Accessibility In Mind

E-mail List Archives

Product color variation selection in e-commerce

for

From: Erick Wilder
Date: Jul 13, 2022 7:54AM

Hello, I'm Erick - first time posting here. Before anything, thanks for so
many great insights I can read in this discussion list.

Now, onto my questions/case.

I've been checking e-commerce websites and they all present product color
variations in very different ways. One of my colleagues was asking me for
directions on how to make such sections more accessible but I found myself
with more questions than answers after looking for examples online.

The one we have in this case is a *plain* list of links (i.e one "a '' HTML
tag rendered one after the other), each leading to a new product detail
page. The links have no visible text as they use images with each color
variation (unfortunately, these images all have blank alt text and we can't
do much about it *today*). These links have labels like "White / Metallic /
Black", but sometimes they may contain text like "White / White / White"
and because of that, a request to change it so it reads only the *main
color* of the product (i.e White) was made. But, after testing, it ended up
creating a page with several links labelled "White" and this was worsening
the situation from my point of view.

I have thought about a quick change adding the word "Color:" as a prefix,
making these links to be read out loud as "Color: White / Metallic /
Black". The rationale is that when navigating over Links in a screen reader
(i.e rotor in VoiceOver), these labels don't make much sense without the
prefix. Is this a sound change?

Apart from the copy, I also suggested a change of the *plain list* of
links to use an actual HTML list inside a nav HTML element labelled by the
component title (i.e Color selection) - in this case I tend to think the
"Color:" prefix is not necessary but when navigating links in rotor, I am
not sure.

Are there other alternatives I may have been missing here?
What is the most important thing to be in the label of such links?

I appreciate your time reading it. Regards, Erick