Skip to content
StoreA11y

WooCommerce · 2.2.2 Pause, Stop, Hide (Level A)

Scrolling marquee content is present on WooCommerce

Some elements use <marquee>. The text moves continuously with no way to pause it, so shoppers who read slowly, use magnification, or track text with difficulty cannot read it at all.

Which WCAG criterion this fails

  • Does not meet 2.2.2 Pause, Stop, Hide (Level A)

How to fix it on WooCommerce

Everything below is done from Appearance > Theme File Editor, or your child theme over SFTP. Take a copy of the theme before editing.

  1. Replace <marquee> with static text.
  2. If a moving announcement bar is a business requirement, implement it in CSS with a visible pause/play control and honour prefers-reduced-motion.
  3. Anything that moves automatically for more than five seconds needs a mechanism to pause, stop or hide it.

Where this usually lives

Custom HTML blocks, announcement plugins

Paths given for Storefront, Astra, Flatsome and other WooCommerce themes. A heavily customised theme may differ; the CSS selector in your scan report points at the exact element.

Code

@media (prefers-reduced-motion: reduce) {
  .announcement__track { animation: none; }
}

<div class="announcement">
  <div class="announcement__track">Free shipping over £50</div>
  <button type="button" class="announcement__pause" aria-label="Pause announcements">❚❚</button>
</div>

How to confirm it is fixed

Re-run the scan. This rule should drop out of the findings entirely. If the instance count falls but does not reach zero, the same defect exists in another template — product cards and quick-view modals are the usual second home for it.

Effort: low. Rule id: marquee (axe-core).