When you hear the word “carousel,” the first thing that might come to mind is sitting in the saddle of an ornamental horse, riding in a circle and waving to onlookers as you pass by. If you had the experience of watching a carousel, you know that carousels provide a repetition of visual information until the ride comes to an end. Similar to the carnival version, website carousels are also a way to display a continuous rotation of visual information to its users.
Carousels, also known as sliders, are generally seen in one of two ways. Either they display the information by automatically rotating content, or are stationary, only being operated by the user. An example of a carousel that incorporates each type can be seen with this carousel with automatic and manual rotation.
While carousel components provide an appealing way to display several pieces of content in a neatly defined space, they prove to be problematic. According to a study done by Eric Runyon, Director of Web Communications at the University of Notre Dame, only 1.07% of users interacted with carousel content with 89.1% of engagement happening on the first slide.
Carousels are often developed in a way that limits their usability such as with the use of autorotation or limited navigation control. This can create frustration for users causing them to abandon content altogether, further lowering conversion rates.
Exploring carousels from an accessibility perspective displays further challenges for keyboard and screen reader users. Complex navigation patterns, loss of focus moving between elements, and slide changes not being announced by assistive technologies are only a few of the most common issues carousels present. The good news is carousels can be developed in ways that make them accessible for all users. Here are a few things to consider as outlined by the W3C- Web Accessibility Tutorials:
1. All actionable items must be keyboard accessible:
- This includes navigation items, links, buttons, images, and anything else operable with a mouse. These items must also have a visual focus indicator allowing users to understand which element is in focus.
2. Provide users control over carousel functions:
- Allow users the ability to control carousel movement by providing a pause/play button or pausing the carousel on mouse hover/keyboard focus when autorotation is used.
3. Changes in slide content are announced by assistive technologies:
- This provides users a clear understanding of where they are located within the carousel and how to navigate through content.
While carousels have been heavily debated from both a usability and accessibility standpoint, they are still commonly used and don’t seem to be making an exit from the web design world any time soon.
Carousels Are a Roundabout Decision
Whether or not you decide to incorporate a carousel component, improving the overall accessibility of this component undoubtedly improves usability for all. To learn more about designing and developing accessible carousels, please contact our accessibility experts today, or read more about creating an accessible design for all your users by downloading our guide, Digitally Accessible Experiences: Why It Matters and How to Create Them.
