Use ARIA to announce updates and messaging

While native HTML elements are generally favoured for many applications due to existing accessibility support, some situations in a rich web environment require the use of additional specific coding to ensure that users are able to understand and interact with the content on the page. The Accessible Rich Internet Applications (ARIA) framework can be applied to native HTML elements where doing so would provide a more accessible environment.

Examples of using ARIA to improve accessibility by announcing changes in content to the user, include: when a user attempts to submit a form that contains an error; when the other person in an online chat has sent a reply. Standard HTML generally only allows us to convey content that exists when the page loads. ARIA allows us to notify the user that something has changed on the page after it has loaded.

On this page

Techniques

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

<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 Failure F103: Providing status messages that cannot be programmatically determined through role or properties

Use ARIA to announce updates and messaging

Web Accessibility Techniques

Techniques

Use live regions to provide screen reader descriptions for updating content

Use role="status" to label status messages

An example announcing save changes

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

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

Good Examples

Bad Examples

References

WCAG 2.1

EN 301 549 v 2.1.2

Further Reading