Ensure <marquee> elements are not used
The <marquee>
element is deprecated and should not be used in modern web development due to accessibility concerns and lack of support in current web standards.
About This Rule
This guideline ensures that deprecated elements like <marquee>
are not used, promoting better accessibility and adherence to current web standards. Following this practice aligns with the following standards:
- WCAG 2.1 (A): 2.2.2 Pause, Stop, Hide
- WCAG 2.0 (A): 2.2.2 Pause, Stop, Hide
- WCAG 2.2 (A): 2.2.2 Pause, Stop, Hide
- Trusted Tester: 2.B
- EN 301 549
Why It Matters
The <marquee>
element creates scrolling text that can be distracting and difficult to read, especially for users with cognitive disabilities, attention deficits, or visual impairments. Additionally, it poses challenges for users with limited dexterity when interacting with moving content. :contentReference[oaicite:0]{index=0}
How to Fix
To enhance accessibility and adhere to modern web standards:
-
Remove
<marquee>
Elements: Eliminate all instances of the<marquee>
element from your HTML code. - Use CSS Animations for Scrolling Effects: If scrolling text is necessary, implement CSS animations to achieve the desired effect while maintaining control over accessibility.
- Provide Controls to Pause or Stop Movement: Ensure users have the ability to pause, stop, or hide moving content to prevent distractions and improve readability.
Examples
Incorrect
Using the deprecated <marquee>
element:
Correct
Implementing scrolling text with CSS animations:
<div class="marquee">Breaking News: Accessibility is important!</div>
<style>
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.marquee {
display: inline-block;
white-space: nowrap;
overflow: hidden;
animation: scroll 10s linear infinite;
}
</style>
More Information
- F16: Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content
- Wikipedia: Marquee Element
Other Rules
Interested in other web accessibility rules? Please see these other rules: