[x] I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior
Adding the role should be easy enough. The label could be achieved by expecting a function that returns a proper label, so:
<SwipeableView slideAriaLabel={index => `Slide ${index} of ${totalSlides}`}>
Or something like that.
Current Behavior
An example of how a slide currently appears in the DOM:
<div aria-hidden="false">
Which is good 💪🏻, but could be better. With these additions, it could become, for example:
<div role="group" aria-hidden="false" aria-label="slide 2 of 5">
Isn't that much better? 🙏🏻
Context
We're building a new website taking a11y into account whereever we can. As sparingly as we use carousels, where we do need them, we want them as accessible as possible. They're difficult enough as they are for folks who need assistive tech.
Please add the following attributes to each individual slide:
role="group"aria-label="slide X of X"Source: https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp See Key elements of an accessible carousel, point 5.
Expected Behavior
Adding the role should be easy enough. The label could be achieved by expecting a function that returns a proper label, so:
Or something like that.
Current Behavior
An example of how a slide currently appears in the DOM:
Which is good 💪🏻, but could be better. With these additions, it could become, for example:
Isn't that much better? 🙏🏻
Context
We're building a new website taking a11y into account whereever we can. As sparingly as we use carousels, where we do need them, we want them as accessible as possible. They're difficult enough as they are for folks who need assistive tech.
Your Environment