JAVA SCRIPT - Creating an Accessible Automatically Updated Region

Creating an Accessible Automatically Updated Region

Problem

You have a section of a web page that is updated periodically, such as a section that lists recent updates to a file, or one that reflects recent Twitter activity on a subject. You want to ensure that when the page updates, those using a screen reader are notified of the new information.

Solution 

Use WAI-ARIA region attributes on the element being updated:

<ul aria-alive="polite" aria-atomic="true" aria-relevant="additions" id="update" role="log">
</ul>

EXPLAIN

A section of the web page that can be updated after the page is loaded, and without direct user intervention, calls for WAI-ARIA Live Regions. These are probably the sim‐ plest ARIA functionality to implement, and they provide immediate, positive results. And there’s no code involved, other than the JavaScript you need to create the page updates.

updates the web page based on the contents of a text file on the server that the application retrieves using Ajax. I modified the code that polls for the updates to check how many items have been added to the unordered list after the update. If the number is over 10, the oldest is removed from the page: 

// process return
function processResponse() {
 if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 var li = document.createElement("li");
 var txt = document.createTextNode(xmlhttp.responseText);
 li.appendChild(txt);
 var ul = document.getElementById("update");
 ul.appendChild(li);
 // prune top of list
 if (ul.childNodes.length > 10) {
 ul.removeChild(ul.firstChild);
 }
 } else if (xmlhttp.readyState == 4 && xmlhttp.status != 200) {
 console.log(xmlhttp.responseText);
 }
}

With this change, the list doesn’t grow overly long. I made one more change, adding the ARIA roles and states to the unordered list that serves as the updatable live region:

<ul aria-atomic="false" aria-live="polite" aria-relevant="additions s" id="update" role="log">
</ul>

From left to right: the role is set to log, because I’m polling for log updates from a file, and only displaying the last 10 or so items. Other options include status, for a status update, and a more general region value, for an undetermined purpose. The aria-live region attribute is set to polite, because the update isn’t a critical update.

The polite setting tells the screen reader to voice the update, but not interrupt a current task to do so. If I had used a value of assertive, the screen reader would interrupt whatever it is doing and voice the content. Always use polite, unless the information is critical. The aria-atomic is set to false, so that the screen reader only voices new additions, based on whatever is set with aria-relevant.

It could get very annoying to have the screen reader voice the entire set with each new addition, as would happen if this value is set to true. Lastly, the aria-relevant is set to additions, as we don’t care about the entries being removed from the top. This setting is actually the default setting for this attribute, so, technically, it isn’t needed. In addition,

AT devices don’t have to support this attribute. Still, I’d rather list it than not. Other values are removals, text, and all (for all events). You can specify more than one, separated by a space. This WAI-ARIA–enabled functionality was probably the one that impressed me the most.

One of my first uses for Ajax, years ago, was to update a web page with information. It was frustrating to test the page with a screen reader (JAWS, at the time) and hear nothing but silence every time the page was updated. I can’t even imagine how frus‐ trating it was for those who needed the functionality. Now we have it, and it’s so easy to use. It’s a win-win.