Status Messages and Alerts

What are Status Messages?

Status messages typically refer to information or notifications provided to impaired users, especially those using assistive technologies like screen readers, to convey important updates or changes on a web page or application. These messages are essential to ensure impaired individuals fully understand and interact with this digital content.

What are Alerts?

Alerts are messages or notifications presented to users, particularly those with impairments, to convey important information, warnings, errors, or updates. Alerts ensure that all users, including those using assistive technologies such as screen readers, can receive and understand critical information when interacting with web content or applications.

What is the Difference between Status Messages and Alerts?

Status messages and alerts share similarities, as both convey important information or updates to users. However, there are distinct differences in their usage and presentation. The key differentiators between status messages and alerts include:

1. Timing and Context:

• Status Messages: Status messages often provide real-time feedback or updates about a specific user action or system event. They are typically presented as part of the normal flow of an application, providing feedback related to the current context. For example, they may inform users of the success or failure of a form submission without interrupting the user's current task.
• Alerts: Alerts are generally more intrusive and are often used to convey critical information, warnings, or important announcements that require immediate user attention. They can interrupt the user's current task and typically demand an action from the user to dismiss or acknowledge them.

2. Presentation:

• Status Messages: These messages are usually displayed less intrusively and subtly. The messages can be present within the existing content as inline messages, banners, or toast notifications that do not necessarily disrupt user workflow.
• Alerts: Alerts are present in a more attention-grabbing way, often as modal dialogs or pop-up boxes that overlay the page's main content. This overlay design ensures that the user notices the alert, and it thus takes priority over the rest of the content.

3. User Interaction:

• Status Messages: While status messages may require user interaction in some cases, for example, acknowledge successes or errors, they are often less likely to demand immediate user action and may disappear automatically after a brief period.
• Alerts: Alerts typically require user interaction to dismiss them, acknowledge important information, or take specific actions. Users must actively respond to alerts by clicking "OK", "Dismiss", or another similar button.

4. Use Cases:

• Status Messages: Status messages provide feedback about the outcome of user interactions, such as form submissions, filtering results, or updates to a page's content. They can also convey the progress of ongoing processes (e.g., file uploads).
• Alerts: Typically, developers reserve alerts for conveying critical information, security warnings, system alerts, confirming significant actions (e.g., deleting a file), and delivering other high-priority messages.

How do Status Messages and Alerts Work?

Status messages and alerts are crucial in enhancing user experience and accessibility. Here's how status messages and alerts work:

Status Messages:

1. Triggering Events: Web Applications typically trigger Status messages in response to specific actions or events. These events can include form submissions, successful actions, errors, or updates to dynamic content.
2. Presentation: Status messages are presented visually on the screen. Depending on the application's design, they can appear as pop-up notifications, banner messages, or inline text.
3. Content: The content of status messages provides information about the outcome of the triggered event. For example, a status message may inform a user that the system has received a successfully submitted form or that an error occurred during a transaction.
4. Accessibility: Status messages should be associated with appropriate ARIA attributes, such as aria-live="polite" and role="status". These attributes inform assistive technologies, like screen readers, to promptly announce the messages to users. Status messages must be perceivable by all users, including those with impairments.

Alerts:

1. Triggering Events: Specific actions or events, such as form submissions, critical errors, warnings, or important announcements, can trigger Alerts. They are used to get the user's immediate attention.
2. Presentation: Alerts often appear as pop-up dialog boxes, modal windows, or banners overlaying the web page's main content. Designers create them to visually stand out and position them front and centre to capture the user's attention.
3. Content: The content of alerts always conveys urgent or essential information. For example, a security alert might warn the user about suspicious activity, or a confirmation alert might ask the user to confirm a significant action, such as deleting data.
4. Accessibility: Making alerts accessible is critical. They should include ARIA attributes like role="alertdialog" and aria-live="assertive". These attributes inform assistive technologies to immediately announce the content and ensure that users with impairments are alerted to the information.

When to Use Status Messages

Status messages provide a valuable means of conveying real-time or dynamic updates to users when necessary. Here are some common situations in which developers use status messages:

1. Form Submissions: Status messages can provide feedback on the success or failure of a user-submitted form on a website. For example, a message notifies a user of a successful form submission or shows an error message when a validation issue occurs.
2. Real-time Updates: In applications like messaging platforms or social media, status messages display incoming messages or notifications as they arrive. Users receive real-time updates about new announcements, friend requests, or other interactions.
3. File Uploads: When a user uploads a file, status messages can inform them about the progress of the upload, whether it completes successfully, or if there are any errors during the process.
4. Data Processing: In data-intensive applications, such as analytics tools, status messages can indicate the progress of data processing or the status of long-running tasks, helping users understand when their data will be available.
5. Multi-step Processes: For multi-step processes, such as a checkout flow on an e-commerce website, status messages guide users through each step and inform them of their progress, what step they are on, and any issues that need attention.

When to Use Alerts

Alerts interrupt users' current activity and ensure they know essential events or actions. Here are common situations in which developers use alerts:

1. Confirmation Prompts: Developers use confirmation alerts to ask users for confirmation before performing a significant action. For example, when users attempt to delete an item, they may receive an alert asking if they want to proceed.
2. Error Notifications: Alerts notify users about critical errors or issues that require immediate attention. For instance, they alert the user when login credentials are incorrect, or a payment transaction fails.
3. Security Alerts: When a potential security threat or suspicious activity occurs on a user's account, developers may use alerts to prompt the user to take necessary security measures, such as changing their password.
4. Emergency Notifications: In applications like emergency alert systems or public safety websites, alerts can deliver urgent information, such as weather warnings, natural disasters, or public safety alerts.
5. Emergency Notifications: In mobile apps, developers use push notifications to deliver urgent information, such as news alerts, reminders, or updates from the app.

WCAG Guidelines and Further Reading

WCAG Guidelines Surrounding Status Messages and Alerts

Status Messages

• 1.3.1. Info and Relationships (A)
• 2.4.3. Focus Order (A)
• 4.1.1. Parsing (A)
• 4.1.2. Name, Role, Value (A)
• 4.1.3. Status Messages (AA)

Alerts

• 1.3.1. Info and Relationships (A)
• 3.2.2. On Input (A)
• 3.3.1. Error Identification (A)
• 4.1.1. Parsing (A)
• 4.1.2. Name, Role, Value (A)
• 4.1.3. Status Messages (AA)

Further Reading

• The Pearson Higher Education website fully breaks down the success criterion of WCAG Guideline - Status Messages.
• The Mozilla Web Documentation website has an article detailing the ARIA Alert role.
• The MagenatA11y website has a page containing examples of how to code a Basic Alert, notes, and testing tips.