Notifications are available in three fundamental formats:
- Inline Notifications: Positioned within task flows, these notifications inform users about the status of an ongoing action, typically displayed at the top of the main content area.
- Toast Notifications: These are transient, non-modal messages that appear at the top of the screen to provide brief alerts, disappearing after a set duration.
- Notifications: Notifications are prominent UI elements used to convey important information or alerts to users. They typically appear at the top of a webpage or application screen, drawing immediate attention to their content.
The appearance of notifications is designed to be visually intuitive and easily distinguishable, ensuring that users can quickly recognize and understand the information being presented.
Inline Notifications:
- Info Inline Notifications: Offers supplementary information or system updates.
- Success Inline Notifications: Indicates successful completion of an action or process.
- Warning Inline Notifications: Notify users to a problem or challenge requiring action.
- Critical/Error Inline Notifications: Indicates errors or failures in the process that need correction.
- Neutral Inline Notifications: Conveys general information or acknowledgments without invoking any particular urgency or action.
- Without background color.
- With background color.
Toast Notifications:
- Info Toast Notifications: Offers supplementary information or system updates.
- Success Toast Notifications: Indicates successful completion of an action or process.
- Warning Toast Notifications: Alerts users to a problem or challenge requiring action.
- Critical/Error Toast Notifications: Indicates errors or failures in the process that need correction.
- Neutral Toast Notifications: Conveys general information or acknowledgments without invoking any particular urgency or action.
Notifications:
- Info Notifications: Offers supplementary information or system updates.
- Success Notifications: Indicates successful completion of an action or process.
- Warning Notifications: Alerts users to a problem or challenge requiring action.
- Critical/Error Notifications: Indicates errors or failures in the process that need correction.
- Neutral Notifications: Conveys general information or acknowledgments without invoking any particular urgency or action.
Notifications serve as an essential tool for providing contextual information and aiding workflows, particularly for users with disabilities. It is crucial to ensure that these notifications are accessible, allowing all users to perceive, understand, operate, and interact with them effectively.
Ensuring accessibility for notification or alert components in web applications is critical because these elements often convey important information that must be immediately recognizable by all users, including those with disabilities. Here’s a detailed accessibility guide for creating accessible notification or alert components:
- Use role="alert" for important alerts that require immediate attention. This role automatically sends the content to assistive technologies and sets the aria-liveproperty to assertive
- For less urgent notifications, consider using aria-live="polite" which will be announced when the user is not busy with other tasks
- Provide users sufficient time to read and interact with notifications. For persistent or critical information, consider not having a timeout.
- For notifications that do disappear, ensure they remain on the screen for an adequate duration, typically at least 5 seconds.
- Allow users to easily dismiss or interact with notifications. Provide a clear mechanism to close the alert, such as a close button
- Ensure that interactive elements in notifications are keyboard accessible.
- For modal alerts that require immediate interaction, bring focus to the alert when it appears, and trap focus within the alert until it is dismissed.
- Return focus to an appropriate place in the application once the alert is dismissed.