Marquee
Critical - WCAG Level A
What the issue is:
The <marquee> element creates automatically scrolling or moving content. It is obsolete, non-standard, and provides no built-in mechanism to pause, stop, or hide the motion. That makes it an accessibility failure under WCAG 2.2.2 (Pause, Stop, Hide) because users cannot control movement that may distract, disorient, or trigger vestibular or seizure conditions.
Why it matters:
Moving content can cause motion sickness, dizziness, or seizures for people with vestibular disorders or photosensitive epilepsy. It also interferes with reading and focus for cognitive and low-vision users. Screen reader users may not be able to reliably perceive content that continuously moves offscreen. Keyboard-only users cannot typically pause/stop <marquee> content. Removing or replacing <marquee> helps ensure content is perceivable and controllable.
How to fix it:
Remove any <marquee> elements. If you must present horizontally scrolling content, replace the element with semantic markup (divs or list) and implement motion with CSS or JavaScript while providing an explicit, keyboard-focusable control to pause/stop/hide the motion. Implement these controls with native button elements, clear accessible labels (aria-pressed or changing text), and ensure the control works with keyboard input.
Respect the user’s reduced-motion preference by checking the prefers-reduced-motion media query and disabling animation for users who request reduced motion. If the moving content is primarily an announcement, consider using an ARIA live region (aria-live="polite" or "assertive") instead of continuous motion.
Best practices:
Avoid motion whenever possible; present content statically or allow users to opt into motion. Use CSS animations with animation-play-state toggled via JavaScript for pause/resume. For long lists, provide pagination or a carousel with clear controls and focus management. Ensure motion is not the sole way to convey information.
Common mistakes:
Replacing <marquee> with CSS animations but not providing a pause/stop control, relying only on :hover to pause (not keyboard accessible), hiding the content from assistive tech, or failing to honor prefers-reduced-motion.