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.
- WCAG Technique: ARIA22: Using role=status to present status messages
- WCAG Technique ARIA19: Using ARIA role=alert or Live Regions to Identify Errors
- W3C - Using role=alert to identify errors
- WCAG Failure F103: Providing status messages that cannot be programmatically determined through role or properties
- 4.1.3 Status Messages (AA)
EN 301 549 v 2.1.2
- 188.8.131.52 Status Messages