DEV Community

Cover image for Understanding aria-live tag's use
Engineering Expert
Engineering Expert

Posted on

Understanding aria-live tag's use

aria-live is an attribute in HTML that is used to enhance the accessibility of web content, particularly for individuals who use screen readers or other assistive technologies. It is part of the ARIA (Accessible Rich Internet Applications) specification and is used to define how dynamic content updates are announced to users with disabilities.

The aria-live attribute has several possible values, each of which determines how and when screen readers should announce changes to the content within an element. The possible values include:

off: This is the default value, and it indicates that the content within the element should not be announced by the screen reader. This is typically used when you have content that is not relevant to screen reader users.

polite: This value indicates that changes to the content within the element should be announced by the screen reader, but the announcement should not interrupt the user's current task. Screen readers will wait for a suitable pause in their speech before announcing the change.

assertive: This value indicates that changes to the content within the element should be announced immediately and may interrupt the current screen reader task. Use this when the content change is important and needs to be brought to the user's attention right away.

Here's an example of how to use aria-live in HTML:

<div aria-live="polite">
  This is a dynamic content area.
</div>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)