use div tags instead of ul and li for better accessibility

[lskovron]

Using <ul> and <li> tags for the slide wrapper and the slide items introduces accessibility (a11y) issues, since the slides are not presented as a "list of information".

• When a screen reader user is navigating by "next list" command they will be taken to the visible slide item. This is a confusing experience, since it's only a single visible item, not a list of items (see "next list" - https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts#vo-mac-navigation)
• When a screen reader user uses browse mode and enters the carousel, a misleading message will be read - "List item 1 of 6" for example
• note: it's still appropriate for the control-dots to use the ul > li heirarchy

[Mydayyy]

Running into the same issue. Ideally we would be able to pass aria-tags too, since I want to declare the slider as a tablist to AT. But unfortuately right now this seems not possible at all, since even the ul and li tags are hardcoded. (But it would already massively be helpful if those ul and li tags were just div, so screenreaders would atleast ignore them and I could use my elements)

[anurag-dhamala]

Also, the li tag has role="button". It's causing issue since ul must only directly contain li, script or template elements. Removing the role would be better.

[leandrowd]

Hi @lskovron, I currently have no time to maintain this library as you can see with the delay in replying this message. I'm happy to merge this PR soon but it looks like it could be a breaking change as people usually override the styles locally. Please ensure it's tested throughly and add a comment to your commit message describing the issue.

i.e: BREAKING CHANGE: styles overridden based on html tags will break, please use class names instead.

[tnadolski-ellucian]

I would be against this PR. W3 has a guidance structure for how Carousels should be, to make them the most accessible for screen readers -- the current structure of this Carousel matches that structure: section -> ul -> li https://www.w3.org/WAI/tutorials/carousels/structure/

[anurag-dhamala]

I would be against this PR. W3 has a guidance structure for how Carousels should be, to make them the most accessible for screen readers -- the current structure of this Carousel matches that structure: section -> ul -> li https://www.w3.org/WAI/tutorials/carousels/structure/

though ul -> li is present, the role of li is "button" (<li role="button"....> . So, it is failing accessibility test.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.