DEV 8.2 – Use ARIA to announce updates and messaging
Why is this important?
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.
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
<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
References
WCAG 2.1
EN 301 549 v 2.1.2
- 9.4.1.3 Status Messages