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)