WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Product color variation selection in e-commerce

for

From: glen walker
Date: Jul 13, 2022 11:15AM

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?