search

loryjs / lory

☀ Touch enabled minimalistic slider written in vanilla JavaScript.
http://loryjs.github.io/lory/
MIT License
2.28k stars 243 forks source link

Improve accessibility #758

Open prsdta opened 5 years ago

prsdta commented 5 years ago

Hi, I'm not a11y expert but I try to think about it as much as possible so I figured I could add a sprinkle of it to lory.

My first concern is the case of infinite that creates duplicates slides. These should definitely have an aria-hidden="true" attribute so that they are correctly ignored by the screen readers and so on. This seems fairly easy to add in setupInifinte().

Checking out bxSlider or slick, I actually noticed they set aria-hidden="true" to all slides that are off-screen, so I guess this would be the more widely-accepted pattern? I figure this would mean setting aria-hidden="false" to the active slide (+slidesToScroll) in slide() and set the others to true.

If you guys are okay with this I should be able to create a PR.

Bonus: Improve keyboard navigation

Right now, tabbing to an element into a slide out of the frame makes the browser scroll to it, which screws up lory's calculations. Ideally, preventing tabbing into an element with aria-hidden="true" could be enough to solve this issue (I'm still experimenting around this).

nstanard commented 5 years ago

Thank you for your input. I would like to get back to work on this project and really appreciate the feedback.

prsdta commented 5 years ago

Upping this a bit, since I'm using lory in production now I'd want these parts improved. Any opinion on what I've proposed? Since I've looked a bit at the code before I feel fairly confident I'm able to write a PR.

Otherwise, I guess I'll work on a fork 😅