Sanna Kramsi - I would if I could a guide to web accessibility

ARIA live regions

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. Only use the assertive if the information is super important because this will interrupt whatever the user is doing. Usually polite is a better approach because it will allow the user to finish whatever they are doing and then tell them the information. The off value tells assistive technologies to temporarily suspend aria-live interruptions.

Example of aria-live usage

<div class="info" aria-live="polite">This info will be read to the assistive technologies.</div>

Types of aria-live regions

Alert role

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".

Status role

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.

Timer role

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.

Marquee role

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

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, the entire live region will be read to the user in order to give them enough context to makes sense of the update. This means that whenever there is a change in the region, the whole region will be read to the user.