WAI-ARIA: Role=Log

A type of live region where new information is added in meaningful order and old information may disappear.

Description

A type of live region where new information is added in meaningful order and old information may disappear. See related marquee.

Examples include chat logs, messaging history, game log, or an error log. In contrast to other live regions, in this role there is a relationship between the arrival of new items in the log and the reading order. The log contains a meaningful sequence and new information is added only to the end of the log, not at arbitrary points.

Elements with the role log have an implicit aria-live value of polite.

Screen Reader Support For Role=Log

Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
MUST announce changes to the live region	supported	supported	supported	none	supported	supported	supported	supported	supported	supported	supported
MUST convey the implicit aria-live value of polite by not interrupting the current announcement	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported
MUST convey the implicit aria-atomic value of false by only announcing content that has changed	supported	supported	supported	none	supported	supported	supported	supported	supported	supported	supported
MAY convey its name and role as part of the live announcement if it has a name	none	none	none	none	partial	partial	none	none	none	none	none
MAY convey its name and role while navigating the page if it has a name	supported	supported	none	none	supported	supported	none	none	none	none	supported

Role=Log Example

HTML Example

<table role="log"><!--Table that assistive technology users will not perceive as a table.The log role tells browser this is a log, not a table.--></table>

HTML Example 2

The log role is used for regions where new messages are added at the end of the log, and older messages may disappear from the log, such as a chat log or messages in an error console. A role of log has an implicit aria-live value of polite. If a text area is used to send updates to the region with a role of log, the aria-controls attribute should be used to define the relationship.

<div role="log" id="chatarea"><span class="name">Dave: </span> What time will you be finished?</div>⋯<div><label for="chat">Chat: </label><input aria-controls="chatarea"type="text" size="40" name="chat" id="chat"></div>

HTML Example 3

<ul role="log"><li>User 1 logged in.</li><li>User 2 logged in.</li><li>User 1 logged out.</li></ul>

Characteristics

Superclass Role

• section

Inherited States and Properties

• aria-atomic
• aria-busy (state)
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-expanded (state)
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription

Name From

• author

Accessible Name Required

• True

Implicit Value for Role 

• Default for aria-live is polite.

Semantic HTML

No HTML element equivalent.

Reference

• W3C (opens new window)
• A11Y Support