Aria-live - Html

Introduction

aria-live is an attribute in HTML which defines a live region for dynamic content updates to be announced to assistive technologies such as screen readers. The purpose of this attribute is to improve accessibility for users with disabilities, especially those who rely on assistive technologies.

Usage

The aria-live attribute can be applied to any HTML element, such as div, span, and section. It is used to indicate which parts of a web page should be announced by assistive technologies.

There are three different values that can be assigned to the aria-live attribute:

• aria-live="off": This value indicates that dynamic updates to the content should not be announced to assistive technologies.

• aria-live="polite": This value indicates that updates to the content should be announced, but the assistive technology should wait to interrupt the user until they have finished their current task.

• aria-live="assertive": This value indicates that updates to the content should be announced immediately, even if the user is in the middle of another task.

Example

<div aria-live="polite">
  <p>There are currently 3 items in stock.</p>
  <button onclick="updateStock()">Update Stock</button>
</div>

<script>
  function updateStock() {
    // code to update stock goes here
    var stockCount = 4;
    var stockMessage = "There are now " + stockCount + " items in stock.";
    
    // update the text of the paragraph element
    document.querySelector("div p").textContent = stockMessage;
  }
</script>

In the above example, the aria-live="polite" attribute is applied to the div element. When the Update Stock button is clicked, the updateStock() function is called which updates the text of the p element inside the div.

Assistive technologies will announce the updated stock count without interrupting the user's current task because of the aria-live="polite" value.

Conclusion

Using the aria-live attribute is an important part of making web content accessible to all users, especially those who rely on assistive technologies such as screen readers. By properly implementing this attribute, we can ensure that dynamic updates to a web page are announced in a way that is helpful and unobtrusive to users with disabilities.