Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: ARIA attributes on individual slides #679

Open
1 task done
thany opened this issue May 30, 2023 · 0 comments
Open
1 task done

Feature request: ARIA attributes on individual slides #679

thany opened this issue May 30, 2023 · 0 comments

Comments

@thany
Copy link

thany commented May 30, 2023

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.

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

Your Environment

Tech Version
react-swipeable-views 0.14.0
React 18.2.0
Next.js 13.2.4
Vite 4.2.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant