Features

Ensure <marquee> elements are not used

Rule ID: marquee User Impact: serious Guidelines: WCAG 2.0

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.
    Copy code
    <!-- Remove this -->
    <marquee>Scrolling text</marquee>
  • Use CSS Animations for Scrolling Effects: If scrolling text is necessary, implement CSS animations to achieve the desired effect while maintaining control over accessibility.
    Copy code
    <div class="marquee">Scrolling text</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>
  • 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:

Copy code
<marquee>Breaking News: Accessibility is important!</marquee>

Correct

Implementing scrolling text with CSS animations:

Copy code
<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

Other Rules

Interested in other web accessibility rules? Please see these other rules: