Announcement Banners

Last updated:

Practical patterns for site-wide notices that are clear, rare, and dismissible.

01 — Foundation

Banners communicate — they do not wallpaper

Site-wide messages should be rare, clear, and dismissible when they are not critical.

Announcement banners share outages, policy changes, promotions, or compliance updates. Stacked banners, vague copy, and non-dismissible marketing strips train users to ignore everything — including emergencies.

02 — Content

Clear, concise, actionable

One message per banner; link to detail instead of writing a novel inline.

  • state what happened and what users should do — “Scheduled maintenance Sat 02:00–04:00 GMT”
  • link to status page or help article for depth
  • distinguish info, warning, and critical — not every banner is red
  • limit simultaneous banners; collapse related messages

03 — Dismiss

Dismissal and persistence

Users who understood the message should not see it forever.

  • dismiss button with accessible name — “Dismiss maintenance notice”
  • persist dismissal in storage when appropriate; resurface only when content changes
  • critical safety or legal notices may be non-dismissible — use sparingly 
<section role="region" aria-label="Service notice">
    <p>Scheduled maintenance Saturday 02:00–04:00 GMT.</p>
    <a href="/status/">Status page</a>
    <button type="button">Dismiss</button>
</section>

04 — Accessibility

Accessible announcements

Banners are not a substitute for page titles or modal dialogs.

  • use role="region" with a label; avoid stealing focus on every page load
  • do not rely on colour alone; ensure contrast and readable type
  • keyboard-accessible links and dismiss controls

05 — Review

Before you approve

A short checklist for announcement banners in code review.

  • message is specific; action or link is obvious
  • dismiss works; banner count stays low
  • critical outages may also use Maintenance States for full-page treatment