On each web page, can each moving or blinking content be controlled by the user?
A carousel that loops continuously, a banner that blinks, endless scrolling text: for someone with attention disorders or cognitive disabilities, this content makes the page unreadable. For some people with epilepsy, prolonged flashing can trigger a seizure. Movement you cannot stop is content you cannot read.
The rule is straightforward: any automatically triggered moving or flashing content must either last less than 5 seconds or be controllable via an explicit mechanism. This mechanism can be a button to pause and resume, a button to hide and redisplay, or a button to display all content without animation.
Watch out for the most common pitfall: suspending movement only during focus (via animation-play-state: paused on :focus, for example) does not satisfy the criterion. As soon as the user leaves the element, movement resumes. Control must persist until the user explicitly decides to resume.
The control button itself must be accessible: reachable via keyboard, with clear labeling and sufficient contrast. A "Pause" button that is visually present but unreachable via Tab does not meet the criterion.
2 tests to confirm that moving content can be paused
Mechanism to control automatically moving content
- Identify all moving content triggered automatically on load or display: animated images (GIF, animated SVG), CSS effects (
animation, loopingtransition), scripts (auto-play carousels, scrolling banners, decorative loaders). - For each piece of content identified, verify that at least one of these conditions is met:
- The total duration of the movement is less than 5 seconds;
- An accessible mechanism allows you to stop and resume the movement;
- An accessible mechanism allows you to hide and then redisplay the content;
- An accessible mechanism allows you to display all content without movement.
- Verify that the mechanism is reachable via keyboard, has clear labeling, and that pausing via focus alone is NOT the only means of control. The test is validated if each moving content meets at least one condition.
Mechanism to control automatically blinking content
- Identify all flashing content triggered automatically: images whose visibility alternates (multi-frame GIF), text or icons whose visibility is toggled via CSS (
visibility,opacity) or JavaScript in a loop. - For each piece of content identified, verify that at least one of these conditions is met:
- The total duration of the flashing is less than 5 seconds;
- An accessible mechanism allows you to stop and resume the flashing;
- An accessible mechanism allows you to hide and then redisplay the content;
- An accessible mechanism allows you to display all content without flashing.
- Verify that pausing via focus alone is NOT the only available mechanism. Exception: progress bars cannot be stopped by nature — the criterion is not applicable for these elements. The test is validated if each flashing content meets at least one condition.
Examples
❌ Non-compliant : Scrolling banner looping without control
<div class="ticker">
<p style="animation: scroll 10s linear infinite;">
Latest news — Conference on April 15 — Registration open —
</p>
</div>The text scrolls in an infinite loop with no stop button. A user with attention disorders cannot read the rest of the page while this content moves in their visual field. The infinite property immediately signals in an audit that the duration exceeds 5 seconds and a control mechanism is required.
✅ Compliant : Scrolling banner with accessible Pause button
<div class="ticker-wrapper">
<button
id="ticker-btn"
aria-label="Pause the news banner"
onclick="toggleTicker()">
Pause
</button>
<div class="ticker" id="ticker-content">
<p>Latest news — Conference on April 15 — Registration open —</p>
</div>
</div>
<script>
let paused = false;
function toggleTicker() {
const el = document.getElementById('ticker-content');
const btn = document.getElementById('ticker-btn');
paused = !paused;
el.style.animationPlayState = paused ? 'paused' : 'running';
btn.setAttribute(
'aria-label',
paused
? 'Resume the news banner'
: 'Pause the news banner'
);
btn.textContent = paused ? 'Play' : 'Pause';
}
</script>The button is placed before the animated content in DOM order: it is the first element reached via keyboard. The aria-label updates based on state, informing screen reader users of the action result. The animation remains stopped after activation and only resumes on explicit user action — not just during focus.
❌ Non-compliant : Flashing GIF looping infinitely
<img src="promo-flash.gif" alt="Flash Sale -50%">A GIF whose frames alternate between two contrasting states creates a flashing effect. If it loops indefinitely and lasts more than 5 seconds, no control mechanism is present. The user cannot stop it. Depending on frequency, this content may also pose a problem under criterion 13.7 on dangerous flash effects.
✅ Compliant : Short CSS animation — exempt by duration
<div role="status" class="notification">
<p class="fade-in">Your message has been sent.</p>
</div>
<style>
.fade-in {
animation: fadeIn 0.4s ease-in forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>The animation lasts 0.4 seconds: well below the 5-second threshold. No control mechanism is required. The forwards value ensures the animation does not loop — the element remains visible in its final state.
Tips and pitfalls
⚠️ Pause on :focus is not a valid mechanism
This is the most common audit error. Some developers apply animation-play-state: paused on :focus and consider the criterion satisfied. It is not: as soon as focus leaves the element, movement resumes. RGAA requires a persistent mechanism deliberately activated by the user, not a suspension conditional on focus presence.
⚠️ Progress bars are not applicable
A loading bar cannot be stopped by nature: stopping the animation would mean stopping the process it represents. Criterion 13.8 is not applicable for these elements. Conversely, a decorative carousel styled as a progress bar remains subject to the criterion.
💡 The control button must itself pass audit
A Pause button unreachable via keyboard, without sufficient contrast, or with empty labeling solves nothing. Verify that the control meets criteria related to colors and keyboard navigation. Best practice: place the button immediately before the animated content in DOM order.
⚠️ prefers-reduced-motion does not replace the RGAA mechanism
Respecting the system preference prefers-reduced-motion is excellent practice, but that is not what criterion 13.8 evaluates. The check concerns the page itself, independent of system settings. A site can satisfy prefers-reduced-motion and fail criterion 13.8 if no explicit button is present for users whose system does not report this preference.
⚠️ Animations triggered on scroll are also subject to the criterion
A CSS class added dynamically via an IntersectionObserver (AOS, ScrollReveal libraries, etc.) triggers an animation when the element comes into view. This is indeed automatic triggering "when content is displayed" under the criterion. If these animations last more than 5 seconds without a control mechanism, test 13.8.1 fails.
Frequently asked questions
When is a carousel triggered on click subject to RGAA criterion 13.8?
No. Criterion 13.8 targets automatically triggered content — on load or when content is displayed. A carousel that only advances when the user clicks "Next" is not covered. Conversely, if the carousel starts automatically when the page opens, it is subject to the criterion as soon as its duration exceeds 5 seconds.
How do you concretely audit RGAA criterion 13.8 for moving content?
Load the page and immediately observe what moves or flashes without your action. Chrome DevTools Animations tab lists active animations. For each identified element: measure the duration (if < 5 s, not applicable), then look for a control button. Verify it is reachable via Tab, has clear labeling, and the animation remains stopped after activation.
What RGAA rule applies to an animated GIF that loops three times then stops?
Yes, if the total duration is less than 5 seconds. Calculation: number of frames × duration per frame × number of repetitions. A GIF with 2 frames at 0.5 s per frame repeated 3 times lasts 3 seconds: compliant without a control mechanism. Beyond 5 seconds, an explicit mechanism becomes required.
What is the difference between criterion 13.7 and criterion 13.8?
Criterion 13.7 concerns dangerous flash effects for people with epilepsy (frequency > 3 Hz over area > 21,824 px). Criterion 13.8 concerns user control over any movement or flashing, regardless of frequency. Both can apply simultaneously: a slowly flashing banner (1 Hz) is outside criterion 13.7 but remains subject to criterion 13.8.
In what cases does a link to a version without animations satisfy RGAA criterion 13.8?
Yes, provided the alternative page is truly equivalent in content and accessible. But it is rarely the most robust solution: it multiplies URLs to maintain and fragments the experience. A button directly on the page is more direct, less costly to maintain, and does not shift the problem to another URL.