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 the component already has.
| Component | Attribute | Usage |
|---|---|---|
Notice | role="region" | Defines an ARIA landmark, allowing quick navigation to the element. Undefined for muted theme. |
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
Find more accessibility recommendations in the common Accessibility guide.