R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Avoid Using <marquee> Elements for Accessibility

Rule ID: marquee
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549


How to Fix the Problem

To ensure accessibility, completely remove all <marquee> elements from your HTML. This element is obsolete and not supported by modern accessibility tools or standards. It was originally used to create scrolling or moving text but has long been deprecated in HTML and should not be used for any purpose.

Instead of <marquee>, use CSS animations or JavaScript—but only if motion is necessary and accessible. When animating content:

  • Avoid automatic, continuous motion that cannot be paused or stopped.

  • Use CSS for visual enhancements but provide a mechanism to pause, stop, or control movement.

  • Always provide static alternatives to animated or moving text.

Example (Bad — What to Remove):

html
<marquee behavior="scroll" direction="left">
This text scrolls across the screen.
</marquee>

Example (Better Alternative using CSS — but only if necessary):

html
<div class="scrolling-text" aria-label="Important announcement">
This text moves, but you can pause it.
</div>
<style>
.scrolling-text {
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>

Note: If you must use motion, ensure it can be paused or disabled based on user preference (e.g., reduced motion media query).


Why it Matters

The <marquee> element creates automatic, scrolling motion which:

  • Distracts users with attention or cognitive impairments.

  • Impairs readability for users with low vision.

  • Reduces usability for users with limited dexterity, especially if the marquee contains links that are hard to click.

  • Is not supported by assistive technologies like screen readers, leading to content being missed altogether.

By removing this element, you improve clarity, reduce distractions, and ensure better interaction for all users.


Rule Description

The <marquee> HTML element is deprecated and should not be used. It creates content that moves across the page, violating modern accessibility standards and creating barriers for users with visual, motor, or cognitive disabilities.


The Algorithm (in Simple Terms)

The accessibility checker scans your HTML to identify any use of the <marquee> tag. If it finds one, it flags it as a violation because the tag is deprecated and inherently inaccessible.

Leave A Comment