Accessibility Design Guidelines:

Sometimes referred to as carousel, slider, or slideshow, these widgets usually appear at the top of webpages as a way to display multiple rotating (horizontally) images.

Carousels are a typical website feature that can be distracting to even the able-bodied person. However, they are especially challenging to people who rely on using a keyboard or assistive technology for navigating and accessing content.

Users with vision-impairments may have difficulty interpreting the information if legibility is poor. People with cognitive impairments may find fast-scrolling images distracting and frustrating.

In order to make the user experience easier for these individuals, designers and developers can adopt best practices to ensure even content hidden within carousels is accessible.

Best Practices

Carousels can pose as a usability barrier to people with disabilities because the content is hidden. There are a number of techniques one can utilize to make a carousel accessible.

• Use semantic structure to build your carousel to include five or less items. For example, use appropriate headings <H3>.
• Check mark icon Unsure all functionality allows the user to contol the carousel with a keyboard.
• Check mark icon Avoid automatic rotating of items and fast transitions which can be difficult to read and a distraction for some users.
• Check mark icon Be sure to incude descriptive <p>text so users can gain a better understanding about the images.
• Check mark icon Be sure to alternative text <img src="redRose.jpg" alt="Red Rose"> for your images.
• Check mark icon The carousel should be styled in a way that promotes legibility.
• Check mark icon Use a 'dot' or number navigation to indicate how many items or slides in the carousel.
• Check mark icon The user should have control of the carousel such as implementing forward and back arrows.