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 |
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
Hi, thank you for this description. What would be the keyboard support for this widget? What does it mean when you say that older messages may disappear? Do you mean visually only? can users still navigate to older messages?
Thanks.