The alert bar and when to use it

Most public websites have a banner that can appear at the top of every page: an alert bar. It is the loudest thing on the site. If it is used for everything, residents learn to scroll past it, and they will scroll past the one alert that matters.

What the alert bar is for

Use it when all three are true:

1. Urgent: residents need to know today, or before they make a trip.
2. Time-limited: it has an end, measured in hours or days.
3. Affects many people: most visitors to the site, not one program's participants.

Good uses:

• Town Hall or the library is closed today.
• A snow emergency is in effect, with parking rules.
• A boil water notice is in effect for part of town.
• Online payments are down until a stated time.
• An emergency is under way, with a link to the emergency page.

Not alert bar material: events, celebrations, job openings, new programs, survey requests, a reminder that taxes are due next month. Those go in news, events or the relevant page.

One alert at a time

If two things are urgent at once, combine them into one line and link to a page that covers both, or show the more urgent one. A stack of three banners pushes the page off a phone screen.

Write it in one or two lines

The bar holds a short sentence and a link:

Town Hall is closed Monday, January 12, because of a water main break. Online services are working. Read the closure update (a link to the full notice)

Put what and when first. Make the link text say where it goes. Do not write "Click here" or "More info."

Set the end when you post it

Decide when the alert comes down before you publish it. If your editor supports an expiration time, set it. If not, put a reminder on your calendar for the end time, and name a backup who can remove it if you are out.

When the situation changes before the end time, update the alert. When it ends, remove the alert, and update the linked page to say the situation is over.

Accessibility of the bar itself

The alert bar is web content, so Title II's WCAG 2.1 Level AA standard applies to it:

• Contrast: text must have enough contrast against the bar's background color (Success Criterion 1.4.3). Red and yellow bars often fail.
• Not color alone: the word "Closed" or "Emergency" should say what kind of alert it is, not only the color (1.4.1).
• No scrolling text without a pause: moving content that lasts more than five seconds needs a way to pause, stop or hide it (2.2.2). A static bar is simpler.
• A close button, if your bar has one, must work with a keyboard and have a label a screen reader announces.

Test these once, when the bar is set up, and again after any design change.

Who may post

Decide in advance who can post an alert, who approves, and who posts when the usual person is out. Write the names down. During an emergency, nobody should be looking for a login. Emergency Notices on Your Website covers the full plan.