Message Bar

Often used in task flows and forms, message bars communicate general information and context about the current task. For example, a success message after a form submission or a message that indicates there are multiple errors to fix. Despite the name, contextual message bars were not designed to replace inline messages or errors, but rather to provide additional feedback to a user after an action is completed.

Use a message bar, either contextually or globally, with an optional dismiss button for noncritical messages that communicate status. If your status can be conveyed within one or two words and no action is needed, consider using the badge component. Action from the user is not always required, but if one is needed, it should not be time-sensitive. If lines are included within the message, do not also add a timer.

Global message bars are most often used to communicate system alerts or information that is not related to a specific element on the page, including system health, warnings, or critical alerts.

Message bars contain several optional modifiers that can be combined to optimize understanding of conveyed information. For more information about timers, review the section on timed messages in the behaviors section.

There are two alignments available for the message bar component. Left alignment is the default and should be used in most instances. Center alignment is available for short messages, such as concise confirmations or feedback. If the text wraps to two lines or more, left-align the message to improve readability.

These are spacing specifications built into the component. All units of measurement are in pixels.

There are four background colors for message bars. Choose the option that best conveys the meaning of the message. Note that specific icons are reserved for use with their corresponding semantic colors. It is not recommended that you use these icons with a conflicting semantic color, as they each have an established, universal meaning.

Message bars are available in dismissible, nondismissible, and timed options. Consider the information you’re trying to communicate to the user when selecting between a dismissible or nondismissible message bar. For example, global message bars containing critical information should remain in view, and therefore be nondismissible by the user.

A message bar’s meaning should not be communicated by color alone
Support the meaning of a message bar with appropriate text or an icon. This helps users who cannot see color, or who are using assistive technology. Any body text must provide an indication of the status conveyed by the message bar regardless of the color used. If using an accompanying icon, its meaning must be visually self-evident and commonly used in that context, such as an error alert, check, or warning icon.
WCAG 2.1: 1.4.1 Use of Color (w3.org)


Ensure each message bar meets the appropriate level of contrast
Both the body text and icon must meet a contrast ratio of 4.5:1 with the message bar background. The message bar component should achieve a 3:1 contrast ratio or greater with the page background.
WCAG 2.1: 1.4.11 Non-text Contrast (w3.org)


Do not use timed notifications for anything critical or destructive
Make sure that a user who were to ignore or miss a timed notification due to its timed display would encounter no negative impact on their current activities or the status that the message conveyed.


Whenever possible, give users settings to change the frequency of or turn off non-essential notifications
Non-urgent notifications can be distracting for people with cognitive disabilities and can be hard to see for those with partial or low vision, since notifications typically display on a separate non-disruptive area of the screen.
WCAG 2.1: 2.2.1 Timing Adjustable (w3.org)


If a link is included in the message bar notification, it should contain meaningful and descriptive link text
Avoid generic phrases like “Learn more” in favor of more descriptive and unique text, such as “Learn how to change your settings.”
WCAG 2.1: 2.4.4 Link Purpose in Context (w3.org)


Message bar titles should accurately describe the meaning and purpose of the notification
Avoid generic phrases like “Learn more” in favor of more descriptive and unique text, such as “Learn how to change your settings.”
WCAG 2.1: 2.4.6 Headings and Labels (w3.org)


Make sure that dynamic message bar notifications are announced by screen readers
Notifications that appear dynamically (either as a result of a user interaction or another trigger) should be announced by screen readers.
WCAG 2.1: 4.1.3 Status Messages (w3.org)

Capitalization
Use sentence case within a message bar unless referring to proper nouns. Otherwise, do not use title case and never use all caps.
Do: Your ticket was submitted.
Don’t: YOUR TICKET WAS SUBMITTED.


Past tense
Use past tense to describe the status of an action that is completed.
Do: Image uploaded.
Don’t: Image uploading complete.


Message text
Because message bars convey important information and can include an inline link or action, keep the message text as concise as possible. Offer additional information or route users to action if necessary.


Punctuation
Include punctuation in message bars. If a link comes at the end of a sentence or before a comma, don’t link the punctuation mark. Review accessibility guidelines on links for best practice information.


Timers
Do not pair timers with warnings, errors, or messages that contain actions. Timers are intended for text-only message bars.