The <marquee> element must not be used.

The <marquee> element creates scrolling or moving text on a web page. It is a deprecated HTML element, meaning browsers may still render it but it is no longer part of the HTML specification and should not be used. Beyond being non-standard, it creates real barriers for people trying to read the content.

Scrolling text is difficult to read for users with cognitive disabilities such as attention deficit disorders, because the motion is distracting and the text moves away before they can finish reading it. Users with low vision who rely on screen magnifiers may only see a small portion of the viewport at a time, making it nearly impossible to track moving content. Some users with vestibular disorders can experience dizziness or nausea from on-screen motion. Screen readers may also fail to announce <marquee> content consistently, leaving some users unaware the text exists at all.

Related WCAG success criteria

This rule maps to WCAG 2.2.2 Pause, Stop, Hide (Level A). That criterion requires that any moving, blinking, or scrolling content that starts automatically and lasts more than five seconds must have a mechanism for the user to pause, stop, or hide it. The <marquee> element scrolls indefinitely by default and provides no built-in controls, so it fails this criterion in almost every case.

How to fix it

The simplest and most reliable fix is to replace the <marquee> element with static text. In most cases, the scrolling effect adds no meaningful information and removing it improves readability for everyone.

If you genuinely need content to move or rotate (for example, a news ticker), use CSS animations or JavaScript instead, and:

1. Provide a visible button that lets users pause or stop the animation.
2. Ensure the animation stops automatically within five seconds if no pause control is provided.
3. Make sure the pause/stop control is keyboard accessible.

Examples

Incorrect: using the <marquee> element

<marquee>Breaking news: site maintenance scheduled for Saturday.</marquee>

The text scrolls continuously with no way for users to stop it.

Correct: static text

<p>Breaking news: site maintenance scheduled for Saturday.</p>

The content is readable at the user's own pace.

Correct: animated text with a pause control

If scrolling text is a design requirement, use CSS and provide a pause button:

<div class="ticker" role="marquee" aria-live="off">
  <p class="ticker-text">Breaking news: site maintenance scheduled for Saturday.</p>
</div>
<button type="button" class="ticker-pause" aria-pressed="false">
  Pause ticker
</button>

<style>
  .ticker {
    overflow: hidden;
    white-space: nowrap;
  }
  .ticker-text {
    display: inline-block;
    animation: scroll-left 10s linear infinite;
  }
  .ticker-text.paused {
    animation-play-state: paused;
  }
  @keyframes scroll-left {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>

<script>
  const button = document.querySelector(".ticker-pause");
  const text = document.querySelector(".ticker-text");
  button.addEventListener("click", function () {
    const isPaused = text.classList.toggle("paused");
    button.setAttribute("aria-pressed", isPaused);
    button.textContent = isPaused ? "Play ticker" : "Pause ticker";
  });
</script>

This approach gives users control over the animation, satisfying WCAG 2.2.2. The role="marquee" attribute tells assistive technology that the region contains changing content, and aria-live="off" prevents screen readers from announcing every update automatically, which would be disruptive. Users can pause the animation with a keyboard-accessible button.

Learn more:

W3C Reference

Understanding Success Criterion 2.2.2: Pause, Stop, Hide

→

MDN Reference

MDN: marquee element

→