Accessibility Issues On Slick Carousel

[sanjay-parashar]

Please find the following accessibility issues The below observation can be reproduced on the cart page and PDP

Issue 1 → Product image information is not called by a Screen reader in cross-sell carousel.

Issue 2 → Assisted user fails to access move cross-sell carousel product via slick dots with keyboard's Tab key

Issue 3 → When the following set of carousel products is shown, on tabbing keyboard focus is not going on slick dots

Pre-Condition

1. Cross-Sell product carousel must be configured on the cart page and Product detail page
2. NVDA tool install and active on the user system.

Step to Reproduce

1. Navigate to the cart page or PDP
2. Active NVDA tool
3. Scroll to the bottom of the cart page or PDP
4. Access the Carousel with Keyboard Keys

Issue 1 → Product image information is not called by a Screen reader in cross-sell carousel. => Issue occurs on random products which is not reproducible when slick is removed.There is no change that can be done on code level to fix the same as it is library issue.

Issue 2 → Assisted user fails to access move cross-sell carousel product via slick dots with keyboard's Tab key => In slick current version, slick dots movement is controlled by arrow keys. It is managed through slick and not on our side.

Issue 3 → When the following set of carousel products is shown, on tabbing keyboard focus is not going on slick dots => In slick current version, it is achieved using page down + enter key when slick is not on the first dot. This behavior as well is controlled by slick as we are using this library to show carousal.

Attachment

---

https://share.vidyard.com/watch/NApKfUApLyw95KRFBkZjF6?

[handred800]

try this a11y version https://accessible360.github.io/accessible-slick/