Swatches and accessibility

Explorer
70 11 15

I have a 'Select Size' swatch on my product page. I'm using the swatch code provided by Shopify. Everything is working except for accessibility. I want to be able to select a size using the 'tab' and 'enter' keys. Right now I can only select a size by clicking. I can tab to a particular size option, but pressing enter does nothing. 

Do I just need to add a keypress event somewhere?

Does anyone have a similar problem or have any ideas?

Thanks

 

0 Likes
Shopify Expert
4019 562 963

Hi @Alan15 

Send me your store url.

May be you have to use key even Jquery for that.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
1 0 0

Has anyone at Shopify solved this issue?

0 Likes
Explorer
70 11 15

Hi,

I never got around to fixing this, but I notice that Shopify's free Brooklyn theme has a size selector that works. You can move through the sizes option with the arrow keys.  https://themes.shopify.com/themes/brooklyn/styles/classic/preview

The code is in the product-template.liquid file, maybe you can find a solution there.

0 Likes