What This Rule Checks
The <marquee> element, which scrolls text across the screen, was deprecated in HTML5 and should not be used in modern web development. This element can create accessibility issues, especially for users who rely on screen readers, have cognitive disabilities, or struggle with moving text.
Who Is Affected
This issue primarily affects: Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices; Cognitive users, who benefit from clear structure, simple language, and consistent navigation patterns.
Why This Matters
Moving content that cannot be paused violates WCAG 2.2.2 (Pause, Stop, Hide). Users with cognitive disabilities or attention disorders cannot read moving text. Screen readers may not be able to capture the content at all.
How to Fix
To remove inaccessible scrolling content, eliminate all <marquee> elements from your code. Instead, consider alternatives like static text or CSS animations that adhere to modern accessibility standards.
Code Examples
<!-- Deprecated marquee element -->
<marquee>
Breaking News: New feature release!
</marquee>
Copy
<!-- Static announcement with optional CSS animation -->
<div role="alert" class="news-banner">
Breaking News: New feature release!
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
.news-banner {
animation: slideIn 0.5s ease-out;
}
}
</style>
Copy
Common Mistakes to Avoid
- Using <marquee> for any purpose — it is deprecated and should never be used.
- Recreating marquee behavior with CSS animations that cannot be paused.
- Creating auto-scrolling content without providing a pause mechanism.
Tip: Text accessibility includes contrast, spacing, and visual presentation. Users with low vision or cognitive disabilities depend on well-formatted, high-contrast text that can be resized and recolored with user stylesheets.
Related WCAG Criteria
- 2.2.2: Pause, Stop, Hide