WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Product color variation selection in e-commerce

for

From: Erick Wilder
Date: Jul 13, 2022 11:49AM

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 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