Banners are full-width elements used to grab the user’s attention and display important information.

When to use banners

We have two types of banner: informational and warning

Teal informational banners are used to communicate non-urgent information, such as action items for users or information about changes to services. These banners have a lower urgency, but provide important details warranting its use.

Orange warning banners are used to alert users of outages, development status, building closures, construction, and other urgent information.  These banners may include pressing information about things that could impact a user’s ability to interact with the library.

Guidelines for using banners

Banners should:

• Use concise, plain language
• Be no more than two sentences

We built accessibility best practices into our banner so it:

• Appears on page load and therefore does not use ARIA live region roles.
• Has screen reader only text to indicate whether the message is informational or a warning.

Relevant WCAG guidelines

• SC 1.3.1: Info and Relationships
• SC 1.3.3: Sensory Characteristics
• SC 1.4.1: Use of Color
• SC 2.2.3: No Timing
• SC 2.2.4: Interruptions
• SC 4.1.3: Status Messages

Result

Informational

Warning

Code