ARIA "live" regions can be used in HTML to indicate to assistive technology (such as screen readers) that the content within the region is frequently updated and should be read aloud as soon as it changes. Examples of instances where you might use aria-live include:
- In a chat application, to announce new messages as they are received.
- In a live news feed, to announce updates as they happen.
- In a web-based game, to announce the score or other important information as it changes.
- In a form that provides real-time validation feedback, to announce error messages.
- In a page that uses AJAX to update content without a full page refresh, to announce the new content and its location.
Here's an example of using aria-live in HTML:
<div aria-live="polite" aria-atomic="true"> <p id="message">Welcome to the chat room!</p> </div>
In this example, the div element has two attributes:
- aria-live is set to "polite", which means that the screen reader will announce the content within the div only when the user is idle. The other possible value is "assertive" which means that the screen reader will interrupt the user and announce the message immediately.
- aria-atomic is set to "true", which means that the entire contents of the div will be announced, rather than just the changes.
Now, when the content of the p tag with the id "message" changes, the screen reader will announce the new content to the user. For example, you might use JavaScript to update the text of the p tag as new messages are received in a chat room:
function updateChat(newMessage) {
var messageElement = document.getElementById("message");
messageElement.textContent = newMessage;
}It's important to note that the aria-live regions should be used sparingly as they are disruptive to the user. Users might not be able to focus on their current task when they are receiving new updates. Also, using the appropriate aria-live value is important. If you are using an assertive value and updating the regions frequently, it can be very disruptive for the users.