Accessible Announcement Bars and Promo Banners on Shopify Stores

Announcement bars sit at the top of every page, so a banner that traps focus, hides text, or cannot be dismissed blocks the whole store. How to build promo banners everyone can use.

The announcement bar is the first thing on the page and, for a keyboard or screen reader shopper, often the first problem. Rotating messages that change while someone is reading, a close button with no label, text squeezed until it clips at zoom, and a bar that covers the menu on mobile are all common. Because the bar repeats on every page, one small flaw becomes a storewide barrier.

Agencies tend to treat the bar as a design strip, not an interactive component. That is the mistake. If it rotates, links, or dismisses, it is an interface, and it needs the same care as a menu or a cart drawer. The good news is that an accessible bar is mostly a matter of restraint: fewer messages, real text, and controls that behave predictably.

One message at a time, and let it sit still

Rotation is the biggest offender. A bar that swaps messages every four seconds gives a screen reader shopper a moving target and gives everyone else a message they cannot finish reading. If you must rotate, pause on hover and focus, add pause and next controls with real labels, and never let rotation restart while the shopper is interacting with the bar.

A simpler pattern usually converts just as well: one priority message per campaign, static, with a single link. Stores often find the second and third rotating messages were getting almost no clicks anyway. Cutting them removes the accessibility problem and the maintenance problem at the same time.

Text, contrast, and zoom

Bar text is small by design, which makes contrast and scaling critical. Pale text on a brand color background fails more often than any other element we test. Check the bar at 200 percent zoom and at a narrow mobile width: the message should wrap to two lines, not truncate, overlap the header, or push a sticky bar over the page content.

Never put essential terms only in the bar image or background. Sale conditions, end dates, and code details should be real text a screen reader can read and a shopper can select and copy. If the discount code cannot be copied, it is not really being offered to everyone.

Dismissal that actually works

If the bar can be closed, the close control needs a visible focus indicator, an accessible name like Dismiss announcement, and a target big enough to tap. Closing it should remember the choice across pages, so the shopper is not dismissing the same bar on every product page. Keyboard focus should never be forced into the bar on page load.

After dismissal, check what remains. A bar that hides visually but stays in the accessibility tree still gets announced on every page. Remove it from both, and make sure the sticky header spacing adjusts so content is not left with a gap or an overlap.

Add the bar to your release checklist

Test the bar whenever a campaign changes it, not just when the theme changes. Tab to it, close it with the keyboard alone, zoom in, and listen to it with a screen reader on one product page and at checkout. Record the result with your other accessibility checks so the next campaign starts from a working pattern, not from scratch.

Frequently asked questions

Does an announcement bar need to be reachable by keyboard?

Any interactive part of it does. Links and close buttons inside the bar must be focusable in a sensible order, with a visible focus indicator. Static text alone does not need focus, but it does need to be readable by screen readers and not change while someone is reading it.

How fast is too fast for a rotating banner?

Any rotation that changes before a person can comfortably read the message is too fast, and rotation without a pause control is a problem at any speed. If you rotate, give shoppers pause, previous, and next controls, and stop the movement while the bar has keyboard focus.

What contrast should announcement bar text meet?

The same standard as other text on the page: at least 4.5 to 1 for small text against its background. Brand colors that work for a large logo often fail at bar size, so test the actual rendered sizes rather than assuming the palette is compliant.

Should a dismissed banner stay dismissed?

Yes, for the session at least, and ideally until the campaign changes. Making shoppers close the same bar on every page is a barrier in practice, especially for keyboard users who must Tab past or through it repeatedly.