Overview
Websites sometimes feature content that moves or changes automatically, such as video backgrounds, slideshows, or carousels. These features can be extremely distracting to some users, and a mechanism should be provided that enables users to easily pause the changing content.
Techniques
- Include a prominent pause button for any content that moves or changes automatically.
- Consider whether the moving content needs to be moving by default. Alternatively, the same content could be paused by default, and a prominent play button would enable users to play it if they chose to. This provides users with a choice to explore content, rather than forcing them to do so.
- Use the
prefers-reduced-motionCSS media query to detect whether a user has enabled a setting on their device to minimize the amount of non-essential motion. Most operating systems now provide this setting. Web developers need to be sure their sites honor it by disabling motion by default for anyone who has requested it.
In addition to providing a means of pausing moving content, web features such as slideshows or carousels can present a variety of other accessibility challenges and must be properly coded to ensure that keyboard users and assistive technology users have full access to the content and can operate the controls. For additional details on accessibility of these sorts of interactive interfaces, see our ARIA page.
WCAG 2.1 success criteria
The issues described on this page, and associated Techniques pages, map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:
- 2.2.2 Pause, Stop, Hide (Level A)