Use live regions to provide screen reader descriptions for updating content

Assigning aria-live="polite" to a region of the page or widget with dynamic content will inform screen reader users when a change occurs by announcing the content. This helps screen reader users keep updated on changes around the page. It is, however, important that these updates do not become disruptive.

  • Using aria-live="polite" queues the announcement until after the current speech has finished (if the reader is currently reading);
  • aria-live="assertive" may also be used in occasions where time-sensitive information needs to be announced to the user.

Use role="status" to label status messages

On occasions where a message needs to be conveyed to the user about the status of an application (for example - "searching", or "loading"), role="status" may be assigned to an element to specify that it contains an announcement should be made to the user without them having to focus the element.

Note: the “status” role has an aria-live value of “polite” by default.

An example announcing save changes

Status message reading, "Your changes were automatically saved."
Figure 1
  1. <div role="status">Your changes were automatically saved.</div>

Use role="alert" to notify users of important or time-sensitive information

Like “status”, “alert” can be used to specify content that should be announced to the user, however “alert” has the aria-live property of “assertive” by default, meaning it will be announced immediately. See ARIA Live Regions - MDN Web Docs for more information on ARIA roles with implicit live region attributes.

Do not give ARIA messages focus or require users to close them down

Make sure that alerts and status messages do not acquire focus or require users to close them down when they appear, as this will be disruptive and disorientating for users.

Good Examples

Bad Examples


WCAG 2.1

  • 4.1.3 Status Messages (AA)

EN 301 549 v 2.1.2

  • Status Messages

Further Reading