metafizzy / metafizzy/flickity

Image zoom buttons do not have an accessible name - Shopify Product Slider

Open
#1,275 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.6k
Forks
593
PR merge metrics
No merged PRs in 30d

Description

Hello,

We have discovered an accessibility issue on the Flickity slider utilized in the Impulse theme by Archetype on our Shopify store. This appears in the element for image zoom on product images in the shop (e.g. https://www.soapcauldron.com/products/essential-oil-lavender) and is flagged by Google Lighthouse and Axe Dev Tools. This button does not have an accessible name; the zoom functionality is not announced by screen readers. I believe all that is required is to add an aria-label or title to the button element.

I was unable to find an existing issue, or a suitable codepen to include a reduced test case here—please let me know if I missed that, or if this issue is better addressed elsewhere. Thank you!

Contributor guide

Open the contributing guide

Research direction

Start by locating the image-zoom element used by the Flickity product slider and reproduce the missing accessible name with Lighthouse or Axe DevTools. Give the button a name that announces its zoom function, then rerun the accessibility check to confirm the violation is resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.