Banner

Banner can be used in one of two ways:

1. To highlight prominent information on a page.
2. To communicate feedback in response to a user action.

Accessibility

Feedback Banners

Banners that are used to communicate feedback require extra accessibility considerations to ensure they are surfaced immediately to all users including those using assistive technologies. This relates to WCAG 4.1.3 Status Messages.

Example scenarios that require extra considerations include:

• When a user submits a form, an error banner is shown with a list of form errors that need to be corrected.
• When a user submits a form, the submission successfully goes through and a success banner is shown.
• When a user saves a setting, an error banner is shown to communicate that an unexpected error has occured and the setting was not saved.
• When a user toggles an option, a warning banner is shown to warn the user of potential consequences.

Banners used in these scenarios can be made more accessible through either a focus management or a live region announcement technique:

• Focus management would involve moving focus to the newly shown Banner. This is the most reliable way to ensure that a user is aware of the new content. This is the preferred method for critical Banner scenarios (with exceptions).
• Live region announcements: A live region announcement can be used to announce the new content to screen reader users. This method is less reliable than focus management, but may be the preferred method for non-critical information (with exceptions).

Here are some questions to consider when deciding which method to use:

How critical is the information?

Critical information (such as an error) should be made as discoverable as possible. Though moving focus to the Banner can be considered more disruptive than a live region announcement, it's more important that a user is able to discover the Banner so they can take an appropriate action. In most critical scenarios, using focus management is the best approach.

On the other hand, for communicating newly shown non-critical information (such as a success), a live region announcement is sufficient in most scenarios. A live region announcement can sometimes fail to fire and can easily be missed, so it should be reserved for use on non-critical information where there are no consequences if a user misses it.

Where is a user's focus when the banner appears?

If an action triggers updates to the UI resulting in a user's focus getting lost and a new Banner being shown, place focus on this newly shown Banner instead of using a live region announcement.

For example, let's say that a user activates a "Submit" button. Upon doing so, significant portions of the UI (including this button) gets removed and replaced by a success banner. The fact that this is a non-critical banner may lead us to think announcing the banner is sufficient. However, given that the user experiences focus loss as a result of the control they were on being removed from the page, focus management is more appropriate.

This is because focus loss can result in some screen reader users being taken back to the top of the page and be disorienting. This is a WCAG 2.4.3 Focus Order issue.

Does the Banner contain an action?

If the Banner contains an action, placing focus on the newly shown Banner is preferred over a live region announcement so that a screen reader user can immediately interact with the action without having to manually locate it.

Is there already a live region on the page that can be utilized?

Dynamic live regions can have some challenges (GitHub Staff Only), so this method requires ample testing.

Please reach out to the accessibility team if you need help determining the best approach for your use case!

Known accessibility issues (GitHub staff only)