Share: swiper.js accessibility considerations

My first task in my new role has involved reviewing and looking to improve the EXP starter theme. This has meant testing the components we have out-of-the-box to ensure they are accessible, performant and use solid and semantic code. I've been using keyboard and screen readers during this testing.

As much as loath reaching for carousels as a UI pattern, there is no getting away from the fact that they are a common pattern. The implementation in our starter uses the swiper.js library. This is a library I have come across in the past, and is actually quite nice to configure in terms of developer experience. However, when testing using Safari and VoiceOver, there were some issues.

I came across this excellent article from a series from Graceful Web Studio, detailing how they implemented accessibility into their swiper carousels. It's worth noting that they use Webflow, however, I found the advice and techniques transferrable to a codebase stack.

The article details how to improve swiper.js accessibility in two areas that were lacking during my testing:

  • Keyboard usage
  • Screen reader announcement

Further reading