ARIA-atomic is a WAI rich internet application property. The ARIA-atomic property is used along with ARIA-live property when the page contains live regions.
On a web page when auto-updating content such as live chat widget is available the content frequently gets updated. In this scenario users need to know only the updated content that means the recently received message but not the entire chat content. In certain scenarios it does not make sense if only the updated sentence or line is captured by assistive technologies. ARIA-atomic is used when entire live region should be intimated to the user. Example below.
<div aria-live=â€polite†aria-atomic=â€trueâ€>
<h3>the current score is</h3>
<span>23/0 after 5 Overs</span>
</div>
In the above content only the sentence in the span tag will update frequently but it does not make sense on its own. So ARIA-atomic is used to capture the statement before the span as well. ARIA-atomic has two possible values ARIA-atomic=â€true†and ARIA-atomic=â€falseâ€. ARIA-atomic should be set to true for the assistive technologies to get the information of the entire live region. ARIA-relevant property will be used if only a portion of the live region needs to be intimated to the assistive technologies.