You should also take care about how much information you inform the reader of. If you’re updating only small bits of text, the reading system might only announce the new text, leaving the reader confused about what is going on. Conversely, you might add a new node to a long list, but the reader might be forced to listen to all the entries that came before it again, depending on how you have coded your application.

The aria-atomic attribute gives you control over the amount of text that gets announced. If you set it to true, for a region, all the content will be read whenever you make a change inside it. For example, if you set a paragraph as live and add this attribute, then change the text in a span inside it, the entire paragraph will be read. In this example:

<p aria-live="true" aria-atomic="true">
    Your current BMI is: <span id="result"/>
</p>

Writing the reader’s body mass index value to the embedded span will cause the whole text to be read. If you set the attribute to false (or omit it), only the prose in the element containing the text change gets announced. Using our last example, only the body mass index value in isolation would be announced.

You can further control this behavior by also attaching the aria-relevant attribute. This attribute allows you to specify, for example, that all node changes in the region should be announced, only new node additions, or only deletions (e.g., for including data feeds). It can also be set to only identify text changes. You can even combine values (the default is additions text).

We could use these attributes to set up a fictional author update box using an ordered list as follows:

<p id="feed-label">What's the Author Saying…</p>
<ol id="feed"
    aria-live="polite"
    aria-atomic="true"
    aria-relevant="additions"
    aria-labelledby="feed-label">
    …
</ol>
<a href="http://www.example.com/authorsonline">Go online to view</a>

Only the new list items added for each incoming message will be read now. The old messages we pull out will disappear silently. (And I’ve also added a traditional link out for anyone who doesn’t have scripting enabled!)

There are also special roles that automatically identify a region as live. Instead of using the aria-live attribute to indicate our results field, we could have instead set up an alert region as follows:

<div role="alert” id="results"/>

The following roles are also treated as indicating live regions: marquee, log, status, and timer.

And that’s a quick run-through of how to ensure that all readers get alerted of changes you make to the content. It’s not a complicated process, but you need to remember to ensure that you set these regions otherwise a segment of your readers will not get your updates.