metafizzy / metafizzy/flickity
Image zoom buttons do not have an accessible name - Shopify Product Slider
- 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
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