Reviewed October 16, 2026

Making a Shopify announcement bar accessible without hiding the offer

Announcement bars rotate, shrink text, and vanish on zoom. How to keep the promotion and make the bar readable, pausable, and usable for every shopper.

Small bar, outsized problems

The announcement bar is the first thing on the page and often the least accessible: tiny text, rotating messages that change before they can be read, low contrast brand colors, and a bar that gets cut off when a shopper zooms in. It also tends to be announced awkwardly or repeatedly by screen readers when it rotates.

Because the bar carries your best offer, free shipping thresholds and sale deadlines, its inaccessibility is not a cosmetic issue. The shoppers who most need shipping cost clarity are the ones the rotating bar may never actually inform.

Rotation is the first thing to fix

If messages rotate, add a visible pause control and make each message stay long enough to read twice. Better still for many stores: show one strong message statically, or let shoppers step through messages with clear previous and next buttons they can operate by keyboard.

Auto rotating content that cannot be paused is a known accessibility failure and a general annoyance. Nobody has ever praised a store because the shipping message slid away mid sentence. A static bar with your single best offer usually converts as well and complains far less.

Text size, contrast, and zoom behavior

Set bar text at a size people can read without leaning in, treat it as normal text for contrast purposes, and test the bar at 200 percent zoom. A bar that overlaps the header or pushes the close button off screen at zoom fails the shoppers who zoom, who are exactly the shoppers the bar should serve.

If the bar has a dismiss button, make sure it is a real button with a clear label, reachable by keyboard, with a focus outline. An X that only responds to a precise mouse click is a decoration, not a control.

Screen reader and repetition sanity

A rotating bar should not re announce itself every few seconds. Keep the bar’s content available in a stable place, such as the shipping information on product and policy pages, so the offer never lives only in a moving strip at the top of the screen.

Finally, check the bar across templates. Some themes render different bars on home, collection, and campaign pages, and the accessible version often exists on one template while an older, rotating, low contrast version survives on another. Audit the set, not the sample.

Frequently asked questions

Is an auto rotating announcement bar an accessibility failure?

Rotating content that starts automatically, lasts more than a few seconds, and cannot be paused, stopped, or hidden is a classic failure under standard guidelines. Even where a store argues an exception, the practical answer is the same: give shoppers a pause control or make the message static.

How long should each announcement stay on screen?

Long enough to read the longest message twice at a relaxed pace, which for typical offers means at least ten seconds, and many stores do better with a static single message. If you would not have time to read it aloud comfortably, your shoppers do not have time to read it silently.

Does the announcement bar need to be keyboard accessible?

Only its interactive parts do: links, buttons, and any rotation controls must be reachable and operable by keyboard, with a visible focus indicator. Plain text in the bar needs no tab stop. The common failure is a close or carousel control that works by mouse alone.

Should the offer also appear somewhere besides the bar?

Yes. Key offers like free shipping thresholds belong on product pages, the cart, and the shipping policy page too. The bar is a reminder, not the sole record. Shoppers using screen readers, zoom, or an ad blocker that strips the bar should still encounter the offer where they make decisions.