Accessibility Improvements

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels

https://flickity.metafizzy.co

7.53k stars 603 forks source link

Accessibility Improvements #1197

Open stephenhmarsh opened 2 years ago

stephenhmarsh commented 2 years ago

Hi @desandro

In this PR I'm suggesting changes to address various accessibility concerns.

Address https://github.com/metafizzy/flickity/issues/776 by showing/hiding focusable elements inside a cell based on if the cell is selected.
Set aria-live assertive to announce content as slides are changed, and handle related auto-play issues https://github.com/metafizzy/flickity/issues/1041 and https://github.com/metafizzy/flickity/issues/1096
- Make Prev/Next buttons more explicit
- Allow arrow key navigation to continue even when focused on an element inside a slide.
You can see an example here: https://5ef272f9ab690c0022ef30ab-chkmlbhrup.chromatic.com/?path=/story/carousel-carousel--carousel

desandro commented 2 years ago

Thanks for submitting this PR! I am evaluating accessibility improvements now. Good timing. I'll be taking a look.

In the meantime - Can you try to adhere to code style? Run npm run lint for linting.

stephenhmarsh commented 2 years ago

Oops, thanks for pointing that out. Linted.

vasanthangel4 commented 2 years ago

hi all i have updated the above code still accessibility is not working in ios devices. but it is working fine in Android . please let me know if any specific changes required to add.

stephenhmarsh commented 2 years ago

hi @vasanthangel4 could you tell me which things are not working as expected on iOS devices and which browser(s)? (Safari?)

vasanthangel4 commented 2 years ago

Hi @stephenhmarsh: when we enabling the voiceover and accessibility carousel scrolling not working with Three-finger triple tap. Safari browser in ios device. android application is working fine. please let us know if you have solution. i have applied accessibility improvement PR, but it is not helping. please let me know if any vanila js fix for this issue.

stephenhmarsh commented 2 years ago

Hi @vasanthangel4 - I think I see what you mean. With VoiceOver on, the carousel doesn't respond to swipe gestures to change/navigate the slides, or even scroll the container. I do think that is a problem, however it appears to be an existing issue with previous releases of Flickity, and not a problem that was introduced by this branch. If that's the case, you might want to make a separate GitHub issue to address iOS VoiceOver gestures separately? It's something I will try to learn about, but in the meantime this branch only fixes the other issues.

vasanthangel4 commented 2 years ago

Thanks. Yes I have raised as new issue. Please let me know if you find any fix for this.

legendofmi commented 2 years ago

@desandro Any clue when this will be merged? I use a carousel where each cell is a linked image. Currently tabbing is selecting all images in the carousel (including the ones on hidden slides). It would be great if only the active/visible slide elements would be “tabbable” when navigating with a keyboard.

aravind-tatcha commented 2 years ago

@stephenhmarsh @desandro Any idea when these fixes will be merged?