WAI-ARIA: Role=Log

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
WAI-ARIA: Role=Log
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

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST announce changes to the live regionsupportedsupportedsupportednonesupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the implicit aria-live value of polite by not interrupting the current announcementsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey the implicit aria-atomic value of false by only announcing content that has changedsupportedsupportedsupportednonesupportedsupportedsupportedsupportedsupportedsupportedsupported
MAY convey its name and role as part of the live announcement if it has a namenonenonenonenonepartialpartialnonenonenonenonenone
MAY convey its name and role while navigating the page if it has a namesupportedsupportednonenonesupportedsupportednonenonenonenonesupported

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

Name From

  • author

Accessible Name Required

  • True

Implicit Value for Role 

  • Default for aria-live is polite.

Semantic HTML

No HTML element equivalent.

Reference

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.

Similar Posts

WAI-ARIA: Role=Checkbox

WAI-ARIA: Role=Checkbox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A checkable input that has three possible values: true, false, or mixed. Description A checkable input that has three possible values: true, false, or mixed. The aria-checked attribute of a checkbox indicates whether the input is checked (true), unchecked (false), or represents a group of elements that have a mixture of checked and unchecked values…

WAI-ARIA: Role=Group

WAI-ARIA: Role=Group

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies. Description A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies. Contrast with region which is a grouping of user…

WAI-ARIA: ROLE=PROGRESSBAR

WAI-ARIA: ROLE=PROGRESSBAR

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

An element that displays the progress status for tasks that take a long time. Description An element that displays the progress status for tasks that take a long time. A progressbar indicates that the user’s request has been received and the application is making progress toward completing the requested action. The author SHOULD supply values for aria-valuenow,…

WAI-ARIA :Role=Searchbox

WAI-ARIA :Role=Searchbox

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A type of textbox intended for specifying search criteria.Widget role Description New in ARIA 1.1A type of textbox intended for specifying search criteria. See related textbox and search. Role=Searchbox Example HTML Example HTML Example 2 Characteristics Superclass Role Base Concept Inherited States and Properties Name From Accessible Name Required Semantic HTML No HTML element equivalent.The…

WAI-ARIA: Role=Dialog

WAI-ARIA: Role=Dialog

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element. Description A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e.,…

WAI-ARIA: Role=Radiogroup

WAI-ARIA: Role=Radiogroup

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

A group of radio buttons. Description A group of radio buttons. A radiogroup is a type of select list that can only have a single entry checked at any one time. Authors SHOULD enforce that only one radio button in a group can be checked at the same time. When one item in the group…

One Comment

  1. 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.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *