Accessible Slider Attempt

Sliders/carousels are pretty much the banes of user experience design. Though they can be nice to look at, they aren’t the most user-friendly component and have a reputation for not being accessible.

I took a stab at creating one with some accessibility considerations in mind, though I’m certain there still could be improvements added.

Codepen Demo

See the Pen Carousel Slideshow with CSS Scrollsnap by Ryan Trimble (@mrtrimble) on CodePen.

Considerations

Here are a few things I figured would help make this component more accessible.

Skip Link

I have added a link to skip the slider entirely. I figured this might be beneficial to folks traversing the page via keyboard by providing a way to forego tabbing through each slide individually.

Navigation

The star of this component is CSS scroll snapping. Scroll snapping provides a few benefits out-of-box:

• Able to scroll using the element’s scrollbar
• Works with mouse scroll wheels
• Keyboard arrow keys also scroll through the slides
• Also automatically works with touch-enabled devices

I did also add in “previous” and “next” buttons to scroll through the slides by clicking. I did this by calculating the full width of all the slides divided by the number of slides and using that to either scroll forward or backward depending on which button is clicked.

No Autoplay

Instead of having the slider automatically switch between the slides, I have opted to make it more of a self-driven experience so users can browse that their own pace.

Also, this element does not loop. I feel like having a clear-cut start and endpoints help prevent keyboard traps.

Other Features

Aside from attempting to make it as accessible as possible, I also added the ability to easily alter the slides.

Using CSS Custom Properties:

• You can set the number of slides to be shown at a time
• Easily adjust the height

Enhancements

I do feel there is still room for improvement on this component. One idea I had was using aria-current to specify which slide is the current slide.

I posted about this on Mastodon asking if any other considerations that might help improve this component.

Bob Monsour replied suggesting to hide the previous and next buttons when the scroll position is at the start or end of the slides. I haven’t quite figured out how to implement that yet, but it is a solid suggestion!

If anyone has any other suggestions or enhancements (or if there are things I have just flat-out ignored), please reach out to me and let me know! I’m available on Twitter, Mastodon, and through the contact form on my site.