A11y question: why not using a list (<ul />) ?

oliviertassinari / react-swipeable-views

A React component for swipeable views. :snowflake:

https://react-swipeable-views.com/

MIT License

4.46k stars 480 forks source link

A11y question: why not using a list (<ul />) ? #400

Open renaudtertrais opened 6 years ago

renaudtertrais commented 6 years ago

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Hi. Thanks for this great package, it works very fine for my usage.

I was just wondering if you had ever consider using a <ul /> for the element wrapper for a11y reason mainly: it allows screen readers to announce the number of items swipable ?

Advice made here also https://github.com/GoogleChromeLabs/ui-element-samples/issues/18 by @robdodson

oliviertassinari commented 6 years ago

@renaudtertrais I'm not sure it's the same use case. The only accessibility element we have is aria-hidden. Last effort on a11y was with https://github.com/oliviertassinari/react-swipeable-views/pull/245.

oliviertassinari commented 6 years ago

Ok, not the same use case, on the repository you linked, multiples card are shown at the same time. Here, we only show one slide at the time. This is what the aria-hidden property is for.

renaudtertrais commented 6 years ago

Thanks for your response. The link I shared was just to show the explanation of @robdodson on the advantage of using <ul /> tag for list in general, not to compare the use case. If you take a look to W3C recommendations, it seems that even for "Carousel", <ul><li /></ul> is the good choice. It will help screen readers (an users) to know how many views are available.

https://www.w3.org/WAI/tutorials/carousels/structure/

We could enable to change tags thought props or at least add roles:

parent div: role="list"
children: role="listitem"

What do you think ?

oliviertassinari commented 6 years ago

@renaudtertrais I don't have much knowledge of a11y. Nor I have an important drive in learning more about the topic. I'm reopening the issue as I'm not 100% confident with the current answer to the problem. I would love to get feedback from more people on the topic.

robdodson commented 6 years ago

That's an interesting proposal @renaudtertrais. I think there may need to be a bit more work to make the cards accessible. Currently when a card is offscreen is has aria-hidden applied to it, and there's no way to send a signal to the swiper that it should advance to the next card (at least, no instruction is conveyed to a screen reader). Before worrying about how a screen reader will announce a card, you'd first want to make the control keyboard operable. Once that's fixed, you could then explore how to make it convey the correct semantics to a screen reader.

oliviertassinari commented 6 years ago

you'd first want to make the control keyboard operable.

Regarding making the control keyboard operable, we have a bindKeyboard() higher-order component abstraction to do so. Maybe it can help.

there's no way to send a signal to the swiper that it should advance to the next card

We have the option to display dots to signify the current position in the list. I'm not sure it can be used to signal.

Klynger commented 5 years ago

@oliviertassinari about this use case of showing multiple slides at once, is this a feature that you think is applicable here? If not, do you know any other library that has it implemented and works well with SSR? Thanks