Marquee elements must not be used

Marquee elements must not be used on any page

Do not use the HTML marquee element anywhere.

It produces moving text that is hard to read and operate, especially for users with cognitive, motor, or low-vision disabilities.

Because it is obsolete, browsers and assistive tech can treat it inconsistently.

Why It Matters

Moving text pulls attention away from the main task and is difficult to track, which harms users with ADHD and other cognitive disabilities.

Links embedded in moving text can be hard to target for people with limited fine motor control, making activation unreliable.

Low-vision users may not have enough time to perceive the content, and screen readers may not announce it predictably. This also conflicts with WCAG 2.2 expectations to pause/stop motion and respect reduced-motion preferences.

Common Causes

• Using marquee for a “news ticker” or promotional banner.
• Copying legacy snippets that rely on deprecated HTML.
• CMS/plugins that still output <marquee> by default.
• Trying to draw attention with movement instead of clear design.
• Not honoring prefers-reduced-motion for users who reduce animations.

How to Fix

1. Remove all <marquee> elements, including empty ones.
2. Replace with static content by default. If movement is not essential, keep it static.
3. If a ticker-like pattern is truly needed, implement an accessible alternative:
   • Provide a visible Pause/Play control. Default to paused or minimal motion.
   • Stop motion on hover and when any item inside receives keyboard focus.
   • Respect reduced motion: disable animation when prefers-reduced-motion is set.
   • Ensure links inside are operable while stationary; do not move focused items.
   • For auto-updating notices, use aria-live="polite" sparingly so updates don’t overwhelm.
4. Remove CSS/JS that targets marquee and clean up related styles.
5. Re-test across desktop and mobile with assistive technologies.

Recommendation: For most sites, use static text or a simple list with a clear heading. Only add controlled, stoppable motion when there’s a strong user need.

How to Test

• Code search: Find any instance of “<marquee” in templates, partials, and built HTML.
• Keyboard check: Tab through the area that replaced marquee. Focus should not move with animation; Pause/Play must work with Enter/Space.
• Screen reader check: With NVDA/JAWS/VoiceOver, navigate to the section. If aria-live is used, ensure updates are announced briefly and do not interrupt reading.
• Mobile/touch check: Controls are touch-friendly (at least 44×44 px) and motion can be paused. Content remains readable without horizontal scrolling.
• Reduced motion: Enable OS reduced motion. Confirm animations stop automatically.

Good Example

<section id="updates" role="region" aria-label="Latest updates">
  <div class="ticker">
    <button type="button" class="ticker-toggle" aria-pressed="false" aria-controls="ticker-track">Pause updates</button>
    <div id="ticker-track" class="track" tabindex="-1">
      <a href="#u1" class="item">New feature: Dark mode now available</a>
      <a href="#u2" class="item">Maintenance on Feb 12, 2–3 AM PT</a>
      <a href="#u3" class="item">Read our Q1 accessibility report</a>
    </div>
  </div>
</section>

<style>
.ticker { display:flex; align-items:center; gap:.75rem; }
.track { display:inline-flex; gap:2rem; white-space:nowrap; will-change:transform; animation: slide-left 20s linear infinite; }
/* Pause when interacting */
.ticker:focus-within .track, .ticker:hover .track { animation-play-state: paused; }
/* Respect user preference */
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }
@keyframes slide-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Optional paused state */
.paused .track { animation-play-state: paused; }
.item { padding: .25rem 0; }
.ticker-toggle { padding:.5rem .75rem; }
</style>

<script>
const btn = document.querySelector('.ticker-toggle');
const container = document.querySelector('.ticker');
btn.addEventListener('click', () => {
  const paused = container.classList.toggle('paused');
  btn.setAttribute('aria-pressed', paused.toString());
  btn.textContent = paused ? 'Play updates' : 'Pause updates';
});
</script>

• Default motion pauses on hover/focus; users can pause/play.
• Reduced-motion users see static content.
• Links can be focused and activated while content is stationary.

Bad Example

<marquee behavior="scroll" direction="left"> 
  Check our deals — <a href="#d1">50% off today</a> — <a href="#d2">View bundles</a>
</marquee>

Issues: Deprecated element, constant motion, no pause control, hard-to-activate links.

Quick Checklist

• No <marquee> elements remain in the codebase.
• Default content is static; any motion can be paused, stopped, or hidden.
• Motion stops on hover and when focus enters the moving area.
• Reduced-motion preference disables animations.
• Links inside the area are fully keyboard operable while stationary.
• Controls are labeled, reachable by keyboard, and announce state changes.
• Screen readers do not receive excessive or interruptive announcements.
• Ticker-like features used only when there is a clear user need.