Skip to content
StoreA11y

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

Scrolling marquee content is present on Shopify

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 Shopify

Everything below is done from Online Store > Themes > Edit code. 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

sections/announcement-bar.liquid, custom Liquid blocks

Paths given for Dawn and its derivatives (Sense, Craft, Refresh, Studio). 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).