search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Do not set aria-hidden on elements visible in the viewport #1228

Open ghost opened 2 years ago

ghost commented 2 years ago

This is an amazing library. Kudos to the devs!

I noticed an accessibility issue in the slider. The issue is that aria-hidden attribute is being set to true for elements which are in the slider view. Please see this reproduction I made: https://codepen.io/geon-halfhelix/pen/YzeEbLj

image

neodigm commented 1 year ago

Hi. I too have encountered this issue. It's failing Chrome Lighthouse A11y audit.

aspatino commented 1 year ago

Hello,

We're experiencing this issue on a site. Any word on a fix?

desandro commented 1 year ago

Thanks for reporting this issue. Add a 👍 reaction to this issue if you would like to see this feature added.

The challenge is calculating which cells are within the viewport any time a slide is selected.

mdoxwp commented 1 year ago

Am seeing the same issue. Please include/fix in the next build.

jimrowetpa commented 1 year ago

I also have this issue, is there a fix incoming or a workaround anyone is aware of? Thanks.

adrielklein commented 1 year ago

Same here, would love a fix

mangitmaharjan commented 11 months ago

Any solutions?

neodigm commented 11 months ago

Hi. I can imagine a solution using InterSectionObserver. If anyone is interested, I could write a work around patch, or create a PR. Let me know if I can help.

pirco commented 10 months ago

my client is being sued because of ADA non-compliance. this issue is a sticking point. I'm interested @neodigm

neodigm commented 10 months ago

Hi, I've create a patch that should improve the Lighthouse audit results with one or more carousels on the page:

Flick aria-hidden patch

I've tried on a few production sites with good results. Let me know if you've any issues.