Flag
Messages that provide low-priority updates about a process or event.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Note: If you are using a screen reader on the code tab of this component, you may have heard multiple generic messages as examples load. These examples are used in the context of documentation to show the importance and usage of role or aria-live attributes which prompt the screen reader to read the component content aloud.
- Use
except for error messages which should use . - Use
which is equivalent to with . - Ensure the type of flag (success, warning, etc.) is communicated verbally if it can’t be easily inferred from the message text.
Keyboard controls
Flags are comprised of other elements that use standard keyboard actions.
Note: Activating the Escape key does not close the flag, as that might disrupt what the user is doing by closing something else.
| Key | Behavior |
|---|---|
| Enter + Space | Prompts the action associated with the focused interactive element. |
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves keyboard focus backwards to the previous interactive element in the banner. |