flickity icon indicating copy to clipboard operation
flickity copied to clipboard

Published 20 hours ago • verified publisher icon metafizzy

Accessibility Improvements

Open stephenhmarsh opened this issue 3 years ago • 9 comments

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

stephenhmarsh avatar Dec 21 '21 18:12 stephenhmarsh

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.

desandro avatar Dec 22 '21 04:12 desandro

Oops, thanks for pointing that out. Linted.

stephenhmarsh avatar Dec 22 '21 04:12 stephenhmarsh

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.

vasanthangel4 avatar Jan 24 '22 18:01 vasanthangel4

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

stephenhmarsh avatar Jan 24 '22 18:01 stephenhmarsh

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.

vasanthangel4 avatar Jan 25 '22 03:01 vasanthangel4

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.

stephenhmarsh avatar Jan 26 '22 01:01 stephenhmarsh

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

vasanthangel4 avatar Jan 27 '22 10:01 vasanthangel4

@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.

legendofmi avatar Feb 18 '22 11:02 legendofmi

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

aravind-tatcha avatar Jun 22 '22 16:06 aravind-tatcha