✎ Technique: Status messages

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 of 4.1.3 guideline  Example of 413 guideline

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.

Screen capture of an accessible alert message

(Source: Knowbility article on status messages)