# ✎ Technique: Status messages

**Source**: https://accessibility.huit.harvard.edu/technique-status-messages
**Parent**: https://accessibility.huit.harvard.edu/techniques

Assistive technology users should be able to detect when important changes occur on a web page, With the use of a status message, information can be provided to the user without changing focus or unnecessarily interrupting their work. The following are the kinds of status messages to provide:

- success or results of an action
- waiting state of an application
- progress of a process
- existence of errors

## Examples

### ✗ Bad example

Omitting the `role=status` does not allow screen-reader users to detect the presence of new content on a web page.

`<div>2 results returned.</div>`

### ✓ Good examples: providing role=status

#### Example #1 - status message

Use `role=status` to present status messages. The `role=status` will allow screenreaders to detect when this information is made available by moving the focus to this content:

`<div role="status">2 results returned.</div>`

After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "2 results returned" near the top of this new content. This text is given an appropriate `role` for a status message. A screen reader will announce "Two results returned".

#### Example #2 - alert message

In the example below, a screen reader can announce a properly implemented status message. This example simulates a product comment form. If the user is idle too long, a message displays warning that the system will log them off. The screen reader announces the new message. In the example below, the user navigates to the comment field and then leaves the cursor idle. This example displays the warning message that will be read immediately by a screen reader.

(Source: [Knowbility article on status messages](https://knowbility.org/blog/2018/WCAG21-413StatusMessages/))

See also:

- [Techniques](https://accessibility.huit.harvard.edu/page-categories/techniques)
- [Alerts](https://accessibility.huit.harvard.edu/accessibility-topics/alerts)
- [Screen reader](https://accessibility.huit.harvard.edu/access-technologies/screen-reader)
- [Switch-based input](https://accessibility.huit.harvard.edu/access-technologies/switch-based-output)
- [Notifications and alerts ✎](https://accessibility.huit.harvard.edu/content/notifications-and-alerts)
- [Provide notification of dynamic changes to content ✎](https://accessibility.huit.harvard.edu/content/provide-notification-dynamic-changes-content)
- [Robust](https://accessibility.huit.harvard.edu/principles/robust)
- [Low vision](https://accessibility.huit.harvard.edu/disabilities/low-vision)
- [Cognitive](https://accessibility.huit.harvard.edu/disabilities/cognitive)
- [HTML](https://accessibility.huit.harvard.edu/web-technologies/html)