E-mail List Archives
Thread: Product color variation selection in e-commerce
Number of posts in this thread: 3 (In chronological order)
From: Erick Wilder
Date: Wed, Jul 13 2022 7:54AM
Subject: Product color variation selection in e-commerce
No previous message | Next message →
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
From: glen walker
Date: Wed, Jul 13 2022 11:15AM
Subject: Re: Product color variation selection in e-commerce
← Previous message | Next message →
When you say a plain list of links, you mean it's not contained in a list,
right? That would be the first change because a sighted user can get an
idea how many choices they have just by seeing how many links there are but
without the links being contained in a real list, the screen reader can't
announce any metadata about the list (such as the number of items).
How a product color is presented can vary widely depending on the product.
Some might only need "red", "green", "blue". Others might need a more
descriptive color name such as "cloudy sky" or "sandy beach" (like paint
colors). And then you might have multiple colors, for example a striped
shirt. Or it could be a pattern, like paisley.
If the color choice (link) is just a swatch of color, you absolutely need
alt text, and probably a tooltip with the color name for the sighted mouse
user. But displaying the color name for everyone is usually the best
option.
It's tough to give specific advice without seeing the product page. Is
this a production site?
From: Erick Wilder
Date: Wed, Jul 13 2022 11:49AM
Subject: Re: Product color variation selection in e-commerce
← Previous message | No next message
Hello Glen,
Thanks for your reply.
Yes the links are currently not contained in a list element - would the
list suffice or the idea for a navigation element (i. e nav html element)
makes sense?
Here is an example product detail page:
https://www.adidas.co.uk/superstar-shoes/FW2292.html
Please note the component in question is only available when accessed on a
larger screen (e. g.: desktop computer)
On Wed, 13 Jul 2022 at 19:16, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> When you say a plain list of links, you mean it's not contained in a list,
> right? That would be the first change because a sighted user can get an
> idea how many choices they have just by seeing how many links there are but
> without the links being contained in a real list, the screen reader can't
> announce any metadata about the list (such as the number of items).
>
> How a product color is presented can vary widely depending on the product.
> Some might only need "red", "green", "blue". Others might need a more
> descriptive color name such as "cloudy sky" or "sandy beach" (like paint
> colors). And then you might have multiple colors, for example a striped
> shirt. Or it could be a pattern, like paisley.
>
> If the color choice (link) is just a swatch of color, you absolutely need
> alt text, and probably a tooltip with the color name for the sighted mouse
> user. But displaying the color name for everyone is usually the best
> option.
>
> It's tough to give specific advice without seeing the product page. Is
> this a production site?
> > > > >
--
Enviado do Gmail para celular