Developer Notice
What component has
Keyboard support
See detailed information about the keyboard support for the all clickable elements in the Keyboard control guide.
Roles and attributes
The following list describes roles and attributes that component already has.
| Component | Attribute | Usage |
|---|---|---|
Notice | role="region" | Defines an ARIA landmark and allows users to navigate to the component easily and to have it listed in a summary of the page. |
aria-label | Defines a default accessible name for the region: "Notification" for info, success and warning themes, and "Critical notification" for danger theme. | |
Notice.Close | aria-label="Close notification" | Defines the default accessible name for the Close button. |
Considerations for designers and developers
- Provide accessible names for notices that accurately convey their type and importance. Refer to our examples.
- Avoid showing more than one
Noticeon the same page at once. If you absolutely have to do it, make sure they all have different accessible names so they can be easily distinguished when navigating the landmarks.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.