ARIA23: Using role=log to identify sequential information updates

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

Content using Accessible Rich Internet Applications (WAI-ARIA).

This technique is not referenced from any Understanding document.

Examples

Example 1: Updating the contents of a chat conversation

Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role of log so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility). 


	<div id="chatRegion" role="log" aria-labelledby="chatHeading">
		<h4 id="chatHeading">Chat History</h4>
		<ul id="conversation">
			<li>The latest chat message</li>
		</ul>
	</div>

Working example: chatlog.html

Example 2: Updating the log of a server

An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with the role of log so that the new additions are announced by the ATs. (The default value for the aria-relevant attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.) When each new log entry is added, a screen reader announces it. 


	<div id="activityLog" role="log">
		<h4 id="logHeading">Recent activity</h4>
		<ul id="logentries"">
			<li>08:03 UserX logged off</li>
		</ul>
	</div>

Working example: serverlog.html