UX Patterns Guide
UI + UX Feedback, Status, And System State standard

Site alert

Publish one full-width site alert near the top of every affected page, state the urgent condition and public consequence, include the most useful route to details or alternatives, announce dynamic updates with the right ARIA role, and retire or version the alert when the condition changes.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • Urgent public, safety, operating-status, outage, closure, or availability information applies to the whole site or service.
  • Users may enter from any route and need the message before using the site.
  • One top-of-site message can communicate the condition and route users to details or alternatives.
  • The organization can maintain start, update, dismissal, and expiry rules.

Avoid when

  • The message applies only to one product workspace, account, section, page flow, field, row, or task.
  • The message is form validation, task completion, or a previous-page outcome.
  • The update is routine marketing, feature rollout, newsletter, or low-consequence content.
  • Multiple unrelated alerts would need to compete at the top of the site.
  • No owner can keep the alert current or remove it when the condition ends.

Problem it prevents

Users may enter a site from any page during an urgent public or servicewide condition, and ordinary banners, page alerts, toasts, or home-page announcements can miss deep-linked users or hide the urgency inside local context.

Pattern anatomy

What a strong implementation has to make clear

User need

The message applies to the whole public site, service, agency property, or critical operating channel rather than one workspace, record, form, or route.

Pattern promise

Publish one full-width site alert near the top of every affected page, state the urgent condition and public consequence, include the most useful route to details or alternatives, announce dynamic updates with the right ARIA role, and retire or version the alert when the condition changes.

Required state

No-site-alert state when no urgent sitewide condition applies.

Recovery path

Deep-linked users miss critical sitewide information because the alert exists only on the home page.

Access contract

Give the site alert a descriptive aria-label or labelledby value so it appears clearly in landmark navigation.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A public benefits site shows Emergency office closures at the very top of every page, with affected offices, updated time, and a link to alternate service channels.
  • A sitewide service outage notice appears full-width above the site header and includes a short related-links list for status, phone service, and appointment rescheduling.
  • A user enters through a bookmarked application-status page and still sees the same closure alert before using the service.
  • When a new evacuation update is pushed mid-session, the site alert announces the update and records the new timestamp.
Weak implementation

Vague, hidden, hard to recover from

  • The emergency message appears only on the home page, so users who land on Apply or Help do not see it.
  • Three large red alerts stack above the header, mixing closure, newsletter, and one form error.
  • Users dismiss a critical emergency alert once and never see a later update because dismissal is not versioned.
  • A workspace-only maintenance message is published as a public site alert and alarms users who are not affected.
UI guidance
  • Render the site alert as a full-width message near the top of the site, before ordinary navigation or page content users might otherwise start from.
  • Use one clear heading, concise body text, restrained severity styling, and a short list of related links or updates when several urgent sitewide facts need to be grouped.
UX guidance
  • Use a site alert when urgent public or servicewide information must be obvious and findable from any page, including deep links, refreshes, and routes outside the home page.
  • Define alert ownership, audience, start and end conditions, update cadence, dismissal policy, and escalation path before publishing it across the whole site.
Implementation contract

What the implementation must handle

States

  • No-site-alert state when no urgent sitewide condition applies.
  • Emergency site alert visible at the top of every affected page.
  • Informational site alert for non-emergency servicewide operating status.
  • Slim site alert for a short urgent message with a single detail link.

Interaction

  • The site alert appears before ordinary page content and is reachable from any affected route, not just the home page.
  • The alert heading names the sitewide condition rather than a generic severity label.
  • The body states who is affected, what users should do now, when it was updated, and where to get details.
  • Related links are grouped inside the same alert when multiple urgent facts share one sitewide condition.

Accessibility

  • Give the site alert a descriptive aria-label or labelledby value so it appears clearly in landmark navigation.
  • Use role alert only for urgent dynamic changes that demand immediate attention, because assertive announcements interrupt workflow.
  • Use role status or a labelled region for advisory sitewide messages that appear on page load or update less urgently.
  • Fully remove inactive alerts instead of visually hiding them for later reuse.

Review

  • Does this message truly apply across every affected page, including deep links?
  • Is the condition urgent enough to sit above ordinary site navigation and page content?
  • Should this be a site alert, a product banner, a before-H1 notification banner, a current-task alert, or an error summary?
  • What single highest-priority site alert should users see right now?
Interactive lab

Inspect the states before you copy the pattern

Publish an urgent sitewide notice

Switch site alert severity, move between site pages, reveal related updates, push a dynamic update, dismiss only a safe notice, and verify the alert remains sitewide rather than page-local.

Site alert
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

No-site-alert state when no urgent sitewide condition applies.

Keyboard / Access

Tab reaches site-alert links, details, and safe dismiss controls before ordinary page controls.

Avoid Generating

Showing a sitewide emergency only on the home page.
Evidence trail

Source-backed claims behind this guidance

U.S. Web Design System Site Alert Component

U.S. Web Design System - checked

USWDS defines site alerts for urgent sitewide information, critical system notifications, every-page display, full-width top placement, stacking avoidance, color restraint, labelled regions, and dynamic ARIA roles.

NCI Design System Site Alert

National Cancer Institute Design System - checked

NCI documents site-alert standard, slim, emergency, info, close, and expand variants plus top-of-page placement and combining related messages.

U.S. Web Design System Alert Component

U.S. Web Design System - checked

USWDS alert guidance supports separating page-level task alerts and validation messages from sitewide alert announcements.

Full agent/debug reference

