For people who need extra focus or struggle with motion sensitivity, this can be a real problem.
Pause, Stop, Hide ensures that users have control over moving or auto-updating content, allowing them to stop distractions and focus on the task at hand.
Who this impacts
- People with cognitive impairments: Constantly moving or blinking content can be distracting and make it difficult to concentrate on the main content of a page.
- People using assistive technology: Users who rely on screen readers need static content that doesn’t interfere with their navigation.
- People with motion sensitivities: For some users, animated or blinking content can cause physical discomfort, such as headaches or nausea.
- Everyone: Having the ability to pause or stop moving content allows everyone to focus more easily on what they’re trying to read or do.
How to meet pause, stop, hide
- Offer clear control over moving content: Ensure that users can pause, stop, or hide any content that moves or updates automatically.
- Make controls easy to access: Clearly label buttons or options to stop, pause, or hide moving elements, so users don’t struggle to regain control.
- Test all auto-updating elements: Check that any auto-updating elements, like carousels or live updates, offer clear controls for pausing or hiding them.
Practical example
The Meowcation website uses a carousel to display featured holiday packages. The carousel includes a visible “Pause” button, allowing users to stop the slideshow if it becomes too distracting, or to actually read the content before it swaps again.
Exceptions
Content that is essential for functionality, such as live sports scores or stock tickers, may not need to be paused or stopped if doing so would compromise the core function of the page.
Top tips
- Keep controls obvious: Make sure users can easily locate pause or stop buttons to control moving content.
- Limit unnecessary motion: Don’t auto-play content unless it’s critical to the user’s experience.
- Test for distractions: Test your site in various scenarios to ensure that any moving elements don’t interfere with user focus.