Carousels are those slide shows of content that can be seen across the web. You must have encountered some in the form of areas that can have informational content or promotional content or even ads. Even though they are vastly adopted, they aren't a very elegant thing on your website as they lead to accessibility issues and ultimately a bad user experience.
Take voiceover users for example; when the slide changes the content of the slide may be announced all of a sudden and the user surely will lose the track of elements they were interacting with (where the cursor is original).
And what if there's no proper implementation of auto-rotation of the slides.
Don't even forget about the navigation with tab and arrows. The user navigates the whole page with tab key, and then the slides are navigated with arrow keys all of a sudden?
These and many other cases surrounding the carousel, in turn, would lead to a chaotic user experience and a confused user.
A good carousel is no carousel.
Though the carousel consolidates the content in a specific region, a thorough discussion with designers, UX-engineers, and developers an alternative to carousels can be found for the teams that originally intend on implementing the carousel.
And even after all my arguments and various discussions if you just can't resist the temptation then here are some example implementations to consider:
- https://w3c.github.io/aria-practices/examples/carousel/carousel-1-prev-next.html
- https://w3c.github.io/aria-practices/examples/carousel/carousel-2-tablist.html
Remember to refer to the WCAG guidelines when working on carousels. Here are some other enlightening links that you may find helpful:
- https://www.mandr-group.com/internet-rethinking-carousel-trend/
- https://www.w3.org/WAI/tutorials/carousels/
- https://accessible360.github.io/accessible-slick/
Even though kittens love attention, carousels are not the best way to do that. 🙋♂️ 🥂
Top comments (0)