Problem Context

  • The message applies to the whole public site, service, agency property, or critical operating channel rather than one workspace, record, form, or route.
  • Users can arrive through search, bookmarks, shared links, notifications, or deep links and still need the warning before using the site.
  • The condition is urgent, time-sensitive, public, or operationally critical enough to appear above ordinary navigation and page content.
  • The message may need updates, timestamps, or grouped related links while the same sitewide condition remains active.

Selection Rules

  • Choose site alert when urgent sitewide information must appear by default on every affected page near the top of the site.
  • Use emergency treatment for public safety, closures, evacuation, payment suspension, system outage, or other high-consequence service availability messages.
  • Use informational site-alert treatment for important sitewide operating status that is not an emergency but still must be seen across the site.
  • Use banner instead when the message is broad but limited to a product, account, workspace, section, or official identity scope.
  • Use notification banner instead when the message belongs immediately before the H1 in one service page flow.
  • Use alert instead when a current task dynamically changes and users need immediate notice inside that task.
  • Use error summary and field messages instead for submitted form validation errors.
  • Show one site alert per affected site scope; combine related urgent facts into a short list rather than stacking multiple site alerts.
  • Let users dismiss only noncritical site alerts or alerts that remain recoverable from a stable status page, and store dismissal by alert id, version, audience, and site scope.

Required States

  • No-site-alert state when no urgent sitewide condition applies.
  • Emergency site alert visible at the top of every affected page.
  • Informational site alert for non-emergency servicewide operating status.
  • Slim site alert for a short urgent message with a single detail link.
  • Expanded or list state for several related urgent updates inside one alert.
  • Dynamic update state with changed timestamp and appropriate alert or status semantics.
  • Dismissed state for safe informational alerts, versioned so new urgent updates reappear.
  • Resolved state where the alert is removed or replaced by a low-impact status page reference.

Interaction Contract

  • The site alert appears before ordinary page content and is reachable from any affected route, not just the home page.
  • The alert heading names the sitewide condition rather than a generic severity label.
  • The body states who is affected, what users should do now, when it was updated, and where to get details.
  • Related links are grouped inside the same alert when multiple urgent facts share one sitewide condition.
  • The alert does not stack with unrelated marketing, validation, or page-flow messages.
  • Dynamic emergency updates use alert semantics sparingly; advisory updates use status or labelled region semantics.
  • Dismissal never hides unresolved critical conditions permanently and never suppresses newer alert versions.

Implementation Checklist

  • Define the alert's site scope, audience, severity, owner, start time, update cadence, expiry condition, and fallback channel.
  • Place the alert in the site shell above page-specific content and test deep-linked pages, not only the home page.
  • Write a short heading that names the urgent condition, such as Emergency office closures or Online applications unavailable.
  • Include updated time, affected areas, immediate next step, and one stable link to more detail or alternate contact.
  • Combine related sitewide facts into one list or expandable detail region instead of stacking separate alerts.
  • Choose role alert only for important dynamic changes that need immediate attention; use status or labelled region for advisory updates.
  • Version dismissal state by alert id, update version, audience, and site scope, and disable dismissal for unresolved critical conditions.
  • Test mobile wrapping, zoom, keyboard reachability, screen-reader landmark labels, skip-link order, route transitions, cache invalidation, and resolution removal.

Common Generated-UI Mistakes

  • Showing a sitewide emergency only on the home page.
  • Using a site alert for form validation, task success, local workflow feedback, or one account issue.
  • Stacking multiple unrelated site alerts at the top of every page.
  • Using bright emergency styling for routine announcements, newsletters, or low-impact notices.
  • Letting users permanently dismiss a critical unresolved alert.
  • Leaving a stale emergency alert after the condition has ended.
  • Changing site-alert content mid-session without a programmatic status or alert announcement when the update is important.

Critique Questions

  • Does this message truly apply across every affected page, including deep links?
  • Is the condition urgent enough to sit above ordinary site navigation and page content?
  • Should this be a site alert, a product banner, a before-H1 notification banner, a current-task alert, or an error summary?
  • What single highest-priority site alert should users see right now?
  • Who owns the update timestamp, expiry, alternate contact route, and resolution notice?
  • Can users dismiss it safely, and what update version should make it reappear?
Accessibility
  • Give the site alert a descriptive aria-label or labelledby value so it appears clearly in landmark navigation.
  • Use role alert only for urgent dynamic changes that demand immediate attention, because assertive announcements interrupt workflow.
  • Use role status or a labelled region for advisory sitewide messages that appear on page load or update less urgently.
  • Fully remove inactive alerts instead of visually hiding them for later reuse.
  • Do not rely on red, orange, icons, or top placement alone; include visible text that names the urgent condition and next step.
  • Keep alert links and dismiss controls keyboard reachable in reading order before page-specific content.
  • Avoid stacked assertive alerts and test high zoom so the alert does not obscure navigation or page headings.
Keyboard Behavior
  • Tab reaches site-alert links, details, and safe dismiss controls before ordinary page controls.
  • Enter or Space opens an expandable related-update list without moving the alert away from the top of the site.
  • Dismissal, when safe, removes the alert and moves focus to the next meaningful site control or a stable status message.
  • Route changes preserve active site-alert visibility and do not reset focus into the alert unless a new urgent dynamic update appears.
  • Skip links and landmarks keep a coherent order when the site alert is inserted before navigation or page content.
Variants
  • Emergency site alert
  • Informational site alert
  • Slim site alert
  • Expandable site alert
  • Dismissible site alert
  • Dynamic update site alert
  • Related-links site alert

Verification

Last verified: