Implement acessibility features

Question

Implement acessibility features

DouglasdeMoura opened this issue 9 years ago · 25 comments

DouglasdeMoura commented 9 years ago

Please check the page below:

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

Answer 1 · 2016-05-04T16:27:06.000Z

Will check this, thanks

Answer 2 · 2016-05-04T16:28:12.000Z

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

Answer 3 · 2016-05-10T10:11:42.000Z

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!

Answer 4 · 2016-05-10T12:21:46.000Z

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)

Answer 5 · 2016-06-07T19:55:23.000Z

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

Answer 6 · 2016-06-08T07:45:47.000Z

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

Answer 7 · 2017-05-17T09:24:48.000Z

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!

Answer 8 · 2017-05-20T21:19:35.000Z

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

Answer 9 · 2017-05-26T10:47:37.000Z

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

Answer 10 · 2017-05-26T10:56:12.000Z

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

Answer 11 · 2017-07-31T21:23:33.000Z

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

Answer 12 · 2018-04-17T15:10:58.000Z

How to place navigation and pagination under carousel?

Answer 13 · 2018-04-19T12:52:53.000Z

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

Answer 14 · 2018-04-23T11:47:36.000Z

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

Answer 15 · 2018-05-31T16:07:19.000Z

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

Answer 16 · 2018-05-31T20:47:47.000Z

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

Answer 17 · 2018-05-31T20:53:44.000Z

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

Answer 18 · 2018-06-01T10:50:26.000Z

@OD-fraja You're welcome

Answer 19 · 2018-07-12T17:31:43.000Z

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?

Answer 20 · 2018-07-14T21:52:59.000Z

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

Answer 21 · 2018-07-15T18:52:16.000Z

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

Answer 22 · 2018-07-16T21:49:29.000Z

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.

Answer 23 · 2018-09-07T23:38:05.000Z

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?

Answer 24 · 2020-01-30T15:52:34.000Z

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.

Answer 25 · 2020-05-25T14:58:33.000Z

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