About cookies on this site Our websites require some cookies to function properly (required). In addition, other cookies may be used with your consent to analyze site usage, improve the user experience and for advertising. For more information, please review your options. By visiting our website, you agree to our processing of information as described in IBM’sprivacy statement. To provide a smooth navigation, your cookie preferences will be shared across the IBM web domains listed here.
Notification
How it works
Notification Carbon components are messages that communicate information to a
user. The WAI-ARIA role="status" and role="log" are equivalent to
aria-live="polite". It is used to display a message to the user in a way that
does not interrupt the user’s current task and queues the notification until
whatever task the user is currently working on is complete. If the notification
contains an urgent message, a role="alert" can be used, it is equivalent to
aria-live="assertive". It is used to display a message to the user that
interrupts the user’s current task. These are considerably more disruptive to
users than therole="status"orrole="log". In either case, these notifications
attract the user’s attention without receiving focus to communicate the message.
Details pertaining to these roles include specifics around containing
interactive elements, focus behavior, close behavior, and semantic contents. The
role of status, log, and alert can not contain interactive elements,
should not be given focus, and can optionally be closed by pressing the Escape
key. The close button is given aria-hidden="true" so it is ignored by
assistive technologies. Generally, plain text is preferred to be used within
these notifications. When read by screenreaders, any semantic meaning
surrounding the contents is not reflected to the user. For instace - Bold or
italic emphasis, and/or semantic elements such as <li> etc. are not read to
the user. If semantics are included, it should be non-essential to the
understanding or meaning of the contents.
Notification components are allowed interactive children (actions) though, and
when an interactive element is provided, a role="alertdialog" is used. These
notifications should immediately be given focus so the user can navigate through
the interactive elements. The close button is given 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 action and
close button within the notification and the Space key or Enter key activate
the appropriate button within the notification. It can also be optionally closed
via pressing the Escape key.
Accessibility considerations
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.
Resources
Helpful resources for creating customized accessible implementations
- W3C W3C WAI-ARIA Authoring Practices Alert Design Pattern covers the usage of ARIA names, state and roles.
- W3C W3C Web Accessibility Tutorial - User Notifications provides a tutorial on notification accessibility.
- IBM Accessibility Requirements:
- 3.3.1 Error Identification (WCAG Success Criteria 3.3.1)
- 3.3.2 Labels and Instructions (WCAG Success Criteria 3.3.2)
- 3.3.3 Error Suggestion (WCAG Success Criteria 3.3.3)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository.
Automated test
Automated test environmentResults
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP Test
- Violations
- Violations
macOS screen reader tests
Environment Results
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
- Chrome version 77.0.3865.90
- Carbon React version 7.7.1
VoiceOver(VO) test:
- Press Control-Option-Shift keys to enter the Web content.
- Press the Tab key. VO announces the notification text and the close button.
- Press the Space key or Enter key to close the notification.
- macOS Mojave version 10.14.6 with VoiceOver
- Safari version 13.0.2
- Carbon React version 7.7.1
- Safari version 13.0.2
- Carbon React version 7.7.1
VoiceOver(VO) test:
- Press Control-Option-Shift keys to enter the Web content.
- Press the Tab key. VO announces the notification text and the close button.
- Press the Space key or Enter key to close the notification.
Windows screen reader tests
EnvironmentResults
- Microsoft Windows 10
- Firefox version 68
- JAWS version 18
- Carbon React version 7.7.1
- Firefox version 68
- JAWS version 18
- Carbon React version 7.7.1
JAWS test:
- Press H, JAWS announce the notification title.
- Press Alt-Down Arrow, JAWS announces each line of the notification text.
- Press the Tab, JAWS announces the close button.
- Press the Space key or Enter key to close the notification.
iOS screen reader tests
Environment Results
- iOS version 13.1.3 with VoiceOver
- Safari version 13.1.3
- Carbon React version 7.7.1
- Safari version 13.1.3
- Carbon React version 7.7.1
VoiceOver test:
- Swipe right to the notification and to read the notification text.
- Swipe right to the X icon. VO announces the close button.
- Double tap to close the notification.
