Overview
Websites sometimes feature slideshows or carousels that provide a gallery of self-updating images or teasers for news stories. These features present a variety of potential problems for users with disabilities, and in order to be accessible, must be designed with the following techniques.
Techniques
If developing a web widget that includes moving content such as a slideshow or carousel, or if shopping for a pre-built module, plugin, or JavaScript library to deliver the desired functionality, be sure the widget includes the following features:
- All controls must be operable with a keyboard, and must have clear visible focus. For additional information about these issues see Designing for Keyboard Accessibility and Providing Visible Focus for Keyboard Users.
- All content must be labeled and described so that screen reader users have full access to the content and can operate the controls for exploring the content. See also Making Images Accessible.
- Must include a prominent means by which all users can pause the display, such as a large pause button. People who are easily distracted can find it very difficult to concentrate on other page content if their attention is repeatedly drawn back to moving content. In keeping with the previous two techniques, the pause button must be accessible with keyboard alone, and must be labeled for screen reader users. It should be positioned at the start of the slideshow in the source code so keyboard users can access it easily without having to navigate through all the other content.
- Ideally, auto-advancing features should be off by default. By providing a prominent Play button, users who are interested in the feature’s content and want to explore it further can easily do so. This provides users with a choice to explore content, rather than forcing them to do so.
External WCAG Reference
Most Details from this page were gleaned from the University of Washington's Accessible Technology section.