Banner

A banner is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed.

Accessibility

To implement an accessible PatternFly banner:

Check the color contrast of a banner and any text on it to make sure they can be read by users with color blindness or other visual impairments.
When a banner is used to convey status, add an icon that also conveys status visually, and provide screen reader text using .pf-screen-reader or an equivalent.

At a minimum, a banner should meet the following criteria:

A user should not be able to focus on the banner with keyboard controls.
A user should be able to have a screen reader describe the contents of the banner, but not focus on or interact with the banner otherwise.
If the banner conveys status, a status icon and .pf-screen-reader element is included.

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
`screenReaderText="[visually hidden text that describes the banner status]"`	`Banner`	Adds text that is accessible only to assistive technologies and is not visually rendered. This prop should only be passed in when the banner is meant to convey status.

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class	Applied to	Reason
`.pf-screen-reader`	`span`	Provides an accessible description of the type of banner. Required if banner conveys status