Skip to main content

Aria Live Regions

When content changes after initial load assistive technology users may not "see" the changes. The aria-live attribute allows us to inform the user of these changes.

Some good use cases for aria-live include form validation and live chat.

Example

In the below example make sure the page starts with an empty element (in this example message is undefined):

<div aria-live="polite">
    <ion-text>{{message}}</ion-text>
</div>

The value polite will ensure that that anything read will not interrupt what is currently being read. You can change this to assertive to immediately read the announcement.

During form validation the value of message will be changed and the screen reader will announce the value when that happens.