Implement acessibility features

[DouglasdeMoura]

Please check the page below:

https://www.w3.org/WAI/EO/Drafts/tutorials/sliders/

[ganlanyuan]

Will check this, thanks

[ganlanyuan]

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

[epigeyre]

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

• Part 1
• Part 2
• Part 3

I thought this might help make your script even better!

[ganlanyuan]

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:

• Part 1 http://mmckinnon.com/blog/2015/accessible-carousels-part-1
• Part 2 http://mmckinnon.com/blog/2015/accessible-carousels-part-2
• Part 3 http://mmckinnon.com/blog/2015/accessible-carousels-part-3

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)

[ganlanyuan]

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

[epigeyre]

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

[epigeyre]

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!

[ganlanyuan]

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

[ganlanyuan]

• 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

[ganlanyuan]

• 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

[ganlanyuan]

• 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

[Eric-Draven]

How to place navigation and pagination under carousel?

[epigeyre]

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

[Eric-Draven]

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

[OD-fraja]

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

[ganlanyuan]

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

[OD-fraja]

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

[ganlanyuan]

@OD-fraja You're welcome

[missmatsuko]

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?

[ganlanyuan]

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

[missmatsuko]

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

[ganlanyuan]

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.

[webpro-solutions]

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?

[camtin]

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.

[tombassrosenfeld]

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