<marquee> elements must not be used
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If it moves automatically and can’t be paused, it’s not accessible — remove it.
Why this matters and how to fix it
Why this matters
Scrolling or automatically moving text can be distracting, disorienting, or even harmful for users with attention, vestibular, or cognitive conditions. The `<marquee>` element provides no way to pause, stop, or control motion — making content inaccessible and unusable.
How to fix this issue
Remove `<marquee>` entirely. Present the information as static text, or use a controlled, user-managed component (e.g., carousel with play/pause controls). If the goal is to announce updates, use an ARIA live region instead of motion-based text.
Developer guidance
Ban `<marquee>` in linting and code review. If you need attention-grabbing messaging, use animation that stops on user request, respects reduced motion settings (`prefers-reduced-motion`), and remains readable when motion is disabled.
Code examples
Incorrect Implementation
<marquee>Breaking news</marquee>Correct Implementation
<div aria-live="polite">Breaking news</div>Real-World Examples
Before
<marquee behavior="scroll" direction="left">Flash Sale Today!</marquee>
<!-- No pause/stop → inaccessible motion and readability issues -->After
<section aria-labelledby="sale-heading">
<h2 id="sale-heading">Flash Sale Today</h2>
<p>Save up to 40% on selected items.</p>
</section>
<!-- Same information, accessible, readable, no forced motion -->CSS Example (Guidance)
/* If animated text is absolutely required, respect user settings */
@media (prefers-reduced-motion: no-preference) {
.scrolling-text {
animation: scroll-left 12s linear infinite;
}
}
@keyframes scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* Always provide a way to pause */Manual testing
- 1. Search the DOM for `<marquee>` elements.
- 2. If motion effects are present, check for a pause/stop button.
- • Expected: User can pause or stop motion.
- • Failure: Motion plays automatically with no control.
- 3. Enable reduced-motion setting on your system:
- • macOS: System Settings → Accessibility → Display → Reduce Motion
- • Windows: Settings → Accessibility → Visual effects → Animation effects off
- 4. Reload page.
- • Expected: Motion stops or significantly reduces.
- • Failure: Motion continues → inaccessible.
- 5. If the intent is simply to announce updates, replace `<marquee>` with `aria-live`.
Trusted by organizations across Europe working toward WCAG and EAA conformance