Announcement bars, holiday hours and closure notices: accessible banners for small business websites

How to post holiday hours, weather closures, sale notices and announcement bars on a small business website so everyone gets the message: real text, no rotating tickers without a pause, named close buttons, sticky bars that don't cover focus, contrast and status messages.

Late in the year, many small business websites get a strip across the top: "Closed Thanksgiving Day", "Holiday hours: open until 2 PM on Dec 24", "Closed today due to snow", "Free shipping over $50" or "Now booking for January". These announcement bars, banners and closure notices are often the most important thing on the page that day, and they are also easy to get wrong for people using screen readers, keyboards, zoom or phones. This guide covers how to post them so everyone gets the message, whichever website builder you use.

1. Put the notice in real text near the top

Write the notice as normal text, not a picture. A "holiday hours" graphic made in a design app can't be read by screen readers, can't be translated, and goes blurry when zoomed (WCAG 1.4.5). Put it early in the page so it comes before the main menu or straight after it, and say the dates and times in full: "Closed Thursday, Nov 26. Open Friday, Nov 27, 9 AM to 3 PM." If the notice links somewhere, make the link text say where it goes, such as "See all holiday hours" rather than "Click here" (WCAG 2.4.4).

<aside class="notice" aria-label="Holiday hours">
  <p><strong>Holiday hours:</strong> Closed Thursday, Nov 26.
     Open Friday, Nov 27, 9 AM to 3 PM.
     <a href="/hours">See all holiday hours</a></p>
  <button type="button" aria-label="Close holiday hours notice">&times;</button>
</aside>

(The dates above are example data.) If you also posted the hours as an image on social media, the web page with the text version is the one to link to. See flyers and images of text.

2. Update the hours everywhere, as text

The banner is not enough on its own. Update the hours on your contact or location page too, and keep them as text or a simple table with headers (WCAG 1.3.1), so people who skip the banner, or land on that page from search, still see the change. See accessible tables for hours and menus and locations and store locator pages.

3. No scrolling or rotating messages without a pause

Bars that scroll text sideways like a ticker, or rotate between several messages every few seconds, are hard to read for many people and impossible for some. If anything moves, blinks or rotates for more than 5 seconds, visitors need a way to pause, stop or hide it (WCAG 2.2.2). The simplest fix is one static message. If you have three messages, show the most important one and link to the rest. See sliders and carousels and animation and motion.

4. Close buttons that work for everyone

Use a real button, reachable with Tab and working with Enter and Space (WCAG 2.1.1).
Give it a name that says what it closes, like "Close holiday hours notice", not just a bare "x" (WCAG 4.1.2).
Make the button easy to tap on a phone: at least 24 by 24 CSS pixels (WCAG 2.5.8).
When the bar closes, keep focus somewhere sensible, such as the start of the page, so keyboard users aren't dropped at the bottom (WCAG 2.4.3).
Don't let a closed banner pop back on every page.

5. Sticky bars: don't cover the page

A bar that stays stuck to the top or bottom of the screen can hide the very link or form field a keyboard user just moved to (WCAG 2.4.11). On a phone or at 400% zoom, a sticky bar plus a sticky header can take half the screen (WCAG 1.4.10). Let the bar scroll away with the page, or keep it to one short line and add matching scroll padding in your CSS so focused items aren't hidden behind it. See mobile accessibility, zoom and tap targets.

6. Contrast and colour

Brand-coloured bars often use white text on a light orange, red or green. Check that the text and link colours meet 4.5:1 contrast against the bar (WCAG 1.4.3), and don't rely on a red background alone to signal urgency: say "Closed today" in words (WCAG 1.4.1). See the colour contrast checker guide.

7. Notices that appear after the page loads

If your site adds a message after loading, such as a weather closure pulled from a settings page or a "Store closes in 30 minutes" note, screen readers may not notice it. A short message inserted later can be placed in an element with role="status" so it is announced politely (WCAG 4.1.3). Save role="alert" for truly urgent changes, since it interrupts whatever the visitor is doing. A notice that is in the page from the start doesn't need either. If the notice opens as a pop-up instead of a bar, see cookie banners, pop-ups and chat widgets.

8. Sales and countdowns in the bar

"Sale ends in 02:14:09" counters in a bar change every second, which can be noisy for screen readers and distracting for everyone. Show the end date and time in text, such as "Sale ends Monday, Nov 30 at midnight CT", and keep any countdown out of live regions. See holiday sale countdowns, pop-ups and time limits.

Common mistakes

Holiday hours posted only as an image or a social media graphic.
A ticker or rotating bar with no pause button.
A close "x" with no name, or one that only works with a mouse.
A sticky bar that hides the focused link or covers half the phone screen.
White text on a light brand colour.
The banner updated but the hours on the contact page left wrong.
Last year's closure notice still live in January.

A 5-minute check you can do today

Open your home page. Is any notice written in text you can select with your mouse?
Press Tab from the top of the page. Can you reach the notice's link and close button, and see where focus is?
Does anything in the bar move or rotate? If so, can you pause it?
Open the page on your phone and zoom in. Does the bar cover the content or the menu?
Check your contact page. Do the hours there match the banner?
Put a reminder in your calendar to remove the notice the day after the closure.

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag low contrast text in a bar, buttons with no accessible name, images with no alt text and links with unclear text. It can't tell whether a rotating bar can be paused, whether a sticky bar hides focused items, whether your hours are correct, or whether your site meets any law. Our Fix-Pack checks up to 10 pages and gives copy-paste fixes for your platform.

Setting up holiday notices for several client sites? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any website builder or banner app.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Running a Black Friday or holiday sale? See promo codes, sale prices and sale banners.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
$149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.