Giters

ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Implement acessibility features

DouglasdeMoura opened this issue · comments

commented

Will check this, thanks

commented

Tiny-slider is still in progress right now, please give more ideas if possible.
Thanks

commented

This series of articles offer a nice sum up of accessibility best practices for carousels:

I thought this might help make your script even better!

commented

Great, thanks
On Tue, May 10, 2016 at 6:11 AM Etienne Pigeyre notifications@github.com
wrote:

This series of articles offer a nice sum up of accessibility best
practices for carousels:

I thought this might help your script even better!

—
You are receiving this because you commented.

Reply to this email directly or view it on GitHub
#4 (comment)

commented

Hey,
Accessibility features added. Could you check?
Only for touch screen I couldn't figure out how to support. Any idea?

commented

Thanks, I will check as soon as I can and get back to you!

commented

Hello,

Sorry it's been so long! So I had time to check and here is my feeback:

  • aria-hidden -> OK.
  • aria-controls -> On the carousel pagination, if the number of items is set to more than one, the aria-controls value doesn't reflect this setting (it's selecting the next one instead of the n + 2 if we set items value to 2).
  • aria-selected -> OK.
  • Content order -> From an accessibility stand point, it makes more sense to have navigation and pagination above carousel.
  • Limiting tab selection -> tabindex="-1" should be added to every inactive slide.
  • Navigation keyboard control -> Add tabindex="0" to the Carousel navigation container and tabindex="-1" on both carousel navigation buttons.
  • aria-live -> In my opinion it depends too much on the purpose of the carousel to be implemented in a global solution so don't bother.

For touch screens I'm sorry but my Javascript skills are very limited, I can't help you...

Hope this helps!

commented

Thanks @epigeyre for your feedback.
I will check these when I have time.

commented
  • Content order -> From an accessibility stand point, it makes more sense to have navigation and pagination above carousel.

Will update in next main version, since this will cause a DOM change.

  • Limiting tab selection -> tabindex="-1" should be added to every inactive slide.
  • Navigation keyboard control -> Add tabindex="0" to the Carousel navigation container and tabindex="-1" on both carousel navigation buttons.

Done

commented
  • aria-controls -> On the carousel pagination, if the number of items is set to more than one, the aria-controls value doesn't reflect this setting (it's selecting the next one instead of the n + 2 if we set items value to 2).

Will work on this maybe this weekend.
Done

commented
  • Content order -> From an accessibility stand point, it makes more sense to have navigation and pagination above carousel.

This will be done from v2.0

commented

How to place navigation and pagination under carousel?

commented

@Eric-Draven The best way is probably to use position: relative on your slider's wrapper and position: absolute on your navigation and pagination elements so that you can place them wherever you want.

commented

Thank you, I know this, but it would be nice to be able to change through the options.

commented

@ganlanyuan @epigeyre Regarding tabindex="0" on the controls container what was the reason behind it? Is that really needed? We use a company to audit our site and they logged this as an issue that tabindex="0" causes and extra tab which is not needed.

commented

@OD-fraja So that it can be focused (instead of prev, next button been focused) and user can control the slider using arrow keys.

commented

@ganlanyuan Aha I see, makes sense. I did not know that you could use arrow keys to control the slider. That makes sense now. Thanks for your prompt reply.

commented

@OD-fraja You're welcome

commented

Limiting tab selection -> tabindex="-1" should be added to every inactive slide.
Navigation keyboard control -> Add tabindex="0" to the Carousel navigation container and tabindex="-1" on both carousel navigation buttons.

Done

I'm just checking out the sliders on the demo page. I can see that the tabindex is set as described above, but I still can't seem to tab past a carousel without going through each slide. Is some JS that is programmatically focusing the inactive slides on tab?

commented

@missmatsuko Hey, it's because of the <a> tag in each slide.

commented

@ganlanyuan Hmm, I see. I think the content inside the inactive slides really shouldn't be focusable, even if they have links in them.

commented

You're right.
But it's too much for the slider to check all the possible focusable child elements of inactive slides and make them non-focusable.
I will search for ways which just need to work on the slides themselves.

commented

The problem we're having with this, is that we are lazy loading the images so if we tab through and the images haven't loaded (which a user may do), then it shows an invalid image which is not ideal. I have went ahead and targeted our links and disabled the tab index just so this does not occur. However, I think it would provide a better UX if the tab index was only enabled for elements within the visible slide?

commented

Hi, I think it might be reasonable to check for focusable child elements, and make them tabindex -1. A technique I've seen used is to store the element's previous tabindex value in a data attribute, and "restore" it from that attribute when it's visible again. I'm going to open this up as a separate new issue and attempt to fix on my own fork.

commented

@ganlanyuan @epigeyre the tabindex= -1 is causing issues if using navigation arrows outside of the nav container (setting custom prevButton and nextButton). Is there a way to only set tabindex= -1 if the nav is set to true?