With aria-live you can communicate to the assistive technology users "live". You can use it for updates that should be communicated to users immediately regardless of their position on the page. For example, a status message which appears as a result of a user action.
Aria-live has three allowed values: polite, assertive, and off. The one you should most often use is usually "polite".
The value “off” doesn’t indicate that changes shouldn’t be announced. Changes to the element’s content are only supposed to be announced when focus is on, or inside, the element.
Using the value “polite” the screen reader will announce changes whenever the user is idle.
A change to an "assertive" live region will interrupt any announcement a screen reader is currently making. So use it sparingly. Too much interruption can be confusing and annoying.
<div class="info" aria-live="polite">This info will be read to the assistive technologies.</div>
An ARIA alert is an assertive live region that can be used to announce important information to screen reader users. An alert is equivalent to aria-live="assertive" except that some screen readers might announce "alert" to let users know that this is an alert message. An ARIA alert can be set by defining role="alert".
An element with role="status" will announce status updates to screen reader users. The status updates are announcements that are less urgent than alerts. Status updates have an implied aria-live="polite" and an implied aria-atomic=true. Some screen readers might announce the type of status to the users.
Setting an element as a timer (role="timer") designates the region as a time counter. It can either count up or down. This role is not as useful as other types of live regions because the implied value is aria-live="off" which means that screen readers aren't supposed to announce changes to timers at all. The screen reader users can still read the content of the times if they navigate to the timer and listen to the text.
In some cases, you might want the users to actually hear a counter, but remember not to overwhelm your users. Having the counter announced every second would be painful.
Setting a region to role="marquee" designates it as a scrolling area such as a news ticker. The announcements are non-essential and the implied value is aria-live="off", meaning that screen readers are not supposed to announce changes in the marquees at all. The screen reader users can still read the content of the marquee if they navigate to the marquee and listen to the text.
Aria-atomic lets assistive technologies know if a region needs to be reread to a user or just the change. By default it is false: aria-atomic="false". It means that when there is a change in a region, that change can be presented on its own. For example when a news headline is added to a news feed.
When aria-atomic is set to true: aria-atomic="true", the entire live region will be read to the user to give them enough context to make sense of the update. This means that whenever there is a change in the region, the whole region will be read to the user each time.