Notification Carbon components are messages that communicate information to a user. The WAI-ARIA role="alert"
is equivalent to aria-live="assertive"
. It is used to display a message to the user in a way that attracts the user’s attention without receiving focus to communicate the message without interrupting the users current task. If the notification does not contain an urgent message, consider changing it to aria-live="polite"
so the notification is queued until whatever task the user is currently working on is complete.
The close button contains an ARIA label of aria-label="close"
, and the icon has aria-hidden="true"
so it is ignored by assistive technologies. The Tab
key is used to move focus to the close button within the notification and the Space
key or Enter
key activate the button to close the notification.
Avoid using a toast notification for critical alerts or long messages because they are timed and will disappear automatically making it difficult for people with various disabilities to get the entire message. An alert that disappears too quickly can lead to failure of the optional WCAG 2.0 success criterion 2.2.3 (AAA).
Provide a means to turn off nonessential alerts to enhance usability for people with visual and cognitive disabilities. Additional information is available in WCAG 2.0 success criterion 2.2.4 (AAA). Note: Providing this functionality is optional.
Ensure the use of color and hidden icons are not used as the only means of conveying the importance of the notification.
Helpful resources for creating customized accessible implementations
Accessibility issues are tracked in the Carbon Component GitHub repository.