ARIA Log

ARIA’s role=log is a live region that can expect to be updated with new lines of information added to the end of the other content. In addition, the older content may disappear.

Areas with role=log always have the aria-live value of polite.

In Example 1 below, JAWS will read each new text node as it is added, but does not read the entire log file.

In Example 2 below, Jaws reads the new line because it is the only thing in the log. In this case the old log entry is overwritten with the new log line.

Example 1:

Adding a log line to the end of the area.

Code


Adding a log line to the end of the area.
<div id="livelog1" role="log" aria-atomic="false"></div>
<button onClick="ARIA_Append_Log();">Add a log entry</button>
function ARIA_Append_Log() {
  var txt = document.createTextNode(Math.random() + " A line has been appended.");
  document.getElementById('livelog1').appendChild(txt); 
}

Example 2:

Updating a log by deleting the old line and adding one new line.

This is the start of a log

Code


function ARIA_Overwrite_Log() {
  document.getElementById('livelog2').innerHTML = Math.random( ) + 
  ": another new line has been written over writing the current line.";
}
Updating a log by deleting the old line and adding one new line.
<div id="livelog2" role="log">This is the start of a log</div>
<button onClick="ARIA_Overwrite_Log('livelog2','','');">Overwrite a log entry</button>

Works With

role=log
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 5 JAWS 12 Yes.

Standards:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

Comments are closed